鍍金池/ 教程/ HTML/ 函數(shù)的擴展
數(shù)組的擴展
Class和Module
Set 和 Map 數(shù)據(jù)結構
異步操作
對象的擴展
Generator 函數(shù)
數(shù)值的擴展
變量的解構賦值
Iterator 和 for...of 循環(huán)
Promise 對象
參考鏈接
ECMAScript 6簡介
作者簡介
字符串的擴展
編程風格
let 和 const 命令
函數(shù)的擴展

函數(shù)的擴展

函數(shù)參數(shù)的默認值

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

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有沒有賦值,如果沒有,則指定默認值為 World。這種寫法的缺點在于,如果參數(shù)y賦值了,但是對應的布爾值為 false,則該賦值不起作用。就像上面代碼的最后一行,參數(shù) y 等于空字符,結果被改為默認值。

為了避免這個問題,通常需要先判斷一下參數(shù) y 是否被賦值,如果沒有,再等于默認值。這有兩種寫法。

// 寫法一
if (typeof y === 'undefined') {
  y = 'World';
}

// 寫法二
if (arguments.length === 1) {
  y = 'World';
}

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


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 的寫法還有兩個好處:首先,閱讀代碼的人,可以立刻意識到哪些參數(shù)是可以省略的,不用查看函數(shù)體或文檔;其次,有利于將來的代碼優(yōu)化,即使未來的版本徹底拿到這個參數(shù),也不會導致以前的代碼無法運行。

默認值的寫法非常靈活,下面是一個為對象屬性設置默認值的例子。


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

上面代碼中,傳入函數(shù) fetch 的第二個參數(shù)是一個對象,調(diào)用的時候可以為它的三個屬性設置默認值。

甚至還可以設置雙重默認值。


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

上面代碼中,調(diào)用函數(shù) fetch 時,如果不含第二個參數(shù),則默認值為一個空對象;如果包含第二個參數(shù),則它的 method 屬性默認值為 GET。

定義了默認值的參數(shù),必須是函數(shù)的尾部參數(shù),其后不能再有其他無默認值的參數(shù)。這是因為有了默認值以后,該參數(shù)可以省略,只有位于尾部,才可能判斷出到底省略了哪些參數(shù)。


// 以下兩種寫法都是錯的

function f(x = 5, y) {
}

function f(x, y = 5, z) {
}

如果傳入 undefined,將觸發(fā)該參數(shù)等于默認值,null 則沒有這個效果。


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

foo(undefined, null)
// 5 null

上面代碼中,x 參數(shù)對應 undefined,結果觸發(fā)了默認值,y 參數(shù)等于 null,就沒有觸發(fā)默認值。

指定了默認值以后,函數(shù)的 length 屬性,將返回沒有指定默認值的參數(shù)個數(shù)。也就是說,指定了默認值后,length 屬性將失真。


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

上面代碼中,length 屬性的返回值,等于函數(shù)的參數(shù)個數(shù)減去指定了默認值的參數(shù)個數(shù)。

利用參數(shù)默認值,可以指定某一個參數(shù)不得省略,如果省略就拋出一個錯誤。


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

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

foo()
// Error: Missing parameter

上面代碼的 foo 函數(shù),如果調(diào)用的時候沒有參數(shù),就會調(diào)用默認值 throwIfMissing 函數(shù),從而拋出一個錯誤。

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

另一個需要注意的地方是,參數(shù)默認值所處的作用域,不是全局作用域,而是函數(shù)作用域。


var x = 1;

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

foo(2) // 2

上面代碼中,參數(shù) y 的默認值等于 x,由于處在函數(shù)作用域,所以 x 等于參數(shù) x,而不是全局變量 x。

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


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

上面代碼中,參數(shù)變量 x 是默認聲明的,在函數(shù)體中,不能用 let 或 const 再次聲明,否則會報錯。

參數(shù)默認值可以與解構賦值,聯(lián)合起來使用。


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 函數(shù)的參數(shù)是一個對象,變量 x 和 y 用于解構賦值,y 有默認值 5。

rest參數(shù)

ES6 引入 rest 參數(shù)(形式為“...變量名”),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用 arguments 對象了。rest 參數(shù)搭配的變量是一個數(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ù)是一個求和函數(shù),利用 rest 參數(shù),可以向該函數(shù)傳入任意數(shù)目的參數(shù)。

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

// arguments變量的寫法
const sortNumbers = () =>
  Array.prototype.slice.call(arguments).sort();

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

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

rest 參數(shù)中的變量代表一個數(shù)組,所以數(shù)組特有的方法都可以用于這個變量。下面是一個利用 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ù)(即只能是最后一個參數(shù)),否則會報錯。


// 報錯
function f(a, ...b, c) {
  // ...
}

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


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

擴展運算符

擴展運算符(spread)是三個點(...)。它好比 rest 參數(shù)的逆運算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。該運算符主要用于函數(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)用,它們的都使用了擴展運算符。該運算符將一個數(shù)組,變?yōu)閰?shù)序列。

下面是 Date 函數(shù)的參數(shù)使用擴展運算符的例子。

const date = new Date(...[2015, 1, 1]);

由于擴展運算符可以展開數(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);

擴展運算符與正常的函數(shù)參數(shù)可以結合使用,非常靈活。

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

