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

map中使用箭头函数遇到的坑的更多相关文章

  1. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  2. ES6中的箭头函数

    关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...

  3. ES6中的箭头函数与普通函数的区别

    箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...

  4. ES6中的箭头函数和普通函数有什么区别?

    1.普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call().bind().apply().(正是因为它没有 ...

  5. python中关于round函数的小坑

    这个一直都想写,但是因为这个点比较小,所以一直懒得动手.不过还是补上吧,留着早晚是个祸害. round函数很简单,对浮点数进行近似取值,保留几位小数.比如 >>> round(10. ...

  6. JS中的箭头函数与this

    转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不 ...

  7. es6中的(=>)箭头函数

    x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含 ...

  8. ES 6 中的箭头函数及用法

    ES6标准新增了一种新的函数:Arrow Function(箭头函数). 主要的几种写法如下: 组成: 参数 => 语句, 参数不是1个: (参数,参数2)=>语句 语句不止一条: 参数 ...

  9. ES6中的箭头函数的语法、指向、不定参数

    箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...

随机推荐

  1. 4.Java基础

    为了项目方便管理,创建空项目 一.注释 平时编写代码,在代码量比较少的时候,还可以看懂自己写的,但是当项目结构一复杂起来,我们就需要用到注释了 注释并不会被执行,是给写代码的人看的 书写注释是一个非常 ...

  2. 关于java异常处理的思考

    学习java的过程中,初学者更多的是为了实验而写代码,而不考虑实际情况中的人机交互过程中的一些问题. 在java项目中,更多的用户不会因为你给了某些限制提醒,他就一定会按照你所给的提示来输入或者操作, ...

  3. spring-4-申明事务

    categories: spring5 事务回顾 事务在项目开发过程非常重要,涉及到数据的一致性的问题,不容马虎! 事务管理是企业级应用程序开发中必备技术,用来确保数据的完整性和一致性. 事务就是把一 ...

  4. windows系统下 PHP怎么安装redis扩展

    在windows系统下安装redis就不赘述了,基本上就是下一步,下一步. 然后通过通过命令行启动服务. 我是在xamp 3.2.2的集成环境下进行本地redis扩展安装配置的,php的版本是5.6. ...

  5. (Ooencv3)颜色空间转换

    (Ooencv3)颜色空间转换 opencv中有多种色彩空间,包括 RGB.HSI.HSL.HSV.HSB.YCrCb.CIE XYZ.CIE Lab8种,使用中经常要遇到色彩空间的转化,以便生成ma ...

  6. TensorFlow模型部署到服务器---TensorFlow2.0

    前言 ​ 当一个TensorFlow模型训练出来的时候,为了投入到实际应用,所以就需要部署到服务器上.由于我本次所做的项目是一个javaweb的图像识别项目.所有我就想去寻找一下java调用Tenso ...

  7. java正则匹配字符串例子

    import java.util.regex.Matcher;import java.util.regex.Pattern; public class sss { public static void ...

  8. SSH远程端口转发实战详解

    问题 前段时间在外地没有在实验室,随身携带了一个笔记本电脑.但是笔记本性能不够,想用SSH远程连接实验室的电脑.问如何连接?现有以下设备 设备 IP 备注 系统 实验室电脑C1 192.168.0.2 ...

  9. [.NET大牛之路 006] 了解 Roslyn 编译器

    .NET大牛之路 • 王亮@精致码农 • 2021.07.09 维基百科对编译器的解释是:编译器是一种程序,它将某种编程语言编写的源代码(原始语言)转换成另一种编程语言(目标语言).编译是从源代码(通 ...

  10. k8s强制删除资源

    一般强制删除 kubernetes 的资源: kubectl delete <resource> <resourename> --grace-period=0 --force ...