时间戳

首页 > 解决方案 > 这是如何工作的“elements.map(({ length :lengthFooBArX }) => lengthFooBArX);”

javascript - 这是如何工作的“elements.map(({ length :lengthFooBArX }) => lengthFooBArX);”

问题描述

我在这里阅读箭头函数（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Shorter_functions）但是不明白这两个部分是如何工作的？

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

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

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

标签： javascript

解决方案

代码正在解构函数参数。

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;

推荐阅读