ES6介紹二 函數的加強

ES6對於函數的使用新增了不少實用的API，JS的函數跟不少後臺語言PHP，ASP.NET開始看齊：

1. 參數默認值：

 之前咱們爲了給函數建立默認值，必須用一種冗雜的語句,並且有歧義的語句。

//ES5
function myTest(name){
　　name = name || "default";
   console.log(name);
}
//ES6
function myTest(name = "default"){
    console.log(name);
}

在ES5中，若是name傳入了布爾值false將會產生歧義，並且也不直觀，ES6的語法明顯簡潔不少。

參數默認值一般寫在尾部，以即可以省略賦值。

 

2. reset參數

 reset參數是ES6中用於代替arguments對象的一個方法,arguments是類數組，不徹底是數組，沒法使用sort，slice等方法，而reset是真正的數組：

//ES5
function sortArray(){
    var args = Array.prototype.slice.call(arguments);
    args.sort();
}
//ES6
function sortArray(...args){
    args.sort();
}

args一樣也只能放在末尾

function print(name,city,...others){
    var str = name + city;
    for(var item of others){
        str += item;
    }
}
print("mic","shenzhen","male","married");

3. name屬性

 函數具備name屬性返回函數名

function myFunc() {}
myFunc.name // "myFunc"

 

4. 箭頭函數

箭頭函數是ES6中簡化函數代碼的一個重要特性，能夠簡化代碼

//es5
function myFunc(){
    console.log("hello");
}
function myFunc(name){
    console.log(name);
}
function add2(num){
    return num+2;
}
function add2(num1,num2){
　　return num1+num2;
}
function myFunc(){
    return {
        res:true,
        msg:""
    }
}

//es6
()=>console.log("hello");

name=>console.log(name);

num=>num+2;

(num1,num2)=>num1+num2;

()=>({res:true,msg:""})//返回對象須要括號括起來

在forEach場景比較常見，明顯簡潔不少：

//es5
var list = [1,2,3,4,5,6];

list.forEach(function(num){
    return num + 1;
});

//es6
let list = [1,2,3,4,5,6];
list.forEach(num=>num+1);

箭頭函數有一些特色：

(1) 自己沒有this對象，引用this對象是指定義箭頭函數的對象

//es5
{
  addAll:function(pieces) {
    var self = this;
    pieces.forEach(function(piece){
        self.add(piece);
    });
  },
}
//es6
{
    addAll(pieces){
        piece.forEach(piece=>this.add(piece));
    }
}

有何不一樣，ES5中forEach函數的this對象默認不是外層函數的this對象，因此須要用一個變量來引用，而箭頭函數裏面this指的就是定義箭頭函數的對象，因此就是當前對象。

(2) 不能做爲構造函數

(3) 沒有arguments對象，能夠用rest替代

(4) 不能做爲Generator函數