ES6中函数的扩展

1、设置默认参数

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
}

 

2、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个多余的参数 二、3。

这里有一点须要注意，rest参数 只能放在最后面，否则就报错:

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

 3、箭头函数

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，指向定义时所在的做用域，而不是调用时的做用域。