解构赋值模式在 JavaScript 中似乎并不清晰

Question

来自网站 exploringjs

在 ES6 之前，没有相应的数据提取机制。 这就是解构 - 它允许您提取多个属性 从对象到对象模式。例如，在左侧 作业侧：

const { first: f, last: l } = obj;

我理解下面的示例，例如，将createServer方法从http模块分配给同名变量。

const { createServer } = require('http');

但是这个呢：

const { parse: parseUrl } = require('url');

如何在代码中使用它？

Answer 1

当您想要更改来自require('url')的变量的名称时，可以使用此选项

因为require('url'(包含parse但假设您在当前范围内已经有名为parse的变量，并且您希望从require('url')获得parse，在这种情况下，您可以使用此模式将其重命名为parseUrl

例：

const parse = "some value";
const { parse: parseUrl }  = require('url');
console.log(parse); // "some value";
console.log(parseUrl); // value coming from require('url');

Answer 2

它只是提取parse数据并在此范围内创建一个parseUrl变量。

当(假设(您使用 API 并希望使用变量而不是成员访问时，这非常方便：

const {id: serviceID} = await fetchDefaultService();
const {id: uid} = await fetchUser(serviceID, uid);

它只是允许控制命名(parseUrl比parse有更多的意义(，并允许你避免潜在的冲突。

Answer 3

示例中的行从url模块中剥离parse函数，并将其重命名为parseUrl。 你可以像这样使用它：

> const { parse: parseUrl } = require('url')
undefined
> parseUrl('http://stackoverflow.com/')
Url {
protocol: 'http:',
slashes: true,
auth: null,
host: 'stackoverflow.com',
port: null,
hostname: 'stackoverflow.com',
hash: null,
search: null,
query: null,
pathname: '/',
path: '/',
href: 'http://stackoverflow.com/' }

这只是从node复制/粘贴。 打开终端，然后键入命令node，您可以交互式键入 js 并测试发生的情况。

Answer 4

解构是一个很棒的功能，可以帮助您非常轻松地从数组中提取对象属性或元素 让我们通过示例来理解它

• 在第一个示例中，因为 OBJ 有一个名为 name 的道具，我们可以从中提取它

• 因此，如果对象有道具，我们可以提取它。

  let obj = {
  name :'maged' 
  }
  let {name} = obj ;  // have this prop 
  let {fullName} = obj ; // don't have this prop 
  console.log(name) ; // maged  
  console.log(fullName) ;  // undefined

  • 在这个例子中，我们从一个函数返回一个对象，该函数类似于NodeJS中的require函数，后者返回导出对象

function require(module) {
return {
name : module ,
method1: '1' ,
method2 : '2'
}
}
let obj =  require('url') ; 
let {name,method1,method2} = obj ; 
console.log(name) ; // url 
console.log(method1) ; // 1 
console.log(method2) ;  // 2

• 如您所见，我们很容易从返回的对象中提取多个属性

• 在我们的第三个示例中，我们将看到如何将 prop 提取到新的变量名

+

let obj = {
a :'a' ,
b:'b' 
}
let {a:first , b:second} = obj ;
console.log(first) ; // a 
console.log(second) // b
console.log(a); // Uncaught ReferenceError: a is not defined

如您所见，我们将属性提取为新的变量名称，这很棒，

• 现在到最后一个示例，我们将看到如果变量中不存在默认值，则如何为变量分配默认值，这对于传递给函数时的默认对象属性之类的东西有好处，

let obj = {
fullName : 'Sniper' 
}
let {fullName='super'} = obj ; // sniper from the obj 
console.log(fullName) ; 
let {name='maged'} = obj ; // maged because undefined in the obj 
console.log(name) ;

我希望这个例子能以某种方式帮助你理解解构及其工作原理

注意 解构适用于数组