## 函數參數的默認值
在ES6之前，不能直接為函數的參數指定默認值，只能采用變通的方法。
~~~
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
~~~
上面代碼檢查函數log的參數y有沒有賦值，如果沒有，則指定默認值為World。這種寫法的缺點在于，如果參數y賦值了，但是對應的布爾值為false，則該賦值不起作用。就像上面代碼的最后一行，參數y等于空字符，結果被改為默認值。
為了避免這個問題，通常需要先判斷一下參數y是否被賦值，如果沒有，再等于默認值。這有兩種寫法。
~~~
// 寫法一
if (typeof y === 'undefined') {
y = 'World';
}
// 寫法二
if (arguments.length === 1) {
y = 'World';
}
~~~
ES6允許為函數的參數設置默認值，即直接寫在參數定義的后面。
~~~
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
~~~
可以看到，ES6的寫法比ES5簡潔許多，而且非常自然。下面是另一個例子。
~~~
function Point(x = 0, y = 0) {
this.x = x;
this.y = y;
}
var p = new Point();
// p = { x:0, y:0 }
~~~
除了簡潔，ES6的寫法還有兩個好處：首先，閱讀代碼的人，可以立刻意識到哪些參數是可以省略的，不用查看函數體或文檔；其次，有利于將來的代碼優化，即使未來的版本徹底拿到這個參數，也不會導致以前的代碼無法運行。
默認值的寫法非常靈活，下面是一個為對象屬性設置默認值的例子。
~~~
fetch(url, { body = '', method = 'GET', headers = {} }){
console.log(method);
}
~~~
上面代碼中，傳入函數fetch的第二個參數是一個對象，調用的時候可以為它的三個屬性設置默認值。
甚至還可以設置雙重默認值。
~~~
fetch(url, { method = 'GET' } = {}){
console.log(method);
}
~~~
上面代碼中，調用函數fetch時，如果不含第二個參數，則默認值為一個空對象；如果包含第二個參數，則它的method屬性默認值為GET。
定義了默認值的參數，必須是函數的尾部參數，其后不能再有其他無默認值的參數。這是因為有了默認值以后，該參數可以省略，只有位于尾部，才可能判斷出到底省略了哪些參數。
~~~
// 以下兩種寫法都是錯的
function f(x = 5, y) {
}
function f(x, y = 5, z) {
}
~~~
如果傳入undefined，將觸發該參數等于默認值，null則沒有這個效果。
~~~
function foo(x = 5, y = 6){
console.log(x,y);
}
foo(undefined, null)
// 5 null
~~~
上面代碼中，x參數對應undefined，結果觸發了默認值，y參數等于null，就沒有觸發默認值。
指定了默認值以后，函數的length屬性，將返回沒有指定默認值的參數個數。也就是說，指定了默認值后，length屬性將失真。
~~~
(function(a){}).length // 1
(function(a = 5){}).length // 0
(function(a, b, c = 5){}).length // 2
~~~
上面代碼中，length屬性的返回值，等于函數的參數個數減去指定了默認值的參數個數。
利用參數默認值，可以指定某一個參數不得省略，如果省略就拋出一個錯誤。
~~~
function throwIfMissing() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
}
foo()
// Error: Missing parameter
~~~
上面代碼的foo函數，如果調用的時候沒有參數，就會調用默認值throwIfMissing函數，從而拋出一個錯誤。
從上面代碼還可以看到，參數mustBeProvided的默認值等于throwIfMissing函數的運行結果（即函數名之后有一對圓括號），這表明參數的默認值不是在定義時執行，而是在運行時執行（即如果參數已經賦值，默認值中的函數就不會運行），這與python語言不一樣。
另一個需要注意的地方是，參數默認值所處的作用域，不是全局作用域，而是函數作用域。
~~~
var x = 1;
function foo(x, y = x) {
console.log(y);
}
foo(2) // 2
~~~
上面代碼中，參數y的默認值等于x，由于處在函數作用域，所以x等于參數x，而不是全局變量x。
參數變量是默認聲明的，所以不能用let或const再次聲明。
~~~
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
~~~
上面代碼中，參數變量x是默認聲明的，在函數體中，不能用let或const再次聲明，否則會報錯。
參數默認值可以與解構賦值，聯合起來使用。
~~~
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
~~~
上面代碼中，foo函數的參數是一個對象，變量x和y用于解構賦值，y有默認值5。
## rest參數
ES6引入rest參數（形式為“...變量名”），用于獲取函數的多余參數，這樣就不需要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多余的參數放入數組中。
~~~
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
~~~
上面代碼的add函數是一個求和函數，利用rest參數，可以向該函數傳入任意數目的參數。
下面是一個rest參數代替arguments變量的例子。
~~~
// arguments變量的寫法
const sortNumbers = () =>
Array.prototype.slice.call(arguments).sort();
// rest參數的寫法
const sortNumbers = (...numbers) => numbers.sort();
~~~
上面代碼的兩種寫法，比較后可以發現，rest參數的寫法更自然也更簡潔。
rest參數中的變量代表一個數組，所以數組特有的方法都可以用于這個變量。下面是一個利用rest參數改寫數組push方法的例子。
~~~
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)
~~~
注意，rest參數之后不能再有其他參數（即只能是最后一個參數），否則會報錯。
~~~
// 報錯
function f(a, ...b, c) {
// ...
}
~~~
函數的length屬性，不包括rest參數。
~~~
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
~~~
## 擴展運算符
擴展運算符（spread）是三個點（...）。它好比rest參數的逆運算，將一個數組轉為用逗號分隔的參數序列。該運算符主要用于函數調用。
~~~
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42
~~~
上面代碼中，`array.push(...items)`和`add(...numbers)`這兩行，都是函數的調用，它們的都使用了擴展運算符。該運算符將一個數組，變為參數序列。
下面是Date函數的參數使用擴展運算符的例子。
~~~
const date = new Date(...[2015, 1, 1]);
~~~
由于擴展運算符可以展開數組，所以不再需要apply方法，將數組轉為函數的參數了。
~~~
// ES5的寫法
function f (x, y, z){}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的寫法
function f (x, y, z){}
var args = [0, 1, 2];
f(...args);
~~~
擴展運算符與正常的函數參數可以結合使用，非常靈活。
~~~
function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);
~~~
下面是擴展運算符取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數組最大元素的寫法。
~~~
// ES5的寫法
Math.max.apply(null, [14, 3, 77])
// ES6的寫法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
~~~
上面代碼表示，由于JavaScript不提供求數組最大元素的函數，所以只能套用Math.max函數，將數組轉為一個參數序列，然后求最大值。有了擴展運算符以后，就可以直接用Math.max了。
另一個例子是通過push函數，將一個數組添加到另一個數組的尾部。
~~~
// ES5的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
~~~
上面代碼的ES5寫法中，push方法的參數不能是數組，所以只好通過apply方法變通使用push方法。有了擴展運算符，就可以直接將數組傳入push方法。
擴展運算符還可以用于數組的賦值。
~~~
var a = [1];
var b = [2, 3, 4];
var c = [6, 7];
var d = [0, ...a, ...b, 5, ...c];
d
// [0, 1, 2, 3, 4, 5, 6, 7]
~~~
上面代碼其實也提供了，將一個數組拷貝進另一個數組的便捷方法。
~~~
const arr2 = [...arr1];
~~~
擴展運算符也可以與解構賦值結合起來，用于生成數組。
~~~
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
const [first, ...rest] = ["foo", "bar"];
first // "foo"
rest // ["bar"]
const [first, ...rest] = ["foo", "bar", "baz"];
first // "foo"
rest // ["bar","baz"]
~~~
如果將擴展運算符用于數組賦值，只能放在參數的最后一位，否則會報錯。
~~~
const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯
~~~
JavaScript的函數只能返回一個值，如果需要返回多個值，只能返回數組或對象。擴展運算符提供了解決這個問題的一種變通方法。
~~~
var dateFields = readDateFields(database);
var d = new Date(...dateFields);
~~~
上面代碼從數據庫取出一行數據，通過擴展運算符，直接將其傳入構造函數Date。
擴展運算符還可以將字符串轉為真正的數組。
~~~
[..."hello"]
// [ "h", "e", "l", "l", "o" ]
~~~
任何類似數組的對象，都可以用擴展運算符轉為真正的數組。
~~~
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
~~~
上面代碼中，querySelectorAll方法返回的是一個nodeList對象，擴展運算符可以將其轉為真正的數組。
擴展運算符內部調用的是數據結構的Iterator接口，因此只要具有Iterator接口的對象，都可以使用擴展運算符，比如Map結構。
~~~
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
~~~
Generator函數運行后，返回一個遍歷器對象，因此也可以使用擴展運算符。
~~~
var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]
~~~
上面代碼中，變量go是一個Generator函數，執行后返回的是一個遍歷器，對這個遍歷器執行擴展運算符，就會將內部遍歷得到的值，轉為一個數組。
## 箭頭函數
ES6允許使用“箭頭”（=>）定義函數。
~~~
var f = v => v;
~~~
上面的箭頭函數等同于：
~~~
var f = function(v) {
return v;
};
~~~
如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分。
~~~
var f = () => 5;
// 等同于
var f = function (){ return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
~~~
如果箭頭函數的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。
~~~
var sum = (num1, num2) => { return num1 + num2; }
~~~
由于大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號。
~~~
var getTempItem = id => ({ id: id, name: "Temp" });
~~~
箭頭函數可以與變量解構結合使用。
~~~
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full( person ){
return person.first + ‘ ‘ + person.name;
}
~~~
箭頭函數使得表達更加簡潔。
~~~
const isEven = n => n % 2 == 0;
const square = n => n * n;
~~~
上面代碼只用了兩行，就定義了兩個簡單的工具函數。如果不用箭頭函數，可能就要占用多行，而且還不如現在這樣寫醒目。
箭頭函數的一個用處是簡化回調函數。
~~~
// 正常函數寫法
[1,2,3].map(function (x) {
return x * x;
});
// 箭頭函數寫法
[1,2,3].map(x => x * x);
~~~
另一個例子是
~~~
// 正常函數寫法
var result = values.sort(function(a, b) {
return a - b;
});
// 箭頭函數寫法
var result = values.sort((a, b) => a - b);
~~~
下面是rest參數與箭頭函數結合的例子。
~~~
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]
~~~
箭頭函數有幾個使用注意點。
* 函數體內的this對象，綁定定義時所在的對象，而不是使用時所在的對象。
* 不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
* 不可以使用arguments對象，該對象在函數體內不存在。
上面三點中，第一點尤其值得注意。this對象的指向是可變的，但是在箭頭函數中，它是固定的。下面的代碼是一個例子，將this對象綁定定義時所在的對象。
~~~
var handler = {
id: "123456",
init: function() {
document.addEventListener("click",
event => this.doSomething(event.type), false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
~~~
上面代碼的init方法中，使用了箭頭函數，這導致this綁定handler對象，否則回調函數運行時，this.doSomething這一行會報錯，因為此時this指向全局對象。
由于this在箭頭函數中被綁定，所以不能用call()、apply()、bind()這些方法去改變this的指向。
長期以來，JavaScript語言的this對象一直是一個令人頭痛的問題，在對象方法中使用this，必須非常小心。箭頭函數綁定this，很大程度上解決了這個困擾。
箭頭函數內部，還可以再使用箭頭函數。下面是一個ES5語法的多重嵌套函數。
~~~
function insert(value) {
return {into: function (array) {
return {after: function (afterValue) {
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}};
}};
}
insert(2).into([1, 3]).after(1); //[1, 2, 3]
~~~
上面這個函數，可以使用箭頭函數改寫。
~~~
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}})});
insert(2).into([1, 3]).after(1); //[1, 2, 3]
~~~
下面是一個部署管道機制（pipeline）的例子，即前一個函數的輸出是后一個函數的輸入。
~~~
const pipeline = (...funcs) =>
val => funcs.reduce((a, b) => b(a), val);
const plus1 = a => a + 1;
const mult2 = a => a * 2;
const addThenMult = pipeline(plus1, mult2);
addThenMult(5)
// 12
~~~
如果覺得上面的寫法可讀性比較差，也可以采用下面的寫法。
~~~
const plus1 = a => a + 1;
const mult2 = a => a * 2;
mult2(plus1(5))
// 12
~~~
箭頭函數還有一個功能，就是可以很方便地改寫λ演算。
~~~
// λ演算的寫法
fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v)))
// ES6的寫法
var fix = f => (x => f(v => x(x)(v)))
(x => f(v => x(x)(v)));
~~~
上面兩種寫法，幾乎是一一對應的。由于λ演算對于計算機科學非常重要，這使得我們可以用ES6作為替代工具，探索計算機科學。
## 函數綁定
箭頭函數可以綁定this對象，大大減少了顯式綁定this對象的寫法（call、apply、bind）。但是，箭頭函數并不適用于所有場合，所以ES7提出了“函數綁定”（function bind）運算符，用來取代call、apply、bind調用。雖然該語法還是ES7的一個提案，但是Babel轉碼器已經支持。
函數綁定運算符是并排的兩個雙引號（::），雙引號左邊是一個對象，右邊是一個函數。該運算符會自動將左邊的對象，作為上下文環境（即this對象），綁定到右邊的函數上面。
~~~
let log = ::console.log;
// 等同于
var log = console.log.bind(console);
foo::bar;
// 等同于
bar.call(foo);
foo::bar(...arguments);
i// 等同于
bar.apply(foo, arguments);
~~~
## 尾調用優化
### 什么是尾調用？
尾調用（Tail Call）是函數式編程的一個重要概念，本身非常簡單，一句話就能說清楚，就是指某個函數的最后一步是調用另一個函數。
~~~
function f(x){
return g(x);
}
~~~
上面代碼中，函數f的最后一步是調用函數g，這就叫尾調用。
以下三種情況，都不屬于尾調用。
~~~
// 情況一
function f(x){
let y = g(x);
return y;
}
// 情況二
function f(x){
return g(x) + 1;
}
// 情況三
function f(x){
g(x);
}
~~~
上面代碼中，情況一是調用函數g之后，還有別的操作，所以不屬于尾調用，即使語義完全一樣。情況二也屬于調用后還有操作，即使寫在一行內。情況三等同于下面的代碼。
~~~
function f(x){
g(x);
return undefined;
}
~~~
尾調用不一定出現在函數尾部，只要是最后一步操作即可。
~~~
function f(x) {
if (x > 0) {
return m(x)
}
return n(x);
}
~~~
上面代碼中，函數m和n都屬于尾調用，因為它們都是函數f的最后一步操作。
### 尾調用優化
尾調用之所以與其他調用不同，就在于它的特殊的調用位置。
我們知道，函數調用會在內存形成一個“調用記錄”，又稱“調用幀”（call frame），保存調用位置和內部變量等信息。如果在函數A的內部調用函數B，那么在A的調用幀上方，還會形成一個B的調用幀。等到B運行結束，將結果返回到A，B的調用幀才會消失。如果函數B內部還調用函數C，那就還有一個C的調用幀，以此類推。所有的調用幀，就形成一個“調用棧”（call stack）。
尾調用由于是函數的最后一步操作，所以不需要保留外層函數的調用幀，因為調用位置、內部變量等信息都不會再用到了，只要直接用內層函數的調用幀，取代外層函數的調用幀就可以了。
~~~
function f() {
let m = 1;
let n = 2;
return g(m + n);
}
f();
// 等同于
function f() {
return g(3);
}
f();
// 等同于
g(3);
~~~
上面代碼中，如果函數g不是尾調用，函數f就需要保存內部變量m和n的值、g的調用位置等信息。但由于調用g之后，函數f就結束了，所以執行到最后一步，完全可以刪除 f(x) 的調用幀，只保留 g(3) 的調用幀。
這就叫做“尾調用優化”（Tail call optimization），即只保留內層函數的調用幀。如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。這就是“尾調用優化”的意義。
### 尾遞歸
函數調用自身，稱為遞歸。如果尾調用自身，就稱為尾遞歸。
遞歸非常耗費內存，因為需要同時保存成千上百個調用幀，很容易發生“棧溢出”錯誤（stack overflow）。但對于尾遞歸來說，由于只存在一個調用幀，所以永遠不會發生“棧溢出”錯誤。
~~~
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
factorial(5) // 120
~~~
上面代碼是一個階乘函數，計算n的階乘，最多需要保存n個調用記錄，復雜度 O(n) 。
如果改寫成尾遞歸，只保留一個調用記錄，復雜度 O(1) 。
~~~
function factorial(n, total) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5, 1) // 120
~~~
由此可見，“尾調用優化”對遞歸操作意義重大，所以一些函數式編程語言將其寫入了語言規格。ES6也是如此，第一次明確規定，所有 ECMAScript 的實現，都必須部署“尾調用優化”。這就是說，在 ES6 中，只要使用尾遞歸，就不會發生棧溢出，相對節省內存。
### 遞歸函數的改寫
尾遞歸的實現，往往需要改寫遞歸函數，確保最后一步只調用自身。做到這一點的方法，就是把所有用到的內部變量改寫成函數的參數。比如上面的例子，階乘函數 factorial 需要用到一個中間變量 total ，那就把這個中間變量改寫成函數的參數。這樣做的缺點就是不太直觀，第一眼很難看出來，為什么計算5的階乘，需要傳入兩個參數5和1？
兩個方法可以解決這個問題。方法一是在尾遞歸函數之外，再提供一個正常形式的函數。
~~~
function tailFactorial(n, total) {
if (n === 1) return total;
return tailFactorial(n - 1, n * total);
}
function factorial(n) {
return tailFactorial(n, 1);
}
factorial(5) // 120
~~~
上面代碼通過一個正常形式的階乘函數 factorial ，調用尾遞歸函數 tailFactorial ，看起來就正常多了。
函數式編程有一個概念，叫做柯里化（currying），意思是將多參數的函數轉換成單參數的形式。這里也可以使用柯里化。
~~~
function currying(fn, n) {
return function (m) {
return fn.call(this, m, n);
};
}
function tailFactorial(n, total) {
if (n === 1) return total;
return tailFactorial(n - 1, n * total);
}
const factorial = currying(tailFactorial, 1);
factorial(5) // 120
~~~
上面代碼通過柯里化，將尾遞歸函數 tailFactorial 變為只接受1個參數的 factorial 。
第二種方法就簡單多了，就是采用ES6的函數默認值。
~~~
function factorial(n, total = 1) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5) // 120
~~~
上面代碼中，參數 total 有默認值1，所以調用時不用提供這個值。
總結一下，遞歸本質上是一種循環操作。純粹的函數式編程語言沒有循環操作命令，所有的循環都用遞歸實現，這就是為什么尾遞歸對這些語言極其重要。對于其他支持“尾調用優化”的語言（比如Lua，ES6），只需要知道循環可以用遞歸代替，而一旦使用遞歸，就最好使用尾遞歸。
