ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式發布了。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

函數參數的擴展

默認參數

基本用法

function fn(name,age=17){
console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

注意點：使用函數默認參數時，不允許有同名參數。

// 不報錯function fn(name,name){
console.log(name);
}

// 報錯
//SyntaxError: Duplicate parameter name not allowed in this contextfunction fn(name,name,age=17){
console.log(name+","+age);
}

只有在未傳遞參數，或者參數為 undefined 時，才會使用默認參數，null 值被認為是有效的值傳遞。

function fn(name,age=17){
   console.log(name+","+age);
}
fn("Amy",null); // Amy,null

函數參數默認值存在暫時性死區，在函數參數默認值表達式中，還未初始化賦值的參數值無法作為其他參數的默認值。

function f(x,y=x){
   console.log(x,y);
}
f(1);  // 1 1function f(x=y){
   console.log(x);
}
f();  // ReferenceError: y is not defined

不定參數

不定參數用來表示不確定參數個數，形如，…變量名，由…加上一個具名參數標識符組成。具名參數只能放在參數組的最后，并且有且只有一個不定參數。

基本用法

function f(...values){
   console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

箭頭函數

箭頭函數提供了一種更加簡潔的函數書寫方式。基本語法是：

參數 => 函數體 基本用法：

var f = v => v;
//等價于
var f = function(a){return a;
}
f(1);  //1

當箭頭函數沒有參數或者有多個參數，要用 () 括起來。

var f = (a,b) => a+b;
f(6,2);  //8

當箭頭函數函數體有多行語句，用 {} 包裹起來，表示代碼塊，當只有一行語句，并且需要返回結果時，可以省略 {} , 結果會自動返回。

var f = (a,b) => {let result = a+b;return result;
}
f(6,2);  // 8

當箭頭函數要返回對象的時候，為了區分于代碼塊，要用 () 將對象包裹起來

// 報錯
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :

// 不報錯
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意點：沒有 this、super、arguments 和 new.target 綁定。

var func = () => {
 // 箭頭函數里面沒有 this 對象，
 // 此時的 this 是外層的 this 對象，即 Window
 console.log(this)
}
func(55)  // Window

var func = () => {    
 console.log(arguments)
}
func(55);  // ReferenceError: arguments is not defined

箭頭函數體中的 this 對象，是定義函數時的對象，而不是使用函數時的對象。

function fn(){
 setTimeout(()=>{
   // 定義時，this 綁定的是 fn 中的 this 對象
   console.log(this.a);
 },0)
}
var a = 20;
// fn 的 this 對象為 {a: 19}
fn.call({a: 18});  // 18

不可以作為構造函數，也就是不能使用 new 命令，否則會報錯

適合使用的場景

ES6 之前，JavaScript 的 this 對象一直很令人頭大，回調函數，經常看到 var self = this 這樣的代碼，為了將外部 this 傳遞到回調函數中，那么有了箭頭函數，就不需要這樣做了，直接使用 this 就行。

// 回調函數
var Person = {
   'age': 18,
   'sayHello': function () {
     setTimeout(function () {
       console.log(this.age);
     });
   }
};
var age = 20;
Person.sayHello();  // 20

var Person1 = {
   'age': 18,
   'sayHello': function () {
     setTimeout(()=>{
       console.log(this.age);
     });
   }
};
var age = 20;
Person1.sayHello();  // 18

所以，當我們需要維護一個 this 上下文的時候，就可以使用箭頭函數。

不適合使用的場景

定義函數的方法，且該方法中包含 this

var Person = {
   'age': 18,
   'sayHello': ()=>{
       console.log(this.age);
     }
};
var age = 20;
Person.sayHello();  // 20
// 此時 this 指向的是全局對象

var Person1 = {
   'age': 18,
   'sayHello': function () {
       console.log(this.age);
   }
};
var age = 20;
Person1.sayHello();   // 18
// 此時的 this 指向 Person1 對象

需要動態 this 的時候

var button = document.getElementById('userClick');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

button 的監聽函數是箭頭函數，所以監聽函數里面的 this 指向的是定義的時候外層的 this 對象，即 Window，導致無法操作到被點擊的按鈕對象。