JavaScript：带破坏的箭头函数？ [复制]答案

【问题标题】：JavaScript: Arrow Function with Destruction? [duplicate]JavaScript：带破坏的箭头函数？ [复制]
【发布时间】：2018-06-30 12:23:14
【问题描述】：

在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 对象作为参数时，该字符串的长度属性被解构为长度变量，然后由箭头函数返回）？

【问题讨论】：

解构，是的。破坏，绝对没有。
这不是赋值，而是参数声明，但是是的，它是相同的解构语法，并且与赋值表达式中的工作方式相同。
字符串对象有一个长度属性。因此，该对象属性正在解包：=> developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript ecmascript-6 arrow-functions

【解决方案1】：

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

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

var { length } = 'Hydrogen';

console.log(length);

【讨论】：

【解决方案2】：

是的，这是解构。

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

而不是这样做：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：