Javascript 如何工作“elements.map（{length:lengthFooBArX}）=>lengthFooBArX）

我在这里阅读了有关箭头函数的内容，但不明白这两部分是如何工作的

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

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

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

---

代码正在分解函数参数的结构

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

与

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

在第一个示例中，代码创建了一个名为lengthFooBArX的回调局部变量，并将该变量分配给元素的length属性

第一个代码相当于

elements.map(x => {
    let lengthFooBArX = x.length;
    return lengthFoBArX;
}

分解结构的语法是

let {length} = x;
//is same as
let length = x.length;

如果变量名和属性名不同，则

let {length:otherName} = x;
//is same as 
let otherName = x.length;

---

这是一个组合的箭头函数，解构字符串和重命名内部的解构

大致相当于以下内容：

elements.map( function( element ) {
  var lengthFooBArX = element.length;
  return lengthFooBArX;
});

所以{length}部分提取字符串的长度。因此，在第一次迭代中，字符串是“Hydrogen”，长度为8个字符

elements.map{length:lengthFooBArX}的：lengthFooBArX部分将我们创建的变量从“length”重命名为“lengthFooBArX”

---

最后，箭头隐式返回lengthFooBArX，作为映射“Hydrogen”的结果，因此结果数组中的第一个元素是8。

如果您查看此代码 elements.map{length:lengthFooBArX}=>lengthFooBArX；，您可以看到，您正在对map函数中传递的字符串应用length函数，并且输出是长度，因为这是{}中包含的内容

它也可以像elements一样以语法糖化的方式编写。mapelement=>{ 返回元素长度；

---

};

首先，我们创建一个字符串项数组。 在它之后，我们调用函数映射，传递给它的函数与

function({ length }){
    return length // We get as length property length of the input object
}

第二个代码段：

function({ length: lengthFooBArX }){
    return lengthFooBArX // We get as lengthFooBArX property length of the input object
}

---

params=>{code}是函数params{code}的模拟。有些人认为这样更好

我不知道你在问什么；长度是字符串的一个属性，您使用解构来访问传递到映射中的任何内容的属性，在本例中是字符串数组。@DaveNewton:这部分做什么？{length:lengthFooBArX}您一般理解参数的解构吗？@user145959@deceze这是。。。自我回答；OP不明白，这就是重点。你的等价物是非语法的糖版本。