ES6 箭头函数整理

先上一段代码,功能是传入一个数组,然后每个数都乘以2返回。

const numbers = [1,2,3,4,5];
const double = numbers.map(function(number){
	return number * 2
})
console.log(double1);

如果使用箭头函数改写呢?

let numbers1=[1,2,3,4,5];
let double1=numbers.map(number=>{
	return number*2
})
console.log(double1);

这里可以看到,我们能把number前面的function给去掉,而且number左右两边的括号也可以去掉。如果没有参数或者多个参数的时候,是需要加括号()的,多个参数时需要使用逗号分隔,一个参数时括号可以省略。
代码再优化

let numbers1=[1,2,3,4,5];
let double1=numbers.map((number)=>number*2)

这里使用了隐式返回,下面的代码去掉了return, 减少了代码量。

返回对象的时候的写法,如下:

let c = (a,b)=>({a:a});
or
let d = (a,b)=>{return {a:a}}

除了简化代码,箭头函数还做了哪些东西?解决了this的指向问题。原生的写法this指向的是调用者,箭头函数this绑定的是定义时的那个对象。如果有对象嵌套,this绑定到最近的一层对象上。

var obj = {
		x:100,//属性x
		show(){
			//延迟500毫秒,输出x的值
			setTimeout( //匿名函数 
				function(){console.log(this.x);}, 500 );
		}
	};
obj.show();//打印结果:undefined

为什么打印结果是undefined?问题出现在this上。当代码执行到setTimeout()的时候,此时的this已经变成了window对象。
(setTimeout()是window对象的方法),已经不是obj对象了,所以我们用this.x获取的时候,获取的不是obj.x的值,而是window.x的值,因为没有定义,所以就是undefined了。

下面用箭头函数来改写一下:

//定义一个对象
    var obj = {
        x:100,//属性x
        show(){
            //延迟500毫秒,输出x的值
            setTimeout(
               //不同处:箭头函数
               () => { console.log(this.x)},
               500
            );
        }
    };
    obj.show();//打印结果:100

当定义obj的show()方法的时候,我们在箭头函数编写this.x, 这里的this指向的是obj, 所以打印出来的值也是obj.x.

参考:
https://blog.csdn.net/weixin_42554311/article/details/82589733
https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://segmentfault.com/a/1190000010914119

发布了199 篇原创文章 · 获赞 62 · 访问量 21万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览