ES6 MDN的例子， 参数结构看不明白

Question

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名

elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

 

请哪位大哥解释一下最后面一句，小弟看不明白。

Answer 1

一开始是这样的：

elements.map((element) => element.length );

当然也可以这样：

elements.map((element) => {
  return element.length;
});

然后可以这样：

elements.map((element) => {
  const {length} = element
  return length;
});

当然这等价于

elements.map((element) => {
  const {length: lengthFooBarX} = element
  return lengthFooBarX;
});

简写下，直接在回调函数参数那里解构，就是这样

elements.map(({length: lengthFooBarX}) => {
  return lengthFooBarX;
});

再简写下：

elements.map(({length: lengthFooBarX}) => lengthFooBarX );