ES6中函数的扩展

一、设置默认参数

ES6之前，给函数设置默认参数是这样做的:

function fn(a) {
    if(typeof y === undefined){
        a = a || 'hello';
    }
    console.log(a);
}
fn('hi');   // 'hi'
fn(false);   // false

这里之所以要判断一下，是因为我们本意是函数没有传值时才给参数 a 设置为 'hello'，但是如果调用函数时传入了布尔值 false，也会把参数 a 设置为 'hello'。

 

在 ES6 中允许为函数的参数设置默认值，直接写在参数的后面即可:

function fn(a = 'hello') {
    console.log(a);
}
fn('hi');   // 'hi'
fn(false);   // false

非常的简洁，严谨，不用判断，不过有一点需要注意，参数变量是默认声明的，所以，在函数体内，不能再使用 let 或者 const 再次声明:

function fn(a = 'hello') {
    let a = 'hi';   // error
    const a = 'ha';   // error
}

 

二、rest参数

ES6之前，获取函数多余的参数用的是 arguments:

function fn(a) {
    for(var i = 0; i < arguments.length; i ++){
        console.log(arguments[i]);
    }
    console.log(a);   
}
fn(1, 2, 3);
// 1
// 2
// 3
// 1

而且这里 arguments 对象包括的是所有的参数，并不是严格意义上的多余的参数。

 

ES6 中，现在就可以使用 rest参数，用来完成获取多余的参数这件事了，很方便，语法为 ...变量名:

function fn(a, ...value) {
    value.forEach(function (item) {
        console.log(item);
    });
}
fn(1, 2, 3);
// 2
// 3

函数体内，value 变量就是一个数组，包含传入的2个多余的参数 2、3。

这里有一点需要注意，rest参数 只能放在最后面，不然就报错:

function fn(a, ...value, b) {   // error
    
}

 三、箭头函数

ES6允许使用箭头( => )来定义函数，这里定义一个最简单的函数:

var sayHi = () => {
    alert('hi');
}

// 等价于

function sayHi() {
    alert('hi');
}

需要传参的话把参数写在圆括号里即可:

var add = (a, b) => {
    console.log(a + b);
}

//等同于

function add(a, b){
    console.log(a + b);
}
add(10, 20);   // 20

如果参数只有一个，也可以不使用圆括号:

var fn = a => {
    console.log(a);
}
fn(100);   // 100

而且如果只有一条语句，甚至花括号也可以省略。

var fn = a => console.log(a);
fn(100);   // 100

这里还有一种极其简单的替代写法:

var fn = a => a;

// 等同于

var fn = function(a){
    return a;
}
console.log(fn(10));   // 10

但是这种写法需要谨慎使用，比如返回的是一个对象就需要外面包一个圆括号，不然报错:

var fn = () => {username: 'tom', age: 24};   // error

// 需要这样才可以

var fn = () => ({username: 'tom', age: 24});

 箭头函数有以下几个注意点：

• 箭头函数中的 this，指的是定义时所在的对象，而不是调用时所在的对象。
• 不可以当做构造函数，也就是说，不可以使用 new 操作符，否则报错。
• 不可以使用 arguments对象。

上面第一点，需要格外注意，因为它确定了箭头函数中的 this 的指向是不可变的:

var id = 10;
function fn() {
    setTimeout(function () {
        console.log(this.id);
    },100)
}
fn.call({id: 20});   // 10

上面代码中，setTimeout 中的函数定义时在 fn函数 生成时，此时 this 是指向 {id: 20} 的，但它的真正执行却要等到100毫秒以后，这时 this 就指向了 window 了。如果我们非要改变这种情况，一般是这样做:

var id = 10;
function fn() {
    var that = this;
    setTimeout(function () {
        console.log(that.id);
    },100)
}
fn.call({id: 20});   // 20

现在在箭头函数中，直接写即可:

var id = 10;
function fn() {
    setTimeout(() => {
        console.log(this.id);
    },100)
}
fn.call({id: 20});   // 20

由此可见，箭头函数是可以让 setTimeout 里面的 this，指向定义时所在的作用域，而不是调用时的作用域。