[js]关于MDN中 elements.map(({ “length“: lengthFooBArX }) =」 lengthFooBArX) 的解释

关于MDN中箭头函数部分的这段代码

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

elements.map(element => element.length); // [8, 6, 7, 9]
// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

涉及到关于对象解构赋值的两个知识点

1. 给新的变量名赋值： 从一个对象中提取变量并赋值给和对象属性名不同的新的变量名

   ({a: foo, b: bar} = {a: 10, b: 20});
   console.log(foo); //10
   console.log(bar); //20
   

2. 从作为函数实参的对象中提取数据： 当函数传入参数是对象时，使用大括号可取得对应属性名的属性值

   function userId({id}) {
   	console.log(id);
   }
   
   userId({id: 42}); //42
   

现在回头看这段代码

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

实际上就是获取传入数组元素对象的length属性，那么下面的写法也是同样可以的：

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