摘要：函數(shù)的擴(kuò)展函數(shù)參數(shù)的默認(rèn)值之前，不能直接為函數(shù)的參數(shù)指定默認(rèn)值，只能采用變通的方法。箭頭函數(shù)引入了一種新的函數(shù)，叫做箭頭函數(shù)。箭頭函數(shù)和普通函數(shù)的行為非常相似，但是在語法構(gòu)成上非常不同。意味著函數(shù)內(nèi)的的值是全局對象，不是對象。

ES6 之前，不能直接為函數(shù)的參數(shù)指定默認(rèn)值，只能采用變通的方法。

function log(x, y) {
  y = y || "World";
  console.log(x, y);
}

上面代碼檢查函數(shù)log的參數(shù)y有沒有賦值，如果沒有，則指定默認(rèn)值為World。這種寫法的缺點(diǎn)在于，如果參數(shù)y賦的值對應(yīng)的布爾值為false，則該賦值不起作用。

function greet(name, greeting) {
  name = (typeof name !== "undefined") ?  name : "Student";
  greeting = (typeof greeting !== "undefined") ?  greeting : "Welcome";

  return `${greeting} ${name}!`;
}

greet(); // Welcome Student!
greet("James"); // Welcome James!
greet("Richard", "Howdy"); // Howdy Richard!

為了避免這個(gè)問題，通常需要先判斷一下參數(shù)y是否被賦值，如果沒有，再等于默認(rèn)值。

if (typeof y === "undefined") {
  y = "World";
}

ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫在參數(shù)定義的后面。

function log(x, y = "World") {
  console.log(x, y);
}

log("Hello") // Hello World

剩余參數(shù)也用三個(gè)連續(xù)的點(diǎn) ( ... ) 表示，使你能夠?qū)⒉欢〝?shù)量的元素表示為數(shù)組。

剩余參數(shù)可以與解構(gòu)賦值結(jié)合起來，用于生成數(shù)組。

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

可以將剩余參數(shù)看著展開運(yùn)算符的對立面；如果展開運(yùn)算符是拿出包裝盒中的所有物品，那么剩余參數(shù)就是將所有物品放回包裝盒中。

剩余參數(shù)的另一個(gè)用例是處理可變參數(shù)函數(shù)。可變參數(shù)函數(shù)是接受不定數(shù)量參數(shù)的函數(shù)。

例如，假設(shè)有一個(gè)叫做 sum() 的函數(shù)，它會(huì)計(jì)算不定數(shù)量的數(shù)字的和。在運(yùn)行期間，如何調(diào)用 sum() 函數(shù)？

sum(1, 2);
sum(10, 36, 7, 84, 90, 110);
sum(-23, 3000, 575000);

實(shí)際上有無數(shù)種方式可以調(diào)用 sum() 函數(shù)。不管傳入函數(shù)的數(shù)字有多少個(gè)，應(yīng)該始終返回?cái)?shù)字的總和。

使用參數(shù)對象

在之前版本的 JavaScript 中，可以使用參數(shù)對象處理這種類型的函數(shù)。參數(shù)對象是像數(shù)組一樣的對象，可以當(dāng)做本地變量在所有函數(shù)中使用。它針對傳入函數(shù)的每個(gè)參數(shù)都包含一個(gè)值，第一個(gè)參數(shù)從 0 開始，第二個(gè)參數(shù)為 1，以此類推。

function sum() {
  let total = 0;  
  for(const argument of arguments) {
    total += argument;
  }
  return total;
}

現(xiàn)在可以正常運(yùn)行，但是存在問題：

如果查看 sum() 函數(shù)的定義，會(huì)發(fā)現(xiàn)它沒有任何參數(shù)。這容易引起誤導(dǎo)，因?yàn)槲覀冎?sum() 函數(shù)可以處理不定數(shù)量的參數(shù)。

難以理解。

