destructuring数组如何获取length属性

Question

我在一篇文章中遇到了这种解构表达。

const words = ['oops', 'gasp', 'shout', 'sun'];
let { length } = words;
console.log(length); // 4

length如何获得4的值？我知道.length是数组的属性，但这种语法是如何工作的？它似乎在做let length = words.length;，实际上在babel中确实输出了它。但我的问题是它背后的逻辑是什么？ 让我感到困惑的是一系列价值观的混合以及{length}的使用。

我已阅读MDN的说明，但无法看到此示例的解释。

Answer 1

简介

我有同样的问题，所以我阅读了文档，最后点击了我，变量（length）刚刚被赋予了与变量同名的Key的Object值（{{1 }}）。

这可能没有意义，所以我将首先分两步解释这种类型的解构，然后展示它在这种情况下是如何应用的。

然后我将提供最后一个（很酷）的例子，这个例子让我最初感到困惑，并引导我研究这个话题。这也是duplicate question中描述的确切问题。

解构

此语法称为Object Destructuring（MDN）：

words[length]

相同的结果 - 订单并不重要！

左侧的变量（let a, b; ({a, b} = {a: 1, b: 2}); a; // 1 b; // 2 ({b, a} = {c: 3, b: 2, d: 4, a: 1}); a; // 1 b; // 2 ＆amp; a）被分配到对象上关键字值的值（右侧）。

b

我们可以将右边的对象存储到变量（在这种情况下为const obj = {a: 1, b: 2}; let {a, b} = obj; a; // 1 b; // 2 ）中，然后使用相同的语法（没有parens）。

应用于您的示例（数组）

最后，让我们将obj数组显示为一个对象（数组只是引擎盖下的对象）。

如果您在Chrome控制台中输入words，您会看到以下内容：

['oops', 'gasp', 'shout', 'sun']

就像上面一样，它将const words = {0: 'oops', 1: 'gasp', 2: 'shout', 3: 'sun', length: 4}; let { length } = words; console.log(length); // 4 变量（左）设置为length对象/数组（右）中相应键的值。 words的值为words[length]，因此4变量（左）现在的值也为length。

解构有用的示例

来自Wes Bos's Blog：

给定一个4对象，如何创建引用其属性的全局变量？

person

旧学校：

const person = {
  first: 'Wes',
  last: 'Bos',
  country: 'Canada',
  city: 'Hamilton',
  twitter: '@wesbos'
};

解构的力量！

const first = person.first;
const last = person.last;

BONUS：酷用量w / Arrow Functions（MDN）

挑战：返回包含输入数组中相应元素长度的新数组。

此示例显示为使用箭头功能的方法。所有这三个解决方案都解决了这个问题，他们只是展示了最终达到一个简单的单行的演变。

const { first, last } = person;

在传递给var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; materials.map(function(material) { return material.length; }); // [8, 6, 7, 9] materials.map((material) => { return material.length; }); // [8, 6, 7, 9] materials.map(({length}) => length); // [8, 6, 7, 9] 的输入数组的每次迭代中，我们将map参数设置为作为参数传入的当前元素{length}：

materials

这会将{length} = 'Hydrogen'; 变量设置为当前字符串元素的length属性（下面有更多内容），然后只需将length的值返回到length函数最终返回一个新数组，其中包含原始数组长度中的所有元素作为其元素。

补充：字符串（基元）与数组（对象）

＆＃34;串＆＃34;是＆＃34;原语＆＃34;而不是对象，所以当你试图在字符串上调用map等属性时，它们没有属性但是，原语被强制（更改）为String Object。

以下是Chrome控制台中.length对象的外观。请注意它与String对象的实际相同之处。 Array（function）是一个构造函数，因此调用String将创建一个从该函数构造的新Object，其中new（Object）作为其原型（String指的是__proto__于）：

Answer 2

将代码视为

const words = {0:'oops', 1:'gasp', 2:'shout', 3:'sun', length:4};
let { length } = words;
console.log(length);

它本质上是（永远不要告诉所有其他数组附带的东西）

现在有意义吗？

Answer 3

如果您在属于{的{​​{1}}和}内添加了一个属性，则会复制该值。
在这里，我们检查属性Array。将constructor记录到控制台。

如果添加的属性不属于数组，则会返回constructor function

另一个例子

undefined

我们正在测试const words = ['oops', 'gasp', 'shout', 'sun']; let { constructor } = words; console.log(constructor); 将返回something

undefined