javascript - 解构数组如何获取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) 只是在与变量同名的键处被分配了对象的值 ( 单词[长度]).

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

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

---

解构

此语法称为 Object Destructuring (MDN):

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

相同的结果 - 顺序无关紧要!

左边的变量(a 和 b)被分配给对象(右边)上它们对应键值的值。

---

const obj = {a: 1, b: 2};
let {a, b} = obj;

a; // 1
b; // 2

我们可以将右侧的对象存储到一个变量中(在本例中为 obj)，然后使用相同的语法(不带括号)。

---

应用于您的示例(数组)

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

如果您在 Chrome 的控制台中键入 ['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 变量(左)现在的值为 4以及。

---

解构有用的例子

来自 Wes Bos's Blog :

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

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

老派:

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

解构的力量!

const { first, last } = person;

---

奖励:使用 Arrow Functions 很酷(MDN)

挑战:返回具有输入数组中各个元素长度的新数组。

此示例显示为使用箭头函数的一种方式。这三种解决方案都解决了问题，它们只是展示了最终形成简单单行代码的演变过程。

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 的值code> 到 map 函数，该函数最终返回一个新数组，其中包含原始数组长度中的所有元素作为其元素。

补充:字符串(原始)与数组(对象)

“字符串”是“基元”，而不是对象，因此它们没有属性但是当您尝试在字符串上调用诸如 .length 之类的属性时，基元将被强制(更改) 变成 String Object .

这是 String 对象在 Chrome 控制台中的样子。请注意它实际上与 Array 对象相同。 String (function) 是一个构造函数，因此调用 new 将创建一个新的对象，该对象以 String (Object) 作为原型(prototype) (这就是 __proto__ 指的是什么):