ES6箭头函数和array.map

Question

我试图了解编写ES6的一些简写方法.我在下面的例子中无法完全理解的是最后一个简写"({length})" - 我理解它确实有效,并且它获取了数组的长度属性,但不是为什么.如何在另一个场景中应用此语法,而不涉及数组？

//Declare array
var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

//Long version - ok
materials.map(function(material) { 
  return material.length; 
});

//Arrow function - ok
materials.map((material) => {
  return material.length;
});

//Shorthand arrow function - ok
materials.map(str => str.length);

//What? :)
materials.map(({length}) => length));

上面的例子来自箭头函数的mozilla文档. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 1

它length是字符串的属性,可以在地图中进行解构和返回.

它大致相同:

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