ECMAScript 6 函數(shù)的擴(kuò)展

函數(shù)參數(shù)的默認(rèn)值

基本用法

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

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

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

上面代碼檢查函數(shù)log的參數(shù)y有沒(méi)有賦值，如果沒(méi)有，則指定默認(rèn)值為World。這種寫法的缺點(diǎn)在于，如果參數(shù)y賦值了，但是對(duì)應(yīng)的布爾值為false，則該賦值不起作用。就像上面代碼的最后一行，參數(shù)y等于空字符，結(jié)果被改為默認(rèn)值。

為了避免這個(gè)問(wèn)題，通常需要先判斷一下參數(shù)y是否被賦值，如果沒(méi)有，再等于默認(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
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

可以看到，ES6的寫法比ES5簡(jiǎn)潔許多，而且非常自然。下面是另一個(gè)例子。

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

var p = new Point();
p // { x: 0, y: 0 }

除了簡(jiǎn)潔，ES6的寫法還有兩個(gè)好處：首先，閱讀代碼的人，可以立刻意識(shí)到哪些參數(shù)是可以省略的，不用查看函數(shù)體或文檔；其次，有利于將來(lái)的代碼優(yōu)化，即使未來(lái)的版本在對(duì)外接口中，徹底拿掉這個(gè)參數(shù)，也不會(huì)導(dǎo)致以前的代碼無(wú)法運(yùn)行。

參數(shù)變量是默認(rèn)聲明的，所以不能用let或const再次聲明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

上面代碼中，參數(shù)變量x是默認(rèn)聲明的，在函數(shù)體中，不能用let或const再次聲明，否則會(huì)報(bào)錯(cuò)。

與解構(gòu)賦值默認(rèn)值結(jié)合使用

參數(shù)默認(rèn)值可以與解構(gòu)賦值的默認(rèn)值，結(jié)合起來(lái)使用。

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() // TypeError: Cannot read property 'x' of undefined

上面代碼使用了對(duì)象的解構(gòu)賦值默認(rèn)值，而沒(méi)有使用函數(shù)參數(shù)的默認(rèn)值。只有當(dāng)函數(shù)foo的參數(shù)是一個(gè)對(duì)象時(shí)，變量x和y才會(huì)通過(guò)解構(gòu)賦值而生成。如果函數(shù)foo調(diào)用時(shí)參數(shù)不是對(duì)象，變量x和y就不會(huì)生成，從而報(bào)錯(cuò)。如果參數(shù)對(duì)象沒(méi)有y屬性，y的默認(rèn)值5才會(huì)生效。

下面是另一個(gè)對(duì)象的解構(gòu)賦值默認(rèn)值的例子。

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 報(bào)錯(cuò)

上面代碼中，如果函數(shù)fetch的第二個(gè)參數(shù)是一個(gè)對(duì)象，就可以為它的三個(gè)屬性設(shè)置默認(rèn)值。

上面的寫法不能省略第二個(gè)參數(shù)，如果結(jié)合函數(shù)參數(shù)的默認(rèn)值，就可以省略第二個(gè)參數(shù)。這時(shí)，就出現(xiàn)了雙重默認(rèn)值。

function fetch(url, { method = 'GET' } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

上面代碼中，函數(shù)fetch沒(méi)有第二個(gè)參數(shù)時(shí)，函數(shù)參數(shù)的默認(rèn)值就會(huì)生效，然后才是解構(gòu)賦值的默認(rèn)值生效，變量method才會(huì)取到默認(rèn)值GET。

再請(qǐng)問(wèn)下面兩種寫法有什么差別？

// 寫法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 寫法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

上面兩種寫法都對(duì)函數(shù)的參數(shù)設(shè)定了默認(rèn)值，區(qū)別是寫法一函數(shù)參數(shù)的默認(rèn)值是空對(duì)象，但是設(shè)置了對(duì)象解構(gòu)賦值的默認(rèn)值；寫法二函數(shù)參數(shù)的默認(rèn)值是一個(gè)有具體屬性的對(duì)象，但是沒(méi)有設(shè)置對(duì)象解構(gòu)賦值的默認(rèn)值。

// 函數(shù)沒(méi)有參數(shù)的情況
m1() // [0, 0]
m2() // [0, 0]

// x和y都有值的情況
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x有值，y無(wú)值的情況
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x和y都無(wú)值的情況
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

參數(shù)默認(rèn)值的位置

通常情況下，定義了默認(rèn)值的參數(shù)，應(yīng)該是函數(shù)的尾參數(shù)。因?yàn)檫@樣比較容易看出來(lái)，到底省略了哪些參數(shù)。如果非尾部的參數(shù)設(shè)置默認(rèn)值，實(shí)際上這個(gè)參數(shù)是沒(méi)法省略的。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 報(bào)錯(cuò)
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 報(bào)錯(cuò)
f(1, undefined, 2) // [1, 5, 2]

上面代碼中，有默認(rèn)值的參數(shù)都不是尾參數(shù)。這時(shí)，無(wú)法只省略該參數(shù)，而不省略它后面的參數(shù)，除非顯式輸入undefined。

如果傳入undefined，將觸發(fā)該參數(shù)等于默認(rèn)值，null則沒(méi)有這個(gè)效果。

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

上面代碼中，x參數(shù)對(duì)應(yīng)undefined，結(jié)果觸發(fā)了默認(rèn)值，y參數(shù)等于null，就沒(méi)有觸發(fā)默認(rèn)值。

函數(shù)的length屬性

指定了默認(rèn)值以后，函數(shù)的length屬性，將返回沒(méi)有指定默認(rèn)值的參數(shù)個(gè)數(shù)。也就是說(shuō)，指定了默認(rèn)值后，length屬性將失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

上面代碼中，length屬性的返回值，等于函數(shù)的參數(shù)個(gè)數(shù)減去指定了默認(rèn)值的參數(shù)個(gè)數(shù)。比如，上面最后一個(gè)函數(shù)，定義了3個(gè)參數(shù)，其中有一個(gè)參數(shù)c指定了默認(rèn)值，因此length屬性等于3減去1，最后得到2。

這是因?yàn)?code>length屬性的含義是，該函數(shù)預(yù)期傳入的參數(shù)個(gè)數(shù)。某個(gè)參數(shù)指定默認(rèn)值以后，預(yù)期傳入的參數(shù)個(gè)數(shù)就不包括這個(gè)參數(shù)了。同理，rest參數(shù)也不會(huì)計(jì)入length屬性。

