Fonctions fléchées ES6 et array.map

Question

J'essaie de comprendre quelques manières raccourcies d'écrire ES6. Ce que je ne peux pas comprendre pleinement dans l'exemple ci-dessous est le dernier raccourci "({length})" - je comprends que cela fonctionne, et qu'il obtient la propriété length du tableau, mais pas pourquoi. Comment cette syntaxe pourrait-elle être appliquée dans un autre scénario, n'impliquant pas de tableaux?

//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));

L'exemple ci-dessus provient de la documentation mozilla des fonctions flèches. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 1

Le length est une propriété des chaînes, et peut être destructuré et renvoyé dans la carte.

C'est essentiellement la même chose que:

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

  return length;
});