ES6函數擴展

/一、基本用法

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

// ES6 允許爲函數的參數設置默認值,即直接寫在參數定義的後面。

function log(x, y = 'World') {

console.log(x, y);

}

log('Hello') // Hello World

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

log('Hello', '') // Hello

// 參數變量是默認聲明的,所以不能用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() // TypeError: Cannot read property 'x' of undefined

// 上面代碼只使用了對象的解構賦值默認值,沒有使用函數參數的默認值。只有當函數foo的參數是一個對象時,變量x和y纔會通過解構賦值生成。如果函數foo調用時沒提供參數,變量x和y就不會生成,從而報錯。通過提供函數參數的默認值,就可以避免這種情況。

function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {

console.log(method);

}

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

// "GET"

// 上面代碼中,函數fetch沒有第二個參數時,函數參數的默認值就會生效,然後纔是解構賦值的默認值生效,變量method纔會取到默認值GET

 

三、參數默認值的位置

// 通常情況下,定義了默認值的參數,應該是函數的尾參數。因爲這樣比較容易看出來,到底省略了哪些參數。如果非尾部的參數設置默認值,實際上這個參數是沒法省略的。

四、函數的 length 屬性

// 函數的length屬性,將返回沒有指定默認值的參數個數。也就是說,指定了默認值後,length屬性將失真。

五、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 參數之後不能再有其他參數(即只能是最後一個參數),否則會報錯。

六、嚴格模式

// 從 ES5 開始,函數內部可以設定爲嚴格模式。

function doSomething(a, b) {

'use strict';

// code

}

// ES2016 做了一點修改,規定只要函數參數使用了默認值、解構賦值、或者擴展運算符,那麼函數內部就不能顯式設定爲嚴格模式,否則會報錯。

// 函數內部的嚴格模式,同時適用於函數體和函數參數。但是,函數執行的時候,先執行函數參數,然後再執行函數體。這樣就有一個不合理的地方,只有從函數體之中,才能知道參數是否應該以嚴格模式執行,但是參數卻應該先於函數體執行。

// 只要參數使用了默認值、解構賦值、或者擴展運算符,就不能顯式指定嚴格模式。

// 兩種方法可以規避這種限制。第一種是設定全局性的嚴格模式,這是合法的。

'use strict';

function doSomething(a, b = a) {

// code

}

// 第二種是把函數包在一個無參數的立即執行函數裏面。

const doSomething = (function () {

'use strict';

return function(value = 42) {

return value;

};

}());

七、name 屬性

// 函數的name屬性,返回該函數的函數名。如果將一個匿名函數賦值給一個變量,ES5 的name屬性,會返回空字符串,而 ES6 的name屬性會返回實際的函數名。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章