(function(...args) {}).length // 0

如果設(shè)置了默認(rèn)值的參數(shù)不是尾參數(shù)，那么length屬性也不再計(jì)入后面的參數(shù)了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

作用域

一個(gè)需要注意的地方是，如果參數(shù)默認(rèn)值是一個(gè)變量，則該變量所處的作用域，與其他變量的作用域規(guī)則是一樣的，即先是當(dāng)前函數(shù)的作用域，然后才是全局作用域。

var x = 1;

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

f(2) // 2

上面代碼中，參數(shù)y的默認(rèn)值等于x。調(diào)用時(shí)，由于函數(shù)作用域內(nèi)部的變量x已經(jīng)生成，所以y等于參數(shù)x，而不是全局變量x。

如果調(diào)用時(shí)，函數(shù)作用域內(nèi)部的變量x沒(méi)有生成，結(jié)果就會(huì)不一樣。

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代碼中，函數(shù)調(diào)用時(shí)，y的默認(rèn)值變量x尚未在函數(shù)內(nèi)部生成，所以x指向全局變量。

如果此時(shí)，全局變量x不存在，就會(huì)報(bào)錯(cuò)。

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // ReferenceError: x is not defined

下面這樣寫，也會(huì)報(bào)錯(cuò)。

var x = 1;

function foo(x = x) {
  // ...
}

foo() // ReferenceError: x is not defined

上面代碼中，函數(shù)foo的參數(shù)x的默認(rèn)值也是x。這時(shí)，默認(rèn)值x的作用域是函數(shù)作用域，而不是全局作用域。由于在函數(shù)作用域中，存在變量x，但是默認(rèn)值在x賦值之前先執(zhí)行了，所以這時(shí)屬于暫時(shí)性死區(qū)（參見《let和const命令》一章），任何對(duì)x的操作都會(huì)報(bào)錯(cuò)。

如果參數(shù)的默認(rèn)值是一個(gè)函數(shù)，該函數(shù)的作用域是其聲明時(shí)所在的作用域。請(qǐng)看下面的例子。

let foo = 'outer';

function bar(func = x => foo) {
  let foo = 'inner';
  console.log(func()); // outer
}

bar();

上面代碼中，函數(shù)bar的參數(shù)func的默認(rèn)值是一個(gè)匿名函數(shù)，返回值為變量foo。這個(gè)匿名函數(shù)聲明時(shí)，bar函數(shù)的作用域還沒(méi)有形成，所以匿名函數(shù)里面的foo指向外層作用域的foo，輸出outer。

如果寫成下面這樣，就會(huì)報(bào)錯(cuò)。

function bar(func = () => foo) {
  let foo = 'inner';
  console.log(func());
}

bar() // ReferenceError: foo is not defined

上面代碼中，匿名函數(shù)里面的foo指向函數(shù)外層，但是函數(shù)外層并沒(méi)有聲明foo，所以就報(bào)錯(cuò)了。

下面是一個(gè)更復(fù)雜的例子。

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3

上面代碼中，函數(shù)foo的參數(shù)y的默認(rèn)值是一個(gè)匿名函數(shù)。函數(shù)foo調(diào)用時(shí)，它的參數(shù)x的值為undefined，所以y函數(shù)內(nèi)部的x一開始是undefined，后來(lái)被重新賦值2。但是，函數(shù)foo內(nèi)部重新聲明了一個(gè)x，值為3，這兩個(gè)x是不一樣的，互相不產(chǎn)生影響，因此最后輸出3。

如果將var x = 3的var去除，兩個(gè)x就是一樣的，最后輸出的就是2。

var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y();
  console.log(x);
}

foo() // 2

應(yīng)用

利用參數(shù)默認(rèn)值，可以指定某一個(gè)參數(shù)不得省略，如果省略就拋出一個(gè)錯(cuò)誤。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

上面代碼的foo函數(shù)，如果調(diào)用的時(shí)候沒(méi)有參數(shù)，就會(huì)調(diào)用默認(rèn)值throwIfMissing函數(shù)，從而拋出一個(gè)錯(cuò)誤。

