ES6函數(shù)怎么用

ECMAScript 6.0（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)，是使得JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。

函數(shù)參數(shù)的擴(kuò)展

默認(rèn)參數(shù)

基本用法

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

注意點(diǎn)：使用函數(shù)默認(rèn)參數(shù)時(shí)，不允許有同名參數(shù)。

// 不報(bào)錯(cuò)function fn(name,name){
console.log(name);
}

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

只有在未傳遞參數(shù)，或者參數(shù)為 undefined 時(shí)，才會(huì)使用默認(rèn)參數(shù)，null 值被認(rèn)為是有效的值傳遞。

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

函數(shù)參數(shù)默認(rèn)值存在暫時(shí)性死區(qū)，在函數(shù)參數(shù)默認(rèn)值表達(dá)式中，還未初始化賦值的參數(shù)值無(wú)法作為其他參數(shù)的默認(rèn)值。

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

不定參數(shù)

不定參數(shù)用來(lái)表示不確定參數(shù)個(gè)數(shù)，形如，…變量名，由…加上一個(gè)具名參數(shù)標(biāo)識(shí)符組成。具名參數(shù)只能放在參數(shù)組的最后，并且有且只有一個(gè)不定參數(shù)。

基本用法

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

箭頭函數(shù)

箭頭函數(shù)提供了一種更加簡(jiǎn)潔的函數(shù)書寫方式?；菊Z(yǔ)法是：

參數(shù) => 函數(shù)體 基本用法：

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

當(dāng)箭頭函數(shù)沒有參數(shù)或者有多個(gè)參數(shù)，要用 () 括起來(lái)。

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

當(dāng)箭頭函數(shù)函數(shù)體有多行語(yǔ)句，用 {} 包裹起來(lái)，表示代碼塊，當(dāng)只有一行語(yǔ)句，并且需要返回結(jié)果時(shí)，可以省略 {} , 結(jié)果會(huì)自動(dòng)返回。

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

當(dāng)箭頭函數(shù)要返回對(duì)象的時(shí)候，為了區(qū)分于代碼塊，要用 () 將對(duì)象包裹起來(lái)

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

// 不報(bào)錯(cuò)
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意點(diǎn)：沒有 this、super、arguments 和 new.target 綁定。

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

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

箭頭函數(shù)體中的 this 對(duì)象，是定義函數(shù)時(shí)的對(duì)象，而不是使用函數(shù)時(shí)的對(duì)象。

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

不可以作為構(gòu)造函數(shù)，也就是不能使用 new 命令，否則會(huì)報(bào)錯(cuò)

適合使用的場(chǎng)景

ES6 之前，JavaScript 的 this 對(duì)象一直很令人頭大，回調(diào)函數(shù)，經(jīng)?？吹?var self = this 這樣的代碼，為了將外部 this 傳遞到回調(diào)函數(shù)中，那么有了箭頭函數(shù)，就不需要這樣做了，直接使用 this 就行。

// 回調(diào)函數(shù)
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

所以，當(dāng)我們需要維護(hù)一個(gè) this 上下文的時(shí)候，就可以使用箭頭函數(shù)。

不適合使用的場(chǎng)景

定義函數(shù)的方法，且該方法中包含 this

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

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

需要?jiǎng)討B(tài) this 的時(shí)候

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

button 的監(jiān)聽函數(shù)是箭頭函數(shù)，所以監(jiān)聽函數(shù)里面的 this 指向的是定義的時(shí)候外層的 this 對(duì)象，即 Window，導(dǎo)致無(wú)法操作到被點(diǎn)擊的按鈕對(duì)象。