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对象解构赋值（即当一个material字符串对象作为map的参数接收时，该字符串的长度属性被解构为一个长度变量，然后返回通过箭头函数)?

Answer 1

是的，这就是解构。

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

而不是这样做：

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

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

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

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

您可以在此处阅读更多相关信息：

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

Answer 2

{length}是数组元素的.length，例如"Hydrogen".length就是8

Answer 3

您可以查看迭代的第一个元素 'Hydrogen' 作为 destructuring assignment 的元素。

'Hydrogen' 的长度为属性，因为它是一个字符串，其长度为属性。该值被获取并分配给 length 变量，随后在回调中用作新数组的 return 值。

var { length } = 'Hydrogen';

console.log(length);

JavaScript: 带破坏的箭头函数？

JavaScript: Arrow Function with Destruction?

javascript

ecmascript-6

arrow-functions