從上面代碼還可以看到，參數(shù)mustBeProvided的默認(rèn)值等于throwIfMissing函數(shù)的運(yùn)行結(jié)果（即函數(shù)名之后有一對(duì)圓括號(hào)），這表明參數(shù)的默認(rèn)值不是在定義時(shí)執(zhí)行，而是在運(yùn)行時(shí)執(zhí)行（即如果參數(shù)已經(jīng)賦值，默認(rèn)值中的函數(shù)就不會(huì)運(yùn)行），這與python語(yǔ)言不一樣。

另外，可以將參數(shù)默認(rèn)值設(shè)為undefined，表明這個(gè)參數(shù)是可以省略的。

function foo(optional = undefined) { ··· }

rest參數(shù)

ES6引入rest參數(shù)（形式為“...變量名”），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了。rest參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代碼的add函數(shù)是一個(gè)求和函數(shù)，利用rest參數(shù)，可以向該函數(shù)傳入任意數(shù)目的參數(shù)。

下面是一個(gè)rest參數(shù)代替arguments變量的例子。

// arguments變量的寫法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest參數(shù)的寫法
const sortNumbers = (...numbers) => numbers.sort();

上面代碼的兩種寫法，比較后可以發(fā)現(xiàn)，rest參數(shù)的寫法更自然也更簡(jiǎn)潔。

rest參數(shù)中的變量代表一個(gè)數(shù)組，所以數(shù)組特有的方法都可以用于這個(gè)變量。下面是一個(gè)利用rest參數(shù)改寫數(shù)組push方法的例子。

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)

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

// 報(bào)錯(cuò)
function f(a, ...b, c) {
  // ...
}

函數(shù)的length屬性，不包括rest參數(shù)。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

擴(kuò)展運(yùn)算符

含義

擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）。它好比rest參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

該運(yùn)算符主要用于函數(shù)調(diào)用。

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)這兩行，都是函數(shù)的調(diào)用，它們的都使用了擴(kuò)展運(yùn)算符。該運(yùn)算符將一個(gè)數(shù)組，變?yōu)閰?shù)序列。

擴(kuò)展運(yùn)算符與正常的函數(shù)參數(shù)可以結(jié)合使用，非常靈活。

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

替代數(shù)組的apply方法

由于擴(kuò)展運(yùn)算符可以展開數(shù)組，所以不再需要apply方法，將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。

// 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);

下面是擴(kuò)展運(yùn)算符取代apply方法的一個(gè)實(shí)際的例子，應(yīng)用Math.max方法，簡(jiǎn)化求出一個(gè)數(shù)組最大元素的寫法。

// ES5的寫法
Math.max.apply(null, [14, 3, 77])

// ES6的寫法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

上面代碼表示，由于JavaScript不提供求數(shù)組最大元素的函數(shù)，所以只能套用Math.max函數(shù)，將數(shù)組轉(zhuǎn)為一個(gè)參數(shù)序列，然后求最大值。有了擴(kuò)展運(yùn)算符以后，就可以直接用Math.max了。

另一個(gè)例子是通過(guò)push函數(shù)，將一個(gè)數(shù)組添加到另一個(gè)數(shù)組的尾部。

// 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方法的參數(shù)不能是數(shù)組，所以只好通過(guò)apply方法變通使用push方法。有了擴(kuò)展運(yùn)算符，就可以直接將數(shù)組傳入push方法。

下面是另外一個(gè)例子。

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);

擴(kuò)展運(yùn)算符的應(yīng)用

（1）合并數(shù)組

擴(kuò)展運(yùn)算符提供了數(shù)組合并的新寫法。

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

（2）與解構(gòu)賦值結(jié)合

擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來(lái)，用于生成數(shù)組。

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

下面是另外一些例子。

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   // []

如果將擴(kuò)展運(yùn)算符用于數(shù)組賦值，只能放在參數(shù)的最后一位，否則會(huì)報(bào)錯(cuò)。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報(bào)錯(cuò)

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報(bào)錯(cuò)

（3）函數(shù)的返回值

JavaScript的函數(shù)只能返回一個(gè)值，如果需要返回多個(gè)值，只能返回?cái)?shù)組或?qū)ο?。擴(kuò)展運(yùn)算符提供了解決這個(gè)問(wèn)題的一種變通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

上面代碼從數(shù)據(jù)庫(kù)取出一行數(shù)據(jù)，通過(guò)擴(kuò)展運(yùn)算符，直接將其傳入構(gòu)造函數(shù)Date。

（4）字符串

擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

上面的寫法，有一個(gè)重要的好處，那就是能夠正確識(shí)別32位的Unicode字符。

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

上面代碼的第一種寫法，JavaScript會(huì)將32位Unicode字符，識(shí)別為2個(gè)字符，采用擴(kuò)展運(yùn)算符就沒(méi)有這個(gè)問(wèn)題。因此，正確返回字符串長(zhǎng)度的函數(shù)，可以像下面這樣寫。

function length(str) {
  return [...str].length;
}

length('x\uD83D\uDE80y') // 3

