ES6新的函数默认值和箭头函数
函数这玩意, 只要你在玩编程, 就一定在随时随地的跟函数打交道, 在这篇博文中, 我们来聊一聊ES6为函数增加了哪些常用的新特性
目录(标红的代表相对来说比较重要):
-
函数参数的默认值
-
箭头函数
函数参数的默认值
在ES6以前, 当我们在使用函数的时候, 有时候如果某些参数没有传递我们希望给他一个默认值的话, 我们通常这样写, 我们举例一个封装一个网络请求
function ajax(url, method, data, callback, flag) {
var method = method || 'GET';
var flag = flag || true;
// ...剩下的代码
}
这样写你不能说他有问题, 但是就是感觉很怪异, 首先我们不能很直观的一眼就看出谁拥有默认值, 其次我们这样给默认值的方式确实有点不伦不类
于是ES6推出了函数参数默认值, 来让函数参数默认值的书写方式更加的优雅
// 还是同一个例子, 用ES6写就合理很多
function ajax(url, method = 'GET', data, callback, flag = true) {
// ...剩下的代码
}
箭头函数
函数中用到最频繁也最突出的新特性 -> 箭头函数来喽, 盘他
在ES5中, 我们定义函数的方式有两种
- 函数声明
function foo() {}
- 函数表达式
var foo = function() {}
在ES6中, 官方给我们推出了一种高级感特别强的新的书写方式 -> 箭头函数, 语法如下
let foo = () => {};
上方的书写等同于
let foo = () => {};
箭头函数的规则
- 如果箭头函数只有一个参数, 那么可以省略参数中的圆括号而仅书写参数, 如果无参数或有多个参数则不行
const foo = name => {}
- 如果箭头函数的函数体只有一条返回语句, 则大括号也可以省略
const foo = number => number + 1;
上面的书写等同于
const foo = (number) => {
return number + 1;
}
- 如果箭头函数的函数体只有一个返回语句, 但是该返回语句返回的是一个对象, 则要用圆括号包裹告知浏览器这个大括号非代码块大括号
const foo = number => ({num: number});
上面的书写等同于
const foo = number => {
return {
num: number
}
}
箭头函数的实际应用
箭头函数主要是使得代码更加的简介, 也更加的易懂, 提高代码在视觉上的维护效率
我们来看几个例子, 将同样函数功能用ES5方式和ES6方式各写一次, 大家可能更能体会到箭头函数对于代码整洁度的提升有多大
// ES5
const sum = function(a, b) {
return a + b;
}
const sq = function(x) {
return x * x;
}
['a', 'b', 'c'].map(function(ele) {
return ele.toUpperCase();
})
// ES6
const sum = (a, b) => a + b;
const sq = x => x * x;
['a', 'b', 'c'].map(ele => ele.toUpperCase());
同样的功能, 用ES6的箭头函数书写会显得更加的简洁, 可读性也大大的提升
使用箭头函数时的注意点
当我们基本了解了箭头函数的使用方法以后, 有一些注意点使我们必须要知道的
- 箭头函数本身没有this指向, 他的this会继承定义他时所在父级的this指向
我们用ES5和ES6进行对比可能更加明显
// ES5
function foo() {
setTimeout(function () {
console.log(this.userName); //该匿名函数的this会理所应当的指向window, 所以输出loki
}, 200)
}
var userName = 'loki';
foo.apply({name: 'thor'});
// ES6箭头函数
function foo() {
setTimeout(() => {
// 由于他是箭头函数,他的this指向跟随定义它时的父级的this指向, 所以他的输出为thor
console.log(this.userName);
}, 200)
}
var userName = 'loki';
foo.apply({userName: 'thor'});
- 箭头函数不可以用作构造函数
const Person = () => {};
const person = new Person(); // 报错: Person is not a constructor
-
箭头函数中没有arguments类数组
-
箭头函数不能用作Generator函数(以后会仔细介绍)
其实ES6/7在函数身上还是下了很多功夫, 比如新的函数this绑定方法, 尾调用优化, 严格模式之类的, 但是在目前可接触的开发中, 这些可能应用比较少, 所以就挑了两个来讲, 有兴趣的话可以自己去了解
至此, 函数的常用特性就已经写完了, 希望我讲清楚了
