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对象解构赋值（即，当从map接收材料String对象作为参数时，该字符串的length属性被解构为长度变量，然后由箭头函数返回）？

Answer 1

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

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

var { length } = 'Hydrogen';

console.log(length);

Answer 2

是的，这是解构。

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 3

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

JavaScript：箭头功能与毁灭？

3 个答案: