1.函數(shù)參數(shù)的默認值
(1).基本用法
在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等于空字符,結果被改為默認值。為避免這個問題,先判斷y是否被賦值,如果沒有在等于默認值。
```javascript
if(typeof y === 'undefined'){
y = 'world'}```
ES6 允許為函數(shù)的參數(shù)設置默認值,即直接寫在參數(shù)定義的后面。
```javascript
function log(x, y = 'World') {
console.log(x, y);}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
//另一個例子
function Point(x = 0, y = 0) {
this.x = x;
this.y = y;}
var p = new Point();p
// { x: 0, y: 0 }```
參數(shù)變量是默認聲明的,所以不能用let或const再次聲明。
function foo(x =5){let x =1;const x= 1;}這是不允許的。會報錯誤
###(2).與解構賦值默認值結合使用
參數(shù)默認值可以與解構賦值的默認值,結合起來使用。
```javascript
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```
上面代碼使用了對象的解構賦值默認值,而沒有使用函數(shù)參數(shù)的默認值。只有當函數(shù)foo的參數(shù)是一個對象時,變量x和y才會通過解構賦值而生成。如果函數(shù)foo調(diào)用時參數(shù)不是對象,變量x和y就不會生成,從而報錯。如果參數(shù)對象沒有y屬性,y的默認值5才會生效。
```javascript
function fetch(url, { body = '', method = 'GET', headers = {} }) {
console.log(method);}
fetch('http://example.com', {})// "GET"
fetch('http://example.com')// 報錯```
上面代碼中,如果函數(shù)fetch的第二個參數(shù)是一個對象,就可以為它的三個屬性設置默認值。上面的寫法不能省略第二個參數(shù),如果結合函數(shù)參數(shù)的默認值,就可以省略第二個參數(shù)。這時,就出現(xiàn)了雙重默認值。
```javascript
function fetch(url, { method = 'GET' } = {}) {
console.log(method);}
fetch('http://example.com')// "GET"```
上面代碼中,函數(shù)fetch沒有第二個參數(shù)時,函數(shù)參數(shù)的默認值就會生效,然后才是解構賦值的默認值生效,變量method才會取到默認值GET。
```javascript
// 寫法一
function m1({x = 0, y = 0} = {}) { return [x, y];}
// 寫法二
function m2({x, y} = { x: 0, y: 0 }) { return [x, y];}```
上面兩種寫法都對函數(shù)的參數(shù)設定了默認值,區(qū)別是寫法一函數(shù)參數(shù)的默認值是空對象,但是設置了對象解構賦值的默認值;寫法二函數(shù)參數(shù)的默認值是一個有具體屬性的對象,但是沒有設置對象解構賦值的默認值。
```javascript
// 函數(shù)沒有參數(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無值的情況
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
// x和y都無值的情況
m1({}) // [0, 0];
m2({}) // [undefined, undefined]
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]```
###(3).參數(shù)默認值的位置
通常情況下,定義了默認值的參數(shù),應該是函數(shù)的尾參數(shù)。因為這樣比較容易看出來,到底省略了哪些參數(shù)。如果非尾部的參數(shù)設置默認值,實際上這個參數(shù)是沒法省略的。
```javascript
// 例一
function f(x = 1, y) { return [x, y];}
f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 報錯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) // 報錯
f(1, undefined, 2) // [1, 5, 2]```
如果傳入undefined,將觸發(fā)該參數(shù)等于默認值,null則沒有這個效果。
###(4).函數(shù)的length屬性
指定了默認值以后,函數(shù)的length屬性,將返回沒有指定默認值的參數(shù)個數(shù)。也就是說,指定了默認值后,length屬性將失真。
(function (a, b, c = 5) {}).length // 2
這是因為length屬性的含義是,該函數(shù)預期傳入的參數(shù)個數(shù)。某個參數(shù)指定默認值以后,預期傳入的參數(shù)個數(shù)就不包括這個參數(shù)了。同理,rest參數(shù)也不會計入length屬性。
(function(...args) {}).length // 0
如果設置了默認值的參數(shù)不是尾參數(shù),那么length屬性也不再計入后面的參數(shù)了。
**(function (a, b = 1, c) {}).length // 1**
###(5).作用域
一個需要注意的地方是,如果參數(shù)默認值是一個變量,則該變量所處的作用域,與其他變量的作用域規(guī)則是一樣的,即先是當前函數(shù)的作用域,然后才是全局作用域。
```javascript
var x = 1;
function f(x, y = x) { console.log(y);}
f(2) // 2
//調(diào)用時,函數(shù)內(nèi)部x已經(jīng)生成,y = x ,而不是全局x</pre>
如果調(diào)用時,函數(shù)作用域內(nèi)部的變量x沒有生成,結果就會不一樣。
<pre>let x = 1;
function f(y = x) { let x = 2; console.log(y);}
f() // 1
//函數(shù)調(diào)用時,y的默認值變量x尚未在函數(shù)內(nèi)部生成,所以x指向全局變量。```
如果此時,全局變量x不存在,就會報錯。
```javascript
function f(y = x) { let x = 2; console.log(y);}
f() // ReferenceError: x is not defined
//這樣寫也會報錯
var x = 1;function foo(x = x) { // ...}
foo() // ReferenceError: x is not defined```
如果參數(shù)的默認值是一個函數(shù),該函數(shù)的作用域是其聲明所在的作用域。
```javascript
let foo = 'outer';
function bar(func = x => foo) {
let foo = 'inner';
console.log(func()); // outer
}
bar();```
上面代碼中,函數(shù)bar的參數(shù)func的默認值是一個匿名函數(shù),返回值為變量foo。這個匿名函數(shù)聲明時,bar函數(shù)的作用域還沒有形成,所以匿名函數(shù)里面的foo指向外層作用的foo,輸出outer。
如果寫成下面這樣,就會報錯。
```javascript
function bar(func = () => foo) {
let foo = 'inner';
console.log(func());}
bar() // ReferenceError: foo is not defined```
上面代碼中,匿名函數(shù)里面的foo指向函數(shù)外層,但是函數(shù)外層并沒有聲明foo,所以就報錯了。
下面是一個更復雜的例子。
```javascript
var x = 1;
function foo(x, y = function() { x = 2; }) {
var x = 3;
y();
console.log(x);}
foo() // 3```
上面代碼中,函數(shù)foo的參數(shù)y的默認值是一個匿名函數(shù)。函數(shù)foo調(diào)用時,它的參數(shù)x的值為undefined,所以y函數(shù)內(nèi)部的x一開始是undefined,后來被重新賦值2。但是,函數(shù)foo內(nèi)部重新聲明了一個x,值為3,這兩個x是不一樣的,互相不產(chǎn)生影響,因此最后輸出3。
如果將var x = 3的var去除,兩個x就是一樣的,最后輸出的就是2。
##應用
利用參數(shù)默認值,可以指定某一個參數(shù)不得省略,如果省略就拋出一個錯誤。
```javascript
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ù)默認值設為undefined,表明這個參數(shù)是可以省略的。
function foo(optional = undefined) { ··· }
#2.rest參數(shù)
ES6引入rest參數(shù)(形式為“...變量名”),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對象了。rest參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中。
```javascript
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10```
下面是一個rest參數(shù)代替arguments變量的例子。
```javascript
// arguments變量的寫法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();}
// rest參數(shù)的寫法
const sortNumbers = (...numbers) => numbers.sort();```
上面代碼的兩種寫法,比較后可以發(fā)現(xiàn),rest參數(shù)的寫法更自然也更簡潔。
一個利用rest參數(shù)改寫數(shù)組push方法的例子
```javascript
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ù)的length屬性,不包括rest參數(shù)。
```javascript
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1```
#3.擴展運算符
擴展運算符(spread)是三個點(...)。它好比rest參數(shù)的逆運算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。
```javascript
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>]```
該運算符主要用于函數(shù)調(diào)用。
```javascript
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ù)序列
擴展運算符與正常的函數(shù)參數(shù)可以結合使用,非常靈活。
```javascript
function f(v, w, x, y, z) { }var args = [0, 1];f(-1, ...args, 2, ...[3]);```
###(1).替代數(shù)組的apply方法
由于擴展運算符可以展開數(shù)組,所以不再需要apply方法,將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。
```javascript
// 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);```
下面是擴展運算符取代apply方法的一個實際的例子,應用Math.max方法,簡化求出一個數(shù)組最大元素的寫法。
```javascript
// 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ù)組的尾部。
```javascript
// 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);```
```javascript
// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);```
###(2).擴展運算符的應用
####2.1.合并數(shù)組
擴展運算符提供了數(shù)組合并的新寫法。
```javascript
// 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.2.與解構賦值結合
擴展運算符可以與解構賦值結合起來,用于生成數(shù)組。
```javascript
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list```
下面是另外一些例子.
```javascript
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 // []```
如果將擴展運算符用于數(shù)組賦值,只能放在參數(shù)的最后一位,否則會報錯。
```javascript
const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯```
####2.3.函數(shù)的返回值
JavaScript的函數(shù)只能返回一個值,如果需要返回多個值,只能返回數(shù)組或?qū)ο蟆U展運算符提供了解決這個問題的一種變通方法。
```javascript
var dateFields = readDateFields(database);
var d = new Date(...dateFields);```
上面代碼從數(shù)據(jù)庫取出一行數(shù)據(jù),通過擴展運算符,直接將其傳入構造函數(shù)Date。
####2.4.字符串
擴展運算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。
```javascript
[...'hello']// [ "h", "e", "l", "l", "o" ]</pre>
上面的寫法,有一個重要的好處,那就是能夠正確識別32位的Unicode字符。
<pre>'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3```
上面代碼的第一種寫法,JavaScript會將32位Unicode字符,識別為2個字符,采用擴展運算符就沒有這個問題。因此,正確返回字符串長度的函數(shù),可以像下面這樣寫。
```javascript
function length(str) {
return [...str].length;}
length('x\uD83D\uDE80y') // 3```
如果不用擴展運算符,字符串的reverse操作就不正確。
```javascript
let str = 'x\uD83D\uDE80y';
str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'
[...str].reverse().join('')
// 'y\uD83D\uDE80x'```
####2.5.實現(xiàn)了Iterator接口的對象
任何Iterator接口的對象,都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組。
```javascript
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];```
上面代碼中,querySelectorAll方法返回的是一個nodeList對象。它不是數(shù)組,而是一個類似數(shù)組的對象。這時,擴展運算符可以將其轉(zhuǎn)為真正的數(shù)組,原因就在于NodeList對象實現(xiàn)了Iterator接口。
對于那些沒有部署Iterator接口的類似數(shù)組的對象,擴展運算符就無法將其轉(zhuǎn)為真正的數(shù)組。
```javascript
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];```
上面代碼中,arrayLike是一個類似數(shù)組的對象,但是沒有部署Iterator接口,擴展運算符就會報錯。這時,可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組。
####2.6.Map和Set結構,Generator函數(shù)
擴展運算符內(nèi)部調(diào)用的是數(shù)據(jù)結構的Iterator接口,因此只要具有Iterator接口的對象,都可以使用擴展運算符,比如Map結構。
```javascript
let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'],]);
let arr = [...map.keys()]; // [1, 2, 3]```
Generator函數(shù)運行后,返回一個遍歷器對象,因此也可以使用擴展運算符。
```javascript
var go = function*(){ yield 1; yield 2; yield 3;};
[...go()] // [1, 2, 3]```
上面代碼中,變量go是一個Generator函數(shù),執(zhí)行后返回的是一個遍歷器對象,對這個遍歷器對象執(zhí)行擴展運算符,就會將內(nèi)部遍歷得到的值,轉(zhuǎn)為一個數(shù)組。如果對沒有iterator接口的對象,使用擴展運算符,將會報錯。
#4.嚴格模式
從ES5開始,函數(shù)內(nèi)部可以設定為嚴格模式。
```javascript
function doSomething(a, b) {
'use strict';
// code}```
《ECMAScript 2016標準》做了一點修改,規(guī)定只要函數(shù)參數(shù)使用了默認值、解構賦值、或者擴展運算符,那么函數(shù)內(nèi)部就不能顯式設定為嚴格模式,否則會報錯。
```javascript
// 報錯
function doSomething(a, b = a) { 'use strict'; // code}
// 報錯
const doSomething = function ({a, b}) { 'use strict'; // code};
// 報錯
const doSomething = (...a) => { 'use strict'; // code};
const obj = {
// 報錯
doSomething({a, b}) { 'use strict'; // code }};```
這樣規(guī)定的原因是,函數(shù)內(nèi)部的嚴格模式,同時適用于函數(shù)體代碼和函數(shù)參數(shù)代碼。但是,函數(shù)執(zhí)行的時候,先執(zhí)行函數(shù)參數(shù)代碼,然后再執(zhí)行函數(shù)體代碼。這樣就有一個不合理的地方,只有從函數(shù)體代碼之中,才能知道參數(shù)代碼是否應該以嚴格模式執(zhí)行,但是參數(shù)代碼卻應該先于函數(shù)體代碼執(zhí)行。
#5.name屬性
函數(shù)的name屬性,返回該函數(shù)的函數(shù)名。
function foo() {}
foo.name //foo
這個屬性早就被瀏覽器廣泛支持,但是直到ES6,才將其寫入了標準。
需要注意的是,ES6對這個屬性的行為做出了一些修改。如果將一個匿名函數(shù)賦值給一個變量,ES5的name屬性,會返回空字符串,而ES6的name
屬性會返回實際的函數(shù)名。
```javascript
var func1 = function () {};
// ES5
func1.name // ""
// ES6
func1.name // "func1"```
如果將一個具名函數(shù)賦值給一個變量,則ES5和ES6的name屬性都返回這個具名函數(shù)原本的名字。
const bar = function baz(){}// bar.name都會返回baz
Function構造函數(shù)返回的函數(shù)實例,name屬性的值為“anonymous”。
(new Function).name // "anonymous"
bind返回的函數(shù),name屬性值會加上“bound ”前綴。
```javascript
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "```
#6.箭頭函數(shù)
ES6允許使用“箭頭”(=>)定義函數(shù)。
var f = v => v;等同于
var f = function(v) { return v;};
如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù),就使用一個圓括號代表參數(shù)部分。
```javascript
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ù)可以與變量解構結合使用。
```javascript
const full = ({ first, last }) => first + ' ' + last;//
等同于
function full(person) { return person.first + ' ' + person.last;}```
箭頭函數(shù)的一個用處是簡化回調(diào)函數(shù)。
```javascript
// 正常函數(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ù)結合的例子。
```javascript
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ù)有幾個使用注意點。
+ (1)函數(shù)體內(nèi)的this對象,就是定義時所在的對象,而不是使用時所在的對象。
+ (2)不可以當作構造函數(shù),也就是說,不可以使用new命令,否則會拋出一個錯誤。
+ (3)不可以使用arguments對象,該對象在函數(shù)體內(nèi)不存在。如果要用,可以用Rest參數(shù)代替。
+ (4)不可以使用yield命令,因此箭頭函數(shù)不能用作Generator函數(shù)。
上面四點中,第一點尤其值得注意。this對象的指向是可變的,但是在箭頭函數(shù)中,它是固定的。
DOM事件的回調(diào)函數(shù)封裝在一個對象里面。
```javascript
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); }};```
除了this,以下三個變量在箭頭函數(shù)之中也是不存在的,指向外層函數(shù)的對應變量:arguments、super、new.target。
另外,由于箭頭函數(shù)沒有自己的this,所以當然也就不能用call()、apply()、bind()這些方法去改變this的指向
####嵌套的箭頭函數(shù)
箭頭函數(shù)內(nèi)部,還可以再使用箭頭函數(shù)。下面是一個ES5語法的多重嵌套函數(shù)。
```javascript
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ù)改寫。
```javascript
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ù)的輸入。
```javascript
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```
如果覺得上面的寫法可讀性比較差,也可以采用下面的寫法。
```javascript
const plus1 = a => a + 1;
const mult2 = a => a * 2;
mult2(plus1(5))// 12```
箭頭函數(shù)還有一個功能,就是可以很方便地改寫λ演算。
```javascript
// λ演算的寫法
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)));```
#7.綁定this
箭頭函數(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ù)上面。
```javascript
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);
}```
如果雙冒號左邊為空,右邊是一個對象的方法,則等于將該方法綁定在該對象上面。
```javascript
var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;
let log = ::console.log;
// 等同于
var log = console.log.bind(console);```
由于雙冒號運算符返回的還是原對象,因此可以采用鏈式寫法。
```javascript
// 例一
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");```
#8.尾調(diào)用優(yōu)化
尾調(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)用。
```javascript
// 情況一
function f(x){ let y = g(x); return y;}
// 情況二
function f(x){ return g(x) + 1;}
// 情況三
function f(x){ g(x);}```
尾調(diào)用不一定出現(xiàn)在函數(shù)尾部,只要是最后一步操作即可。
####尾調(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)用棧”(call stack)。
尾調(diào)用由于是函數(shù)的最后一步操作,所以不需要保留外層函數(shù)的調(diào)用幀,因為調(diào)用位置、內(nèi)部變量等信息都不會再用到了,只要直接用內(nèi)層函數(shù)的調(diào)用幀,取代外層函數(shù)的調(diào)用幀就可以了。
```javascript
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ù)的內(nèi)部變量,內(nèi)層函數(shù)的調(diào)用幀才會取代外層函數(shù)的調(diào)用幀,否則就無法進行“尾調(diào)用優(yōu)化”。
####尾遞歸
函數(shù)調(diào)用自身,稱為遞歸。如果尾調(diào)用自身,就稱為尾遞歸。
遞歸非常耗費內(nèi)存,因為需要同時保存成千上百個調(diào)用幀,很容易發(fā)生“棧溢出”錯誤(stack overflow)。但對于尾遞歸來說,由于只存在一個調(diào)用幀,所以永遠不會發(fā)生“棧溢出”錯誤。
```javascript
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) 。
```javascript
function factorial(n, total) {
if (n === 1) return total;
return factorial(n - 1, n * total);}
factorial(5, 1) // 120```
還有一個比較著名的例子,就是計算fibonacci 數(shù)列,也能充分說明尾遞歸優(yōu)化的重要性
如果是非尾遞歸的fibonacci 遞歸方法
```javascript
function Fibonacci (n) {
if ( n <= 1 ) {return 1};
return Fibonacci(n - 1) + Fibonacci(n - 2);
}
Fibonacci(10); // 89//
Fibonacci(100)// Fibonacci(500)// 堆棧溢出了```
如果我們使用尾遞歸優(yōu)化過的fibonacci 遞歸算法
```javascript
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)化”對遞歸操作意義重大,所以一些函數(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ù)。
```javascript
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ù)的形式。這里也可以使用柯里化。
```javascript
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)橹唤邮?個參數(shù)的 factorial 。
第二種方法就簡單多了,就是采用ES6的函數(shù)默認值。
```javascript
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)可以用遞歸代替,而一旦使用遞歸,就最好使用尾遞歸。
####嚴格模式
ES6的尾調(diào)用優(yōu)化只在嚴格模式下開啟,正常模式是無效的。
這是因為在正常模式下,函數(shù)內(nèi)部有兩個變量,可以跟蹤函數(shù)的調(diào)用棧。
- func.arguments:返回調(diào)用時函數(shù)的參數(shù)。
- func.caller:返回調(diào)用當前函數(shù)的那個函數(shù)。
尾調(diào)用優(yōu)化發(fā)生時,函數(shù)的調(diào)用棧會改寫,因此上面兩個變量就會失真。嚴格模式禁用這兩個變量,所以尾調(diào)用模式僅在嚴格模式下生效。
```javascript
function restricted() {
"use strict";
restricted.caller; // 報錯
restricted.arguments; // 報錯
}
restricted();```
####尾遞歸優(yōu)化的實現(xiàn)
尾遞歸優(yōu)化只在嚴格模式下生效,那么正常模式下,或者那些不支持該功能的環(huán)境中,有沒有辦法也使用尾遞歸優(yōu)化呢?回答是可以的,就是自己實現(xiàn)尾遞歸優(yōu)化。
它的原理非常簡單。尾遞歸之所以需要優(yōu)化,原因是調(diào)用棧太多,造成溢出,那么只要減少調(diào)用棧,就不會溢出。怎么做可以減少調(diào)用棧呢?就是采用“循環(huán)”換掉“遞歸”。
下面是一個正常的遞歸函數(shù)。
```javascript
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是一個遞歸函數(shù),參數(shù)x是需要累加的值,參數(shù)y控制遞歸次數(shù)。一旦指定sum遞歸100000次,就會報錯,提示超出調(diào)用棧的最大次數(shù)。
蹦床函數(shù)(trampoline)可以將遞歸執(zhí)行轉(zhuǎn)為循環(huán)執(zhí)行。
```javascript
function trampoline(f) {
while (f && f instanceof Function) {
f = f(); }
return f;}```
上面就是蹦床函數(shù)的一個實現(xiàn),它接受一個函數(shù)f作為參數(shù)。只要f執(zhí)行后返回一個函數(shù),就繼續(xù)執(zhí)行。注意,這里是返回一個函數(shù),然后執(zhí)行該函數(shù),而不是函數(shù)里面調(diào)用函數(shù),這樣就避免了遞歸執(zhí)行,從而就消除了調(diào)用棧過大的問題。
然后,要做的就是將原來的遞歸函數(shù),改寫為每一步返回另一個函數(shù)。
```javascript
function sum(x, y) {
if (y > 0) {
return sum.bind(null, x + 1, y - 1); }
else { return x; }}```
上面代碼中,sum函數(shù)的每次執(zhí)行,都會返回自身的另一個版本。
現(xiàn)在,使用蹦床函數(shù)執(zhí)行sum,就不會發(fā)生調(diào)用棧溢出。
trampoline(sum(1, 100000))// 100001
蹦床函數(shù)并不是真正的尾遞歸優(yōu)化,下面的實現(xiàn)才是。
```javascript
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)化的實現(xiàn),它的奧妙就在于狀態(tài)變量active。默認情況下,這個變量是不激活的。一旦進入尾遞歸優(yōu)化的過程,這個變量就激活了。然后,每一輪遞歸sum返回的都是undefined,所以就避免了遞歸執(zhí)行;而accumulated數(shù)組存放每一輪sum執(zhí)行的參數(shù),總是有值的,這就保證了accumulator函數(shù)內(nèi)部的while循環(huán)總是會執(zhí)行。這樣就很巧妙地將“遞歸”改成了“循環(huán)”,而后一輪的參數(shù)會取代前一輪的參數(shù),保證了調(diào)用棧只有一層。
#9.函數(shù)參數(shù)的尾逗號
ECMAScript 2017將允許函數(shù)的最后一個參數(shù)有尾逗號(trailing comma)。
此前,函數(shù)定義和調(diào)用時,都不允許最后一個參數(shù)后面出現(xiàn)逗號。
```javascript
function clownsEverywhere(
param1,
param2
) {/* ... */ }
clownsEverywhere(
'foo',
'bar'
);```
上面代碼中,如果在param2或bar后面加一個逗號,就會報錯。
這樣的話,如果以后修改代碼,想為函數(shù)clownsEverywhere添加第三個參數(shù),就勢必要在第二個參數(shù)后面添加一個逗號。這對版本管理系統(tǒng)來說,就會顯示,添加逗號的那一行也發(fā)生了變動。這看上去有點冗余,因此新的語法允許定義和調(diào)用時,尾部直接有一個逗號。
```javascript
function clownsEverywhere(
param1,
param2,
) { /* ... */ }
clownsEverywhere( 'foo',
'bar',
);```