解构数组如何获得长度属性
how does destructuring array get length property
我在一篇文章中遇到了这个解构表达式。
const words = ['oops', 'gasp', 'shout', 'sun'];
let { length } = words;
console.log(length); // 4
length如何得到4的值？我知道 .length 是数组的 属性，但是这个语法是如何工作的呢？它似乎在做 let length = words.length; 并且实际上在 babel 中确实如此输出它。但我的问题是它背后的逻辑是什么？
令我困惑的是值数组的混合和 {length}.
的使用
我已阅读 MDN 的说明，但看不到这个示例的解释。
把代码想象成
const words = {0:'oops', 1:'gasp', 2:'shout', 3:'sun', length:4};
let { length } = words;
console.log(length);
它本质上是什么（没关系所有其他东西数组附带）
现在有意义吗？
如果您在属于 Array 的 { 和 } 中添加一个 属性，它的值将被复制。
这里我们检查 属性 constructor。将记录 constructor function 到控制台。
如果你添加一个 属性 不属于数组，将 return undefined
另一个例子
const words = ['oops', 'gasp', 'shout', 'sun'];
let { constructor } = words;
console.log(constructor);
我们正在测试 something 将 return undefined
const words = ['oops', 'gasp', 'shout', 'sun'];
let { something } = words;
console.log(something);
简介
我有同样的问题，所以我阅读了文档，它最终让我明白，变量 (length) 只是在与变量 (words[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 Object/array（右）中相应键的值。 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;
奖励：酷用法 w/ Arrow Functions (MDN)
挑战：return 具有输入数组中各个元素长度的新数组。
此示例显示为使用箭头函数的一种方式。这三种解决方案都解决了问题，它们只是展示了最终形成简单单行代码的演变过程。
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 属性（更多内容见下文），然后简单地 returns 的值 length 到 map 函数，最终 return 一个新数组，其元素是原始数组长度中的所有元素。
补充：字符串（原始）与数组（对象）
"strings" 是 "primitives"，不是对象，所以它们没有属性，但是当您尝试在字符串上调用 属性 例如 .length 时，原语被强制（更改）为 String Object。
这是 String 对象在 Chrome 控制台中的样子。请注意它实际上与 Array 对象相同。 String (function) 是一个构造函数，因此调用 new 将创建一个新的对象，该对象以 String (Object) 作为其原型（即 __proto__ 所指的）到):
我在一篇文章中遇到了这个解构表达式。
const words = ['oops', 'gasp', 'shout', 'sun'];
let { length } = words;
console.log(length); // 4
length如何得到4的值？我知道 .length 是数组的 属性，但是这个语法是如何工作的呢？它似乎在做 let length = words.length; 并且实际上在 babel 中确实如此输出它。但我的问题是它背后的逻辑是什么？
令我困惑的是值数组的混合和 {length}.
我已阅读 MDN 的说明，但看不到这个示例的解释。
把代码想象成
const words = {0:'oops', 1:'gasp', 2:'shout', 3:'sun', length:4};
let { length } = words;
console.log(length);
它本质上是什么（没关系所有其他东西数组附带）
现在有意义吗？
如果您在属于 Array 的 { 和 } 中添加一个 属性，它的值将被复制。
这里我们检查 属性 constructor。将记录 constructor function 到控制台。
如果你添加一个 属性 不属于数组，将 return undefined
另一个例子
const words = ['oops', 'gasp', 'shout', 'sun'];
let { constructor } = words;
console.log(constructor);
我们正在测试 something 将 return undefined
const words = ['oops', 'gasp', 'shout', 'sun'];
let { something } = words;
console.log(something);
简介
我有同样的问题，所以我阅读了文档，它最终让我明白，变量 (length) 只是在与变量 (words[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 Object/array（右）中相应键的值。 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;
奖励：酷用法 w/ Arrow Functions (MDN)
挑战：return 具有输入数组中各个元素长度的新数组。
此示例显示为使用箭头函数的一种方式。这三种解决方案都解决了问题，它们只是展示了最终形成简单单行代码的演变过程。
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 属性（更多内容见下文），然后简单地 returns 的值 length 到 map 函数，最终 return 一个新数组，其元素是原始数组长度中的所有元素。
补充：字符串（原始）与数组（对象）
"strings" 是 "primitives"，不是对象，所以它们没有属性，但是当您尝试在字符串上调用 属性 例如 .length 时，原语被强制（更改）为 String Object。
这是 String 对象在 Chrome 控制台中的样子。请注意它实际上与 Array 对象相同。 String (function) 是一个构造函数，因此调用 new 将创建一个新的对象，该对象以 String (Object) 作为其原型（即 __proto__ 所指的）到):