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

- Magnus

---

解构赋值，是的。销毁，绝对不。 - Bergi

这不是一个赋值操作，而是一个参数声明，但是它使用的是相同的解构语法，并且与赋值表达式中的使用方式相同。 - Bergi

字符串对象具有长度属性。因此，该对象属性正在被解包：=> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_function_parameter - user5496198

Answer 1

是的，这就是解构。

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

而不是这样做：

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

你使用ES6从material对象中提取{ length }属性，结果如下：

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

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

你可以在这里阅读更多相关信息： https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

- Nir Ben-Yair

Answer 2

你可以使用 'Hydrogen' 作为迭代的第一个元素来进行解构赋值。

由于 'Hydrogen' 是字符串，它有一个长度属性。这个值被赋给变量 length，然后在回调函数中用作新数组的返回值。请注意保留原有的HTML标签。

var { length } = 'Hydrogen';

console.log(length);

- Nina Scholz

Answer 3

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

- guest271314