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


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

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


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

 

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

一开始是这样的:

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