箭头函数提供了更简洁和更短的语法,其中一个可用功能是可以将函数编写为具有隐式返回值的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. 如何为HttpServer服务器配置PHP FastCGI,从而让HttpServer具备动态交互能力

    一.软件准备 1.下载HttpServer :HttpServer.zip HttpServer是一款windows平台下基于IOCP模型的轻量级.高并发.高性能web服务器(参见文章). 2.下载W ...

  2. 将gitlab内置node_exporter提供外部prometheus使用

    目录 修改gitlab的配置 重新初始化配置 gitlab服务已经包含了node_exporter服务,但是配置文件限制了9100端口的访问,所以主机信息不能直接被外部的prometheus收集 修改 ...

  3. 「AGC034E」 Complete Compress

    「AGC034E」 Complete Compress 显然可以枚举根. 然后把某两棵棋子同时往深度浅的方向提,即对不存在祖先关系的两个棋子进行操作. 如果能到达那么就更新答案. 问题转化为如何判定能 ...

  4. PYTHON 使用re.findall如果没有引用

    python使用re.findall时必须提前import re否则不提示错误,只是找不到结果 import re ab=re.findall('cmp=com.(.*?)/',aa)

  5. urllib3使用池管理发送请求和requests常用方法的基本使用+session使用

    使用urllib3的池管理器 urllib3是在urllib进行更加深入的改进,最大的好处就是在urllib的基础上添加了池管理,以至于我们不需要再去注意我们需要由那个链接去发送请求,而只需要获取到链 ...

  6. File类与常用IO流第十章——序列化流

    第十章.序列化流 序列化流和反序列化流概述 序列化:用一个字节序列表示一个对象,该字节序列包含该对象的数据.对象的类型和对象中存储的属性等等信息.字节序列写出到文件后,相当于文件中持久保存了一个对象的 ...

  7. Spark—local模式环境搭建

    Spark--local模式环境搭建 一.Spark运行模式介绍 1.本地模式(loca模式):spark单机运行,一般用户测试和开发使用 2.Standalone模式:构建一个主从结构(Master ...

  8. JS系统函数

    1. parseInt--转为整型 2. parseFloat--转为浮点型 3. Number--转为数字型 4. isFinite()--检测一个值是否为有限值,如果是返回true,否则就是Inf ...

  9. Qt学习-ListView的拖拽

    最近在学习Qt 里面的QML, 使用DropArea和MouseArea实现了ListView的拖拽. 想起了当年用Delphi, 差不多一样的东西, 不过那是2000了. Delphi也是不争气啊, ...

  10. 一张图带你搞懂Javascript原型链关系

    在某天,我听了一个老师的公开课,一张图搞懂了原型链. 老师花两天时间理解.整理的,他讲了两个小时我们当时就听懂了. 今天我把他整理出来,分享给大家.也让我自己巩固加深一下. 就是这张图: 为了更好的图 ...