JavaScript:箭头功能与毁灭？

Question

在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]

我先了解这两个.最后一个函数究竟发生了什么？

它是一个ES6对象解构赋值(即当一个物质String对象作为参数从map接收时,该字符串的长度属性被解构为长度变量,然后由箭头函数返回)？

Answer 1

是的，这就是解构。

material 是一个对象，您可以以更简洁易读的方式获取他的属性。

而不是这样做：

materials.map((material) => {
  return material.length;
});

你使用 ES6{ length }从material对象中提取属性，你会得到这个：

materials.map(({length}) => length); 

此外，在箭头函数中，您不必用 包装函数{}，如果它是单行的，如果您不包装它，{}您也可以省略return关键字，函数将自动返回它。

你可以在这里读更多关于它的内容：

https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

Answer 2

您可以使用'Hydrogen'as作为解构赋值的元素来查看迭代的第一个元素.

'Hydrogen'有一个length属性,因为它是一个字符串,具有length属性.获取此值并将其分配给length变量,稍后在回调中将其用作新数组的返回值.

var { length } = 'Hydrogen';

console.log(length);