web-dev-qa-db-ja.com

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ドキュメントからのものです。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

javascriptarraysecmascript-6arrow-functions
10
Kermit

lengthは文字列のプロパティであり、 destructured にすることができ、マップに返されます。

それはほとんど同じです：

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

  return length;
});
5
Ori Drori