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}));
map中使用箭头函数遇到的坑的更多相关文章
- 简单理解ECMAScript2015中的箭头函数新特性
箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...
- ES6中的箭头函数
关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...
- ES6中的箭头函数与普通函数的区别
箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...
- ES6中的箭头函数和普通函数有什么区别?
1.普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call().bind().apply().(正是因为它没有 ...
- python中关于round函数的小坑
这个一直都想写,但是因为这个点比较小,所以一直懒得动手.不过还是补上吧,留着早晚是个祸害. round函数很简单,对浮点数进行近似取值,保留几位小数.比如 >>> round(10. ...
- JS中的箭头函数与this
转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不 ...
- es6中的(=>)箭头函数
x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含 ...
- ES 6 中的箭头函数及用法
ES6标准新增了一种新的函数:Arrow Function(箭头函数). 主要的几种写法如下: 组成: 参数 => 语句, 参数不是1个: (参数,参数2)=>语句 语句不止一条: 参数 ...
- ES6中的箭头函数的语法、指向、不定参数
箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...
随机推荐
- c++ vector用法详解
1. 定义: 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container)可以认为是一个动态数组,其中一个vector中的所有对象都必须是同一种类型的. 2. 构造函 ...
- c语言:随机函数应用
#include <stdio.h> #include <time.h>//声明time 时间不可逆转一直在变 #include <math.h> #include ...
- C语言的编译与链接
C语言源文件要经过编译.链接才能生成可执行程序:编译(Compile)会将源文件(.c文件)转换为目标文件.对于 VC/VS,目标文件后缀为.obj:对于GCC,目标文件后缀为.o.编译是针对单个源文 ...
- 夏壹队——nabcd
我们团队项目名称是TD校园通,无课表查询你作为主要功能,是一个亮眼的功能. 我们的无课表查询功能主要解决大家平时上自习还要到教学楼拍照,教室课程情况也有断更的时候,而这个功能就解决大家的这个功能,能够 ...
- HTML5-CSS(一)
一.创建 CSS 样式表有三种方式 1. 元素内嵌样式<p style="color:red;font-size:50px;">这是一段文本</p>解释:即 ...
- Python+Requests+Xpath(解析)爬取某站点简历图片(数据分析三)
1.环境安装 pip install lxml 2.解析原理 使用通用爬虫爬取网页数据 实例化etree对象,且将页面数据加载到该对象中 使用xpath函数结合xpath表达式进行标签定位和指定数据提 ...
- 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入
张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...
- npx的使用方法、场景
目录 npx使用教程 npm与npx的概念 npx的使用场景(对比npm的一些优势) 使用场景1: 想用项目中已经安装好的某个包, 但是不能直接执行(因为没有全局安装, 涉及环境变量的问题) 使用场景 ...
- JBoss 5.x/6.x 反序列化漏洞(CVE-2017-12149)
检测
- 破解网站码验证,Java实现,不调用任何平台api接口
package image.images; import java.io.File; import java.io.IOException; import java.io.InputStream; i ...