请教JavaScript箭头函数中map方法的对象解构语法原理

嘿，别纠结啦，这两段代码的核心其实是JavaScript的对象解构赋值，结合箭头函数的简写特性而已，咱们一步一步拆明白：

先看你的基础数组：

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

每个元素都是字符串，而JS里的字符串是「类对象」——当你访问它的属性（比如length）时，JS会自动把它包装成临时的String对象，所以咱们能像解构普通对象一样提取它的属性。

第一段代码：elements.map(({ length :lengthFooBArX }) => lengthFooBArX) #

这里的({ length :lengthFooBArX })是对象解构的「重命名」写法：

• 箭头函数的参数位置用了对象解构，意思是：接收当前遍历到的数组元素（也就是每个字符串），把它的length属性提取出来
• length :lengthFooBArX的作用是：把提取到的length属性值，赋值给一个名叫lengthFooBArX的变量
• 最后箭头函数直接返回这个变量，所以每个字符串的长度就被收集起来，得到结果[8, 6, 7, 9]

换成长写法你就懂了，它完全等价于：

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

第二段代码：elements.map(({ length }) => length) #

这个是解构的简写语法：

• 当你要提取的属性名，和你想要声明的变量名完全一样时，就可以省略冒号和重复的名字，直接写{ length }
• 它等价于({ length: length })，也就是把当前元素的length属性提取到变量length里，然后返回它
• 所以结果和第一段完全一致，只是写法更紧凑简洁

同样，它的等价长写法是：

elements.map(function(str) {
  return str.length;
});

总结一下，这两段代码都是用对象解构的方式，快速从字符串（类对象）里提取length属性，再通过箭头函数的简写特性让代码更精炼～

内容的提问来源于stack exchange，提问作者lovecode