妙用es6中的箭头函数

栏目:学习 来源:潮流中国 时间:2019-10-06
妙用es6中的箭头函数

引言

在ES6中ECMAScript引入了一种新的创建和使用函数的方法——箭头函数,本文我们将对比一下传统函数的写法和箭头函数之间的一些差异。

箭头函数的出现目的是为了解决传统函数写法中的几个痛点,箭头函数的优势在于:

  • 更简短的写法()=>{}对比function(){}
  • 不绑定this

语法

在箭头函数中,参数列表和函数体由=>符号分隔。也就是说,function关键字有效地被替换为=>。首先是参数,然后是=>符号,在然后是函数体。如下简要概述:

  • 空函数(当函数执行的时候会返回undefined)
const func1 = () => { };
  • 单参数
const add1 = x => x + 1;

在参数本身基础上加一。函数主体是x+1,这个地方没有return语句,当只有一行表达式的时候会默认返回表达式结果。

  • 多参数
const add1 = (x) => x + 1;
const sum = (num1, num2) => num1 + num2;
const sum = (num1, num2) => {
return num1 + num2;
}

与单个参数不同的是,多个参数必须用括号包含起来,单个参数括号是可选的

  • 返回对象

如果箭头函数返回对象,则需要将它们包括在括号中,如下

const details = name => ({ firstName: name });//如果不加大括号返回的则为undefined
  • 作为回调

使用箭头函数再将回调传递给像map、filter之类的方法时,会更加简单

如下:

const powerOf2 = [1, 2, 3, 4].map(el => el ** 2) 
// [ 1, 4, 9, 16 ]

使用ES5的写法:

const powerOf2 = [1, 2, 3, 4].map(function(el) {
return el ** 2;
});

箭头函数中的this

箭头函数和传统函数最大的区别就是this的使用,箭头函数中没有this的概念,在箭头函数中使用this,相当于是使用了父作用域的this,我们来看下一段代码直接了当的来理解

const details = {
name: 'Arfat',
friends: ['Bob', 'Alex'],
getFriends: function () {
this.friends.forEach(friend => {
console.log(this.name + " is friends with " + friend);
});
}
}
details.getFriends();
// Arfat is friends with Bob
// Arfat is friends with Alex

从上面的结果显示this.拿到的是父作用域中name的值。

箭头函数与传统函数的区别

箭头函数在某些方面和传统函数不同

  • 不能使用arguments特殊变量

arguments变量的目的是在类似数组的对象中公开所有参数。在ES6中,我们有rest参数来代替

  • 不能用作构造函数

箭头函数没有自己的new.target属性,因此不能用作构造函数,如下代码会报错

const Person = name => {
this.name = name;
}
const person1 = new Person('Arfat'); // Will throw an error ‘Person is not a constructor’
  • 无法使用this绑定

在箭头函数中this受到了约束,所以无法手动分配this,但仍然可以使用.bind()或.apply()

const add = (a, b) => a + b;
const add5 = add.bind(null, 5);
add5(7); // 12
  • 不能使用generator 函数

generator 必须使用function*语法。

总结

箭头函数的出现只是为了简化传统函数,但是并不能取代它,有些情况下,箭头函数无法重写传统函数。只是在大多数情况下,不依赖于动态的this值或者当函数依赖父作用域的this时可以有效的利用好箭头函数,本文简单的介绍了ES6中的箭头函数,如果对你有帮助可以点个关注呦,在这里你可以学到更多!

妙用es6中的箭头函数

相关文章
评论
新版评论功能开发中
头条推荐
最新资讯