如果你從未使用過參數(shù)對象，那么看了這段代碼后很可能會(huì)疑問參數(shù)對象來自何處。是不是憑空出現(xiàn)的？看起來肯定是這樣。

使用剩余參數(shù)

function sum(...nums) {
  let total = 0;  
  for(const num of nums) {
    total += num;
  }
  return total;
}

注意，rest 參數(shù)之后不能再有其他參數(shù)（即只能是最后一個(gè)參數(shù)），否則會(huì)報(bào)錯(cuò)。

ES6 引入了一種新的函數(shù)，叫做箭頭函數(shù)。箭頭函數(shù)和普通函數(shù)的行為非常相似，但是在語法構(gòu)成上非常不同。

普通函數(shù)可以是函數(shù)聲明或函數(shù)表達(dá)式，但是箭頭函數(shù)始終是表達(dá)式。實(shí)際上，它們的全稱是“箭頭函數(shù)表達(dá)式”

//普通函數(shù)
const upperizedNames = ["Farrin", "Kagure", "Asser"].map(function(name) { 
  return name.toUpperCase();
});

//箭頭函數(shù)
const upperizedNames = ["Farrin", "Kagure", "Asser"].map(
  name => name.toUpperCase()
);

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號代表參數(shù)部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。

var sum = (num1, num2) => { return num1 + num2; }

對于普通函數(shù)，this 的值基于函數(shù)如何被調(diào)用。對于箭頭函數(shù)，this 的值基于函數(shù)周圍的上下文。換句話說，箭頭函數(shù)內(nèi)的，this 的值與函數(shù)外面的 this 的值一樣。

我們先看一個(gè)普通函數(shù)中的 this 示例，再看一個(gè)箭頭函數(shù)是如何使用 this 的。

// constructor
function IceCream() {
  this.scoops = 0;
}

// adds scoop to ice cream
IceCream.prototype.addScoop = function() {
  setTimeout(function() {
    this.scoops++;
    console.log("scoop added!");
  }, 500);
};

const dessert = new IceCream();
dessert.addScoop();

運(yùn)行上述代碼后，你會(huì)認(rèn)為半毫秒之后，dessert.scoops 會(huì)是1。但并非這樣：結(jié)果是NaN

這是因?yàn)閭鬟f給 setTimeout() 的函數(shù)被調(diào)用時(shí)沒用到 new、call() 或 apply()，也沒用到上下文對象。意味著函數(shù)內(nèi)的 this 的值是全局對象，不是 dessert 對象。實(shí)際上發(fā)生的情況是，創(chuàng)建了新的 scoops 變量（默認(rèn)值為 undefined），然后遞增（undefined + 1 結(jié)果為 NaN）

// constructor
function IceCream() {
  this.scoops = 0;
}

// adds scoop to ice cream
IceCream.prototype.addScoop = function() {
  setTimeout(() => { // an arrow function is passed to setTimeout
    this.scoops++;
    console.log("scoop added!");
  }, 0.5);
};

const dessert = new IceCream();
 
console.log(dessert.scoops); //1

因?yàn)榧^函數(shù)從周圍上下文繼承了 this 值，所以這段代碼可行！

如果我們將 addScoop() 方法也改為箭頭函數(shù)，你認(rèn)為會(huì)發(fā)生什么？

// constructor
function IceCream() {
    this.scoops = 0;
}

// adds scoop to ice cream
IceCream.prototype.addScoop = () => { // addScoop is now an arrow function
  setTimeout(() => {
    this.scoops++;
    console.log("scoop added!");
  }, 0.5);
};

const dessert = new IceCream();
dessert.addScoop();

這段代碼因?yàn)橥辉蚨黄鹱饔茫醇^函數(shù)從周圍上下文中繼承了 this 值。在 addScoop() 方法外面，this 的值是全局對象。因此如果 addScoop() 是箭頭函數(shù)，addScoop() 中的 this 的值是全局對象。這樣的話，傳遞給 setTimeout() 的函數(shù)中的 this 的值也設(shè)為了該全局對象！