凡是涉及到操作32位Unicode字符的函數(shù)，都有這個(gè)問(wèn)題。因此，最好都用擴(kuò)展運(yùn)算符改寫。

let str = 'x\uD83D\uDE80y';

str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'

[...str].reverse().join('')
// 'y\uD83D\uDE80x'

上面代碼中，如果不用擴(kuò)展運(yùn)算符，字符串的reverse操作就不正確。

（5）實(shí)現(xiàn)了Iterator接口的對(duì)象

任何Iterator接口的對(duì)象，都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

上面代碼中，querySelectorAll方法返回的是一個(gè)nodeList對(duì)象。它不是數(shù)組，而是一個(gè)類似數(shù)組的對(duì)象。這時(shí)，擴(kuò)展運(yùn)算符可以將其轉(zhuǎn)為真正的數(shù)組，原因就在于NodeList對(duì)象實(shí)現(xiàn)了Iterator接口。

對(duì)于那些沒(méi)有部署Iterator接口的類似數(shù)組的對(duì)象，擴(kuò)展運(yùn)算符就無(wú)法將其轉(zhuǎn)為真正的數(shù)組。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面代碼中，arrayLike是一個(gè)類似數(shù)組的對(duì)象，但是沒(méi)有部署Iterator接口，擴(kuò)展運(yùn)算符就會(huì)報(bào)錯(cuò)。這時(shí)，可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組。

（6）Map和Set結(jié)構(gòu)，Generator函數(shù)

擴(kuò)展運(yùn)算符內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的Iterator接口，因此只要具有Iterator接口的對(duì)象，都可以使用擴(kuò)展運(yùn)算符，比如Map結(jié)構(gòu)。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

Generator函數(shù)運(yùn)行后，返回一個(gè)遍歷器對(duì)象，因此也可以使用擴(kuò)展運(yùn)算符。

var go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

上面代碼中，變量go是一個(gè)Generator函數(shù)，執(zhí)行后返回的是一個(gè)遍歷器對(duì)象，對(duì)這個(gè)遍歷器對(duì)象執(zhí)行擴(kuò)展運(yùn)算符，就會(huì)將內(nèi)部遍歷得到的值，轉(zhuǎn)為一個(gè)數(shù)組。

如果對(duì)沒(méi)有iterator接口的對(duì)象，使用擴(kuò)展運(yùn)算符，將會(huì)報(bào)錯(cuò)。

var obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

name屬性

函數(shù)的name屬性，返回該函數(shù)的函數(shù)名。

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

這個(gè)屬性早就被瀏覽器廣泛支持，但是直到ES6，才將其寫入了標(biāo)準(zhǔn)。

需要注意的是，ES6對(duì)這個(gè)屬性的行為做出了一些修改。如果將一個(gè)匿名函數(shù)賦值給一個(gè)變量，ES5的name屬性，會(huì)返回空字符串，而ES6的name屬性會(huì)返回實(shí)際的函數(shù)名。

var func1 = function () {};

// ES5
func1.name // ""

// ES6
func1.name // "func1"

上面代碼中，變量func1等于一個(gè)匿名函數(shù)，ES5和ES6的name屬性返回的值不一樣。

如果將一個(gè)具名函數(shù)賦值給一個(gè)變量，則ES5和ES6的name屬性都返回這個(gè)具名函數(shù)原本的名字。

const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

Function構(gòu)造函數(shù)返回的函數(shù)實(shí)例，name屬性的值為“anonymous”。

(new Function).name // "anonymous"

bind返回的函數(shù)，name屬性值會(huì)加上“bound ”前綴。

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

箭頭函數(shù)

基本用法

ES6允許使用“箭頭”（=>）定義函數(shù)。

var f = v => v;

上面的箭頭函數(shù)等同于：

var f = function(v) {
  return v;
};

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

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

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

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

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

由于大括號(hào)被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào)。

var getTempItem = id => ({ id: id, name: "Temp" });

箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

箭頭函數(shù)使得表達(dá)更加簡(jiǎn)潔。

const isEven = n => n % 2 == 0;
const square = n => n * n;

上面代碼只用了兩行，就定義了兩個(gè)簡(jiǎn)單的工具函數(shù)。如果不用箭頭函數(shù)，可能就要占用多行，而且還不如現(xiàn)在這樣寫醒目。

箭頭函數(shù)的一個(gè)用處是簡(jiǎn)化回調(diào)函數(shù)。

// 正常函數(shù)寫法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭頭函數(shù)寫法
[1,2,3].map(x => x * x);

另一個(gè)例子是

// 正常函數(shù)寫法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭頭函數(shù)寫法
var result = values.sort((a, b) => a - b);

下面是rest參數(shù)與箭頭函數(shù)結(jié)合的例子。

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]]

使用注意點(diǎn)

箭頭函數(shù)有幾個(gè)使用注意點(diǎn)。

（1）函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

（2）不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。

（3）不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用Rest參數(shù)代替。

（4）不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。

