map中使用箭头函数遇到的坑

Posted 2021-11-27 pjl43

箭头函数提供了更简洁和更短的语法，其中一个可用功能是可以将函数编写为具有隐式返回值的lambda表达式。这对于功能样式代码很方便，比如使用函数映射数组：

const numbers = [1,2,3,4]; 
numbers.map（n => n * n）;

这个箭头函数将按照预期的方式工作，它将值自身相乘并返回到包含的新数组[1, 4, 9, 16]

但是，如果你尝试映射到对象，例如，假设将数字映射到包含如下值的对象数组：

const numbers = [1,2,3,4]; 
numbers.map（n => {value：n}）;

这里的结果实际上是一个包含未定义值的数组。虽然看起来我们在这里返回一个对象，但是解释器看到了完全不同的东西。如果我们将上面的箭头函数推断为解释器，实际上最终执行的内容像这样：

numbers.map（function（n）{ 
  value：
  n 
  return; 
}）;

解决方法就是将对象包装在括号中，将其转换为表达式而不是块语句

numbers.map（n =>（{value：n}））;