下面是擴展運算符取代 apply 方法的一個實際的例子,應用 Math.max 方法,簡化求出一個數(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)為一個參數(shù)序列,然后求最大值。有了擴展運算符以后,就可以直接用 Math.max 了。

另一個例子是通過 push 函數(shù),將一個數(shù)組添加到另一個數(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ù)組,所以只好通過 apply 方法變通使用 push 方法。有了擴展運算符,就可以直接將數(shù)組傳入 push 方法。

擴展運算符還可以用于數(shù)組的賦值。


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]

上面代碼其實也提供了,將一個數(shù)組拷貝進另一個數(shù)組的便捷方法。

擴展運算符也可以與解構賦值結合起來,用于生成數(shù)組。


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

如果將擴展運算符用于數(shù)組賦值,只能放在參數(shù)的最后一位,否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯

JavaScript 的函數(shù)只能返回一個值,如果需要返回多個值,只能返回數(shù)組或?qū)ο?。擴展運算符提供了解決這個問題的一種變通方法。

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

上面代碼從數(shù)據(jù)庫取出一行數(shù)據(jù),通過擴展運算符,直接將其傳入構造函數(shù) Date。

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

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

任何類似數(shù)組的對象,都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組。

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

上面代碼中,querySelectorAll 方法返回的是一個 nodeList 對象,擴展運算符可以將其轉(zhuǎn)為真正的數(shù)組。

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

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

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

Generator 函數(shù)運行后,返回一個遍歷器對象,因此也可以使用擴展運算符。


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

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

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

箭頭函數(shù)

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

var f = v => v;

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

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

如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù),就使用一個圓括號代表參數(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ù)直接返回一個對象,必須在對象外面加上括號。

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

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

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

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

箭頭函數(shù)使得表達更加簡潔。

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

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

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

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

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

另一個例子是

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

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

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

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

箭頭函數(shù)有幾個使用注意點。

  • 函數(shù)體內(nèi)的 this 對象,綁定定義時所在的對象,而不是使用時所在的對象。
  • 不可以當作構造函數(shù),也就是說,不可以使用 new 命令,否則會拋出一個錯誤。
  • 不可以使用 arguments 對象,該對象在函數(shù)體內(nèi)不存在。

上面三點中,第一點尤其值得注意。this 對象的指向是可變的,但是在箭頭函數(shù)中,它是固定的。下面的代碼是一個例子,將 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 方法中,使用了箭頭函數(shù),這導致 this 綁定 handler 對象,否則回調(diào)函數(shù)運行時,this.doSomething 這一行會報錯,因為此時 this 指向全局對象。

由于 this 在箭頭函數(shù)中被綁定,所以不能用 call()、apply()、bind()這些方法去改變 this 的指向。

長期以來,JavaScript 語言的 this 對象一直是一個令人頭痛的問題,在對象方法中使用 this,必須非常小心。箭頭函數(shù)綁定 this,很大程度上解決了這個困擾。

箭頭函數(shù)內(nèi)部,還可以再使用箭頭函數(shù)。下面是一個 ES5 語法的多重嵌套函數(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]

上面這個函數(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]

下面是一個部署管道機制(pipeline)的例子,即前一個函數(shù)的輸出是后一個函數(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ù)綁定

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

函數(shù)綁定運算符是并排的兩個雙引號(::),雙引號左邊是一個對象,右邊是一個函數(shù)。該運算符會自動將左邊的對象,作為上下文環(huán)境(即 this 對象),綁定到右邊的函數(shù)上面。

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

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

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

箭頭函數(shù)還有一個功能,就是可以很方便地改寫 λ 微積分。

// λ微積分的寫法
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作為替代工具,探索計算機科學。

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

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

尾調(diào)用(Tail Call)是函數(shù)式編程的一個重要概念,本身非常簡單,一句話就能說清楚,就是指某個函數(shù)的最后一步是調(diào)用另一個函數(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;
}

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

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

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

上面代碼中,函數(shù) m 和 n 都屬于尾調(diào)用,因為它們都是函數(shù) f 的最后一步操作。

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

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

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

尾調(diào)用由于是函數(shù)的最后一步操作,所以不需要保留外層函數(shù)的調(diào)用幀,因為調(diào)用位置、內(nèi)部變量等信息都不會再用到了,只要直接用內(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就結束了,所以執(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í)行時,調(diào)用幀只有一項,這將大大節(jié)省內(nèi)存。這就是“尾調(diào)用優(yōu)化”的意義。

尾遞歸

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

遞歸非常耗費內(nèi)存,因為需要同時保存成千上百個調(diào)用幀,很容易發(fā)生“棧溢出”錯誤(stack overflow)。但對于尾遞歸來說,由于只存在一個調(diào)用幀,所以永遠不會發(fā)生“棧溢出”錯誤。

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

factorial(5) // 120

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

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

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

factorial(5, 1) // 120

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

遞歸函數(shù)的改寫

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

兩個方法可以解決這個問題。方法一是在尾遞歸函數(shù)之外,再提供一個正常形式的函數(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

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

函數(shù)式編程有一個概念,叫做柯里化(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

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

第二種方法就簡單多了,就是采用 ES6 的函數(shù)默認值。

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

factorial(5) // 120

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

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