Javascript ES6箭头函数和array.map

我正在尝试理解一些写ES6的速记方法。 在下面的示例中，我无法完全理解的是最后一个速记“（{length}）”——我理解它确实有效，并且它获得了数组的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文档。

---

长度是字符串的一个属性，可以在映射中输入和返回

基本上与以下内容相同：

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