再不用ES6就Out了--函数的新特性

函数默认值

默认值这要是针对参数传入为undefined的值。ES6之前的写法:

function add(x, y) {
x = x || 1;
y = y || 1;
return x + y;
}
console.log(add()); // 2

进入ES6的你:

function add(x = 1, y = x) {
return x + y;
}
console.log(add()); // 2

这里有一点要注意的：(函数内不能再重新声明参数变量)

function add(x = 1, y = 1) {
let x = 20; //Error
const y = 20; //Error
}

rest参数

说到rest参数，首先介绍一下新的运算符,扩展运算符(…)

* 将一个数组变为参数数列。

let arr = [1,2,3];
console.log(Object.prototype.toString.call(...arr)); //[object Number]这点有点奇怪
console.log(...arr); //1 2 3

怎么用扩展运算符来成就rest参数呢：

function add(...numbers) {
let sum = 0;
for (let val of numbers) {
sum += val;
}
return sum;
}
let arr = [1,2,3,4,5];
console.log(add(1,2,3,4,5)); //15
console.log(add(...arr)); //15
//ES5的写法
console.log(add.apply(null,arr)); //15

注意事项:

* rest参数只能是最后一个参数（剩下的参数的意思）

* 使用rest参数代替arguments

箭头函数

ES6之前的写法:

function add(x, y) {
return x + y;
}

进入ES6你可以采用这样的姿势：

单个参数 单条语句
let add = n => n * 10;

多个参数，多条语句
let add = (x = 1, y = x) => {
x = x * 10;
y = y - 10;
return x * y;
}

是不是简洁明了。接下来让我们来看一段代码更深入的了解箭头函数：

ES6之前：
function old() {
function temp() {
console.log('==========old============');
console.log(this); // window
console.log(this.name) //global
}
temp();
}
var name = 'global';
old.call({name: 'xiaoming'});

ES6:
let newFunc = function () {
let temp = () => {
console.log("=========new===========");
console.log(this); //Object {name: "xiaoming"}
console.log(this.name); //xiaoming
}
temp();
}
var name = 'global';
newFunc.call({name: 'xiaoming'});

这里我们发现箭头函数是可以绑定this的，它是怎么实现的呢？

var newFunc = function () {
var _this = this; //保存this
var temp = function () {
console.log("=========polyfill===========");
console.log(_this); //Object {name: "xiaoming"}
console.log(_this.name); //xiaoming
}
temp();
}

var name = 'global'; //Object {name: "xiaoming"}
newFunc.call({name: 'xiaoming'}); //xiaoming

所以箭头函数本身是没有this的,而是绑定了this。