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，指向定義時所在的做用域，而不是調用時的做用域。