当前位置: 代码迷 >> 综合 >> 箭头函数中的参数结构, elements.map(({ length: lengthFooBArX }) = lengthFooBArX);这种写法是如何起作用的
  详细解决方案

箭头函数中的参数结构, elements.map(({ length: lengthFooBArX }) = lengthFooBArX);这种写法是如何起作用的

热度:49   发布时间:2023-11-03 09:33:17.0

在MDN Web文档关于箭头函数的解释中的如下写法:

({ "length": lengthFooBArX }) => lengthFooBArX是如何起作用的很多小伙伴不理解,本文作解释。

var elements = ['Hydrogen','Helium','Lithium','Beryllium'
];elements.map(function(element) { return element.length; 
}); // 返回数组:[8, 6, 7, 9]// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {return element.length;
}); // [8, 6, 7, 9]// 当箭头函数只有一个参数时,可以省略参数的圆括号
elements.map(element => {return element.length;
}); // [8, 6, 7, 9]// 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]// 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名,
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

很多小伙伴应该不理解这种参数解构的写法({ "length": lengthFooBArX }) => lengthFooBArX是什么意思,我翻阅国外的网站stackoverflow发现,上面的写法等同于:

elements.map( function( element ) {

var lengthFooBArX = elements.length;

return lengthFooBArX;

});

这样便很好理解了。

  相关解决方案