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

    一.开发模式 MVC模式: model:数据库 view:前端展示 controller:逻辑控制MTV模式 model:数据库 view:逻辑控制 template:前端展示 二.Django介绍 ...

  2. Java基础00-形参和返回值22

    1. 形参和返回值 1.1 类名作为形参和返回值 1.2 抽象类名作为形参和返回值 代码示例: 方法的形参是抽象类名 抽象动物类:定义了一个抽象的eat方法 动物的操作类:创建一个useAnimal方 ...

  3. Java多线程(下)

    线程同步 当多个线程访问一个对象时,有可能会发生污读,即读取到未及时更新的数据,这个时候就需要线程同步. 线程同步: 即当有一个线程在对内存进行操作时,其他线程都不可以对这个内存地址进行操作,直到该线 ...

  4. 一定要收藏的5个优秀的SpringCloud开源项目

    上一期为大家推荐了几个前端模板,没看过的点下面 一定要收藏的5个后台管理系统的前端框架 今天再为大家推荐几个优秀的SpringCloud开源脚手架项目,开箱即用,不管是学习还是开发新项目,都非常不错. ...

  5. POJ2044 Weather Forecast 题解

    写了一个小时--不会--无耻地看题解去了-- 关键在于存储状态的方式,真没想到-- 每个状态要存当前坐标.天数和这个状态下四个角的情况,vis数组存整张图的访问情况,有天数.坐标.四个角的情况,只有这 ...

  6. informix数据库分页

    需求描述 当查询结果返回大量数据情况下,比如报表查询.需要按一定条件排序提供分页呈现数据. INFORMIX实现方案:Informix 数据库提供了非常便捷.高效的SQL. SELECT SKIP M ...

  7. selenium定位,操作元素

    1.定位方式 1.id driver.find_element_by_id('username').send_keys('byhy') 2.name driver.find_element_by_na ...

  8. python算法学习--待续

    几个算法网站 算法可视化网站:https://visualgo.net/en,通过动画展示算法实现过程 程序可视化网站:http://www.pythontutor.com/visualize.htm ...

  9. VM12升级VM15

    之前一直用的12,现在想要升级为15.主要是为了解决kali操作系统版本兼容问题 打开VM12,点击[帮助]-->[软件更新]--> [检查更新] 发现有VM15,点击[了解详情] VM1 ...

  10. 构建前端第3篇之---使用scss

    张艳涛 写于2021-1-20 主要解决俩个问题: 在单个vue文件中 <style rel="stylesheet/scss" lang="scss"& ...