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)只是在键上赋予Object的值,与变量(words[length])的名称相同.

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

然后,我将提供最后一个(很酷)的例子,这个例子最初使我很困惑,并引导我研究这个主题.这也是重复问题中描述的确切问题.

解构

此语法称为对象解析(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)的变量分配给Object(右侧)上相应键值的值.

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

a; // 1
b; // 2

我们可以将右边的对象存储到变量中(obj在本例中),然后使用相同的语法(没有parens).

应用于您的示例(数组)

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

如果您输入['oops', 'gasp', 'shout', 'sun']Chrome的控制台,您会看到以下内容:

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

就像上面一样,它将length变量(左)设置为wordsObject/array(右)中相应键的值.words[length]具有值,4因此length变量(左)现在也具有值4.

解构有用的示例

来自Wes Bos的博客:

给定一个personObject,如何创建引用其属性的全局变量？

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

老套:

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

解构的力量!

const { first, last } = person;

奖励:带箭头功能的酷用法(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该map函数最终返回一个新数组,其中包含原始数组长度中的所有元素作为其元素.

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

"strings"是"primitives",而不是对象,所以它们没有属性但是当你尝试调用.length一个字符串等属性时,该基元被强制(更改)为一个String对象.

以下是StringChrome控制台中对象的外观.注意它与ArrayObject 实际上是一样的.String(function)是一个构造函数,所以调用new将创建一个从该函数构造的新Object,其中String(Object)作为其原型(__proto__引用的是):

Answer 2

将代码视为存在

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

它本质上是(永远不要告诉所有其他数组的东西)

现在有意义吗？