上面四點(diǎn)中，第一點(diǎn)尤其值得注意。this對(duì)象的指向是可變的，但是在箭頭函數(shù)中，它是固定的。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代碼中，setTimeout的參數(shù)是一個(gè)箭頭函數(shù)，這個(gè)箭頭函數(shù)的定義生效是在foo函數(shù)生成時(shí)，而它的真正執(zhí)行要等到100毫秒后。如果是普通函數(shù)，執(zhí)行時(shí)this應(yīng)該指向全局對(duì)象window，這時(shí)應(yīng)該輸出21。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時(shí)所在的對(duì)象（本例是{id: 42}），所以輸出的是42。

箭頭函數(shù)可以讓setTimeout里面的this，綁定定義時(shí)所在的作用域，而不是指向運(yùn)行時(shí)所在的作用域。下面是另一個(gè)例子。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭頭函數(shù)
  setInterval(() => this.s1++, 1000);
  // 普通函數(shù)
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上面代碼中，Timer函數(shù)內(nèi)部設(shè)置了兩個(gè)定時(shí)器，分別使用了箭頭函數(shù)和普通函數(shù)。前者的this綁定定義時(shí)所在的作用域（即Timer函數(shù)），后者的this指向運(yùn)行時(shí)所在的作用域（即全局對(duì)象）。所以，3100毫秒之后，timer.s1被更新了3次，而timer.s2一次都沒(méi)更新。

箭頭函數(shù)可以讓this指向固定化，這種特性很有利于封裝回調(diào)函數(shù)。下面是一個(gè)例子，DOM事件的回調(diào)函數(shù)封裝在一個(gè)對(duì)象里面。

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方法中，使用了箭頭函數(shù)，這導(dǎo)致這個(gè)箭頭函數(shù)里面的this，總是指向handler對(duì)象。否則，回調(diào)函數(shù)運(yùn)行時(shí)，this.doSomething這一行會(huì)報(bào)錯(cuò)，因?yàn)榇藭r(shí)this指向document對(duì)象。

this指向的固定化，并不是因?yàn)榧^函數(shù)內(nèi)部有綁定this的機(jī)制，實(shí)際原因是箭頭函數(shù)根本沒(méi)有自己的this，導(dǎo)致內(nèi)部的this就是外層代碼塊的this。正是因?yàn)樗鼪](méi)有this，所以也就不能用作構(gòu)造函數(shù)。

所以，箭頭函數(shù)轉(zhuǎn)成ES5的代碼如下。

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

上面代碼中，轉(zhuǎn)換后的ES5版本清楚地說(shuō)明了，箭頭函數(shù)里面根本沒(méi)有自己的this，而是引用外層的this。

請(qǐng)問(wèn)下面的代碼之中有幾個(gè)this？

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代碼之中，只有一個(gè)this，就是函數(shù)foo的this，所以t1、t2、t3都輸出同樣的結(jié)果。因?yàn)樗械膬?nèi)層函數(shù)都是箭頭函數(shù)，都沒(méi)有自己的this，它們的this其實(shí)都是最外層foo函數(shù)的this。

除了this，以下三個(gè)變量在箭頭函數(shù)之中也是不存在的，指向外層函數(shù)的對(duì)應(yīng)變量：arguments、super、new.target。

function foo() {
  setTimeout(() => {
    console.log('args:', arguments);
  }, 100);
}

foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]

上面代碼中，箭頭函數(shù)內(nèi)部的變量arguments，其實(shí)是函數(shù)foo的arguments變量。

另外，由于箭頭函數(shù)沒(méi)有自己的this，所以當(dāng)然也就不能用call()、apply()、bind()這些方法去改變this的指向。

(function() {
  return [
    (() => this.x).bind({ x: 'inner' })()
  ];
}).call({ x: 'outer' });
// ['outer']

上面代碼中，箭頭函數(shù)沒(méi)有自己的this，所以bind方法無(wú)效，內(nèi)部的this指向外部的this。

長(zhǎng)期以來(lái)，JavaScript語(yǔ)言的this對(duì)象一直是一個(gè)令人頭痛的問(wèn)題，在對(duì)象方法中使用this，必須非常小心。箭頭函數(shù)”綁定”this，很大程度上解決了這個(gè)困擾。

嵌套的箭頭函數(shù)

箭頭函數(shù)內(nèi)部，還可以再使用箭頭函數(shù)。下面是一個(gè)ES5語(yǔ)法的多重嵌套函數(shù)。

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]

上面這個(gè)函數(shù)，可以使用箭頭函數(shù)改寫。

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]

下面是一個(gè)部署管道機(jī)制（pipeline）的例子，即前一個(gè)函數(shù)的輸出是后一個(gè)函數(shù)的輸入。

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

箭頭函數(shù)還有一個(gè)功能，就是可以很方便地改寫λ演算。

// λ演算的寫法
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)));

上面兩種寫法，幾乎是一一對(duì)應(yīng)的。由于λ演算對(duì)于計(jì)算機(jī)科學(xué)非常重要，這使得我們可以用ES6作為替代工具，探索計(jì)算機(jī)科學(xué)。

函數(shù)綁定

箭頭函數(shù)可以綁定this對(duì)象，大大減少了顯式綁定this對(duì)象的寫法（call、apply、bind）。但是，箭頭函數(shù)并不適用于所有場(chǎng)合，所以ES7提出了“函數(shù)綁定”（function bind）運(yùn)算符，用來(lái)取代call、apply、bind調(diào)用。雖然該語(yǔ)法還是ES7的一個(gè)提案，但是Babel轉(zhuǎn)碼器已經(jīng)支持。

