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

箭头函数提供了更简洁和更短的语法,其中一个可用功能是可以将函数编写为具有隐式返回值的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}));

猜你喜欢

转载自www.cnblogs.com/pjl43/p/10817087.html