函數(shù)綁定運(yùn)算符是并排的兩個(gè)雙冒號(hào)（::），雙冒號(hào)左邊是一個(gè)對(duì)象，右邊是一個(gè)函數(shù)。該運(yùn)算符會(huì)自動(dòng)將左邊的對(duì)象，作為上下文環(huán)境（即this對(duì)象），綁定到右邊的函數(shù)上面。

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
  return obj::hasOwnProperty(key);
}

如果雙冒號(hào)左邊為空，右邊是一個(gè)對(duì)象的方法，則等于將該方法綁定在該對(duì)象上面。

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;

let log = ::console.log;
// 等同于
var log = console.log.bind(console);

由于雙冒號(hào)運(yùn)算符返回的還是原對(duì)象，因此可以采用鏈?zhǔn)綄懛ā?/p>

// 例一
import { map, takeWhile, forEach } from "iterlib";

getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));

// 例二
let { find, html } = jake;

document.querySelectorAll("div.myClass")
::find("p")
::html("hahaha");

尾調(diào)用優(yōu)化

什么是尾調(diào)用？

尾調(diào)用（Tail Call）是函數(shù)式編程的一個(gè)重要概念，本身非常簡(jiǎn)單，一句話就能說(shuō)清楚，就是指某個(gè)函數(shù)的最后一步是調(diào)用另一個(gè)函數(shù)。

function f(x){
  return g(x);
}

上面代碼中，函數(shù)f的最后一步是調(diào)用函數(shù)g，這就叫尾調(diào)用。

以下三種情況，都不屬于尾調(diào)用。

// 情況一
function f(x){
  let y = g(x);
  return y;
}

// 情況二
function f(x){
  return g(x) + 1;
}

// 情況三
function f(x){
  g(x);
}

上面代碼中，情況一是調(diào)用函數(shù)g之后，還有賦值操作，所以不屬于尾調(diào)用，即使語(yǔ)義完全一樣。情況二也屬于調(diào)用后還有操作，即使寫在一行內(nèi)。情況三等同于下面的代碼。

function f(x){
  g(x);
  return undefined;
}

尾調(diào)用不一定出現(xiàn)在函數(shù)尾部，只要是最后一步操作即可。

function f(x) {
  if (x > 0) {
    return m(x)
  }
  return n(x);
}

上面代碼中，函數(shù)m和n都屬于尾調(diào)用，因?yàn)樗鼈兌际呛瘮?shù)f的最后一步操作。

尾調(diào)用優(yōu)化

尾調(diào)用之所以與其他調(diào)用不同，就在于它的特殊的調(diào)用位置。

我們知道，函數(shù)調(diào)用會(huì)在內(nèi)存形成一個(gè)“調(diào)用記錄”，又稱“調(diào)用幀”（call frame），保存調(diào)用位置和內(nèi)部變量等信息。如果在函數(shù)A的內(nèi)部調(diào)用函數(shù)B，那么在A的調(diào)用幀上方，還會(huì)形成一個(gè)B的調(diào)用幀。等到B運(yùn)行結(jié)束，將結(jié)果返回到A，B的調(diào)用幀才會(huì)消失。如果函數(shù)B內(nèi)部還調(diào)用函數(shù)C，那就還有一個(gè)C的調(diào)用幀，以此類推。所有的調(diào)用幀，就形成一個(gè)“調(diào)用?！保╟all stack）。

尾調(diào)用由于是函數(shù)的最后一步操作，所以不需要保留外層函數(shù)的調(diào)用幀，因?yàn)檎{(diào)用位置、內(nèi)部變量等信息都不會(huì)再用到了，只要直接用內(nèi)層函數(shù)的調(diào)用幀，取代外層函數(shù)的調(diào)用幀就可以了。

function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

// 等同于
function f() {
  return g(3);
}
f();

// 等同于
g(3);

上面代碼中，如果函數(shù)g不是尾調(diào)用，函數(shù)f就需要保存內(nèi)部變量m和n的值、g的調(diào)用位置等信息。但由于調(diào)用g之后，函數(shù)f就結(jié)束了，所以執(zhí)行到最后一步，完全可以刪除 f(x) 的調(diào)用幀，只保留 g(3) 的調(diào)用幀。

這就叫做“尾調(diào)用優(yōu)化”（Tail call optimization），即只保留內(nèi)層函數(shù)的調(diào)用幀。如果所有函數(shù)都是尾調(diào)用，那么完全可以做到每次執(zhí)行時(shí)，調(diào)用幀只有一項(xiàng)，這將大大節(jié)省內(nèi)存。這就是“尾調(diào)用優(yōu)化”的意義。

注意，只有不再用到外層函數(shù)的內(nèi)部變量，內(nèi)層函數(shù)的調(diào)用幀才會(huì)取代外層函數(shù)的調(diào)用幀，否則就無(wú)法進(jìn)行“尾調(diào)用優(yōu)化”。

function addOne(a){
  var one = 1;
  function inner(b){
    return b + one;
  }
  return inner(a);
}

上面的函數(shù)不會(huì)進(jìn)行尾調(diào)用優(yōu)化，因?yàn)閮?nèi)層函數(shù)inner用到了外層函數(shù)addOne的內(nèi)部變量one。

尾遞歸

函數(shù)調(diào)用自身，稱為遞歸。如果尾調(diào)用自身，就稱為尾遞歸。

遞歸非常耗費(fèi)內(nèi)存，因?yàn)樾枰瑫r(shí)保存成千上百個(gè)調(diào)用幀，很容易發(fā)生“棧溢出”錯(cuò)誤（stack overflow）。但對(duì)于尾遞歸來(lái)說(shuō)，由于只存在一個(gè)調(diào)用幀，所以永遠(yuǎn)不會(huì)發(fā)生“棧溢出”錯(cuò)誤。

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

上面代碼是一個(gè)階乘函數(shù)，計(jì)算n的階乘，最多需要保存n個(gè)調(diào)用記錄，復(fù)雜度 O(n) 。

如果改寫成尾遞歸，只保留一個(gè)調(diào)用記錄，復(fù)雜度 O(1) 。

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

還有一個(gè)比較著名的例子，就是計(jì)算fibonacci 數(shù)列，也能充分說(shuō)明尾遞歸優(yōu)化的重要性

如果是非尾遞歸的fibonacci 遞歸方法

function Fibonacci (n) {
  if ( n <= 1 ) {return 1};

  return Fibonacci(n - 1) + Fibonacci(n - 2);
}

Fibonacci(10); // 89
// Fibonacci(100)
// Fibonacci(500)
// 堆棧溢出了

如果我們使用尾遞歸優(yōu)化過(guò)的fibonacci 遞歸算法

function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};

  return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}

Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity

由此可見，“尾調(diào)用優(yōu)化”對(duì)遞歸操作意義重大，所以一些函數(shù)式編程語(yǔ)言將其寫入了語(yǔ)言規(guī)格。ES6也是如此，第一次明確規(guī)定，所有ECMAScript的實(shí)現(xiàn)，都必須部署“尾調(diào)用優(yōu)化”。這就是說(shuō)，在ES6中，只要使用尾遞歸，就不會(huì)發(fā)生棧溢出，相對(duì)節(jié)省內(nèi)存。

遞歸函數(shù)的改寫

尾遞歸的實(shí)現(xiàn)，往往需要改寫遞歸函數(shù)，確保最后一步只調(diào)用自身。做到這一點(diǎn)的方法，就是把所有用到的內(nèi)部變量改寫成函數(shù)的參數(shù)。比如上面的例子，階乘函數(shù) factorial 需要用到一個(gè)中間變量 total ，那就把這個(gè)中間變量改寫成函數(shù)的參數(shù)。這樣做的缺點(diǎn)就是不太直觀，第一眼很難看出來(lái)，為什么計(jì)算5的階乘，需要傳入兩個(gè)參數(shù)5和1？

兩個(gè)方法可以解決這個(gè)問(wèn)題。方法一是在尾遞歸函數(shù)之外，再提供一個(gè)正常形式的函數(shù)。

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

上面代碼通過(guò)一個(gè)正常形式的階乘函數(shù) factorial ，調(diào)用尾遞歸函數(shù) tailFactorial ，看起來(lái)就正常多了。

函數(shù)式編程有一個(gè)概念，叫做柯里化（currying），意思是將多參數(shù)的函數(shù)轉(zhuǎn)換成單參數(shù)的形式。這里也可以使用柯里化。

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

上面代碼通過(guò)柯里化，將尾遞歸函數(shù) tailFactorial 變?yōu)橹唤邮?個(gè)參數(shù)的 factorial 。

第二種方法就簡(jiǎn)單多了，就是采用ES6的函數(shù)默認(rèn)值。

function factorial(n, total = 1) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5) // 120

上面代碼中，參數(shù) total 有默認(rèn)值1，所以調(diào)用時(shí)不用提供這個(gè)值。

總結(jié)一下，遞歸本質(zhì)上是一種循環(huán)操作。純粹的函數(shù)式編程語(yǔ)言沒(méi)有循環(huán)操作命令，所有的循環(huán)都用遞歸實(shí)現(xiàn)，這就是為什么尾遞歸對(duì)這些語(yǔ)言極其重要。對(duì)于其他支持“尾調(diào)用優(yōu)化”的語(yǔ)言（比如Lua，ES6），只需要知道循環(huán)可以用遞歸代替，而一旦使用遞歸，就最好使用尾遞歸。

嚴(yán)格模式

ES6的尾調(diào)用優(yōu)化只在嚴(yán)格模式下開啟，正常模式是無(wú)效的。

這是因?yàn)樵谡ＤＪ较拢瘮?shù)內(nèi)部有兩個(gè)變量，可以跟蹤函數(shù)的調(diào)用棧。

• func.arguments：返回調(diào)用時(shí)函數(shù)的參數(shù)。
• func.caller：返回調(diào)用當(dāng)前函數(shù)的那個(gè)函數(shù)。

尾調(diào)用優(yōu)化發(fā)生時(shí)，函數(shù)的調(diào)用棧會(huì)改寫，因此上面兩個(gè)變量就會(huì)失真。嚴(yán)格模式禁用這兩個(gè)變量，所以尾調(diào)用模式僅在嚴(yán)格模式下生效。

function restricted() {
  "use strict";
  restricted.caller;    // 報(bào)錯(cuò)
  restricted.arguments; // 報(bào)錯(cuò)
}
restricted();

尾遞歸優(yōu)化的實(shí)現(xiàn)

尾遞歸優(yōu)化只在嚴(yán)格模式下生效，那么正常模式下，或者那些不支持該功能的環(huán)境中，有沒(méi)有辦法也使用尾遞歸優(yōu)化呢？回答是可以的，就是自己實(shí)現(xiàn)尾遞歸優(yōu)化。

它的原理非常簡(jiǎn)單。尾遞歸之所以需要優(yōu)化，原因是調(diào)用棧太多，造成溢出，那么只要減少調(diào)用棧，就不會(huì)溢出。怎么做可以減少調(diào)用棧呢？就是采用“循環(huán)”換掉“遞歸”。

下面是一個(gè)正常的遞歸函數(shù)。

function sum(x, y) {
  if (y > 0) {
    return sum(x + 1, y - 1);
  } else {
    return x;
  }
}

sum(1, 100000)
// Uncaught RangeError: Maximum call stack size exceeded(…)

上面代碼中，sum是一個(gè)遞歸函數(shù)，參數(shù)x是需要累加的值，參數(shù)y控制遞歸次數(shù)。一旦指定sum遞歸100000次，就會(huì)報(bào)錯(cuò)，提示超出調(diào)用棧的最大次數(shù)。

蹦床函數(shù)（trampoline）可以將遞歸執(zhí)行轉(zhuǎn)為循環(huán)執(zhí)行。

function trampoline(f) {
  while (f && f instanceof Function) {
    f = f();
  }
  return f;
}

上面就是蹦床函數(shù)的一個(gè)實(shí)現(xiàn)，它接受一個(gè)函數(shù)f作為參數(shù)。只要f執(zhí)行后返回一個(gè)函數(shù)，就繼續(xù)執(zhí)行。注意，這里是返回一個(gè)函數(shù)，然后執(zhí)行該函數(shù)，而不是函數(shù)里面調(diào)用函數(shù)，這樣就避免了遞歸執(zhí)行，從而就消除了調(diào)用棧過(guò)大的問(wèn)題。

然后，要做的就是將原來(lái)的遞歸函數(shù)，改寫為每一步返回另一個(gè)函數(shù)。

function sum(x, y) {
  if (y > 0) {
    return sum.bind(null, x + 1, y - 1);
  } else {
    return x;
  }
}

上面代碼中，sum函數(shù)的每次執(zhí)行，都會(huì)返回自身的另一個(gè)版本。

現(xiàn)在，使用蹦床函數(shù)執(zhí)行sum，就不會(huì)發(fā)生調(diào)用棧溢出。

trampoline(sum(1, 100000))
// 100001

蹦床函數(shù)并不是真正的尾遞歸優(yōu)化，下面的實(shí)現(xiàn)才是。

function tco(f) {
  var value;
  var active = false;
  var accumulated = [];

  return function accumulator() {
    accumulated.push(arguments);
    if (!active) {
      active = true;
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift());
      }
      active = false;
      return value;
    }
  };
}

var sum = tco(function(x, y) {
  if (y > 0) {
    return sum(x + 1, y - 1)
  }
  else {
    return x
  }
});

sum(1, 100000)
// 100001

上面代碼中，tco函數(shù)是尾遞歸優(yōu)化的實(shí)現(xiàn)，它的奧妙就在于狀態(tài)變量active。默認(rèn)情況下，這個(gè)變量是不激活的。一旦進(jìn)入尾遞歸優(yōu)化的過(guò)程，這個(gè)變量就激活了。然后，每一輪遞歸sum返回的都是undefined，所以就避免了遞歸執(zhí)行；而accumulated數(shù)組存放每一輪sum執(zhí)行的參數(shù)，總是有值的，這就保證了accumulator函數(shù)內(nèi)部的while循環(huán)總是會(huì)執(zhí)行。這樣就很巧妙地將“遞歸”改成了“循環(huán)”，而后一輪的參數(shù)會(huì)取代前一輪的參數(shù)，保證了調(diào)用棧只有一層。

函數(shù)參數(shù)的尾逗號(hào)

ES7有一個(gè)提案，允許函數(shù)的最后一個(gè)參數(shù)有尾逗號(hào)（trailing comma）。

目前，函數(shù)定義和調(diào)用時(shí)，都不允許有參數(shù)的尾逗號(hào)。

function clownsEverywhere(
  param1,
  param2
) { /* ... */ }

clownsEverywhere(
  'foo',
  'bar'
);

如果以后要在函數(shù)的定義之中添加參數(shù)，就勢(shì)必還要添加一個(gè)逗號(hào)。這對(duì)版本管理系統(tǒng)來(lái)說(shuō)，就會(huì)顯示，添加逗號(hào)的那一行也發(fā)生了變動(dòng)。這看上去有點(diǎn)冗余，因此新提案允許定義和調(diào)用時(shí)，尾部直接有一個(gè)逗號(hào)。

function clownsEverywhere(
  param1,
  param2,
) { /* ... */ }

clownsEverywhere(
  'foo',
  'bar',
);