ES6新特性之函數(shù)擴(kuò)展的示例分析

這篇文章主要介紹ES6新特性之函數(shù)擴(kuò)展的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

具體如下：

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

1. ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫(xiě)在參數(shù)定義的后面。

function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

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

參數(shù)變量是默認(rèn)聲明的，所以不能用let或const再次聲明。否則會(huì)報(bào)錯(cuò)。

2. 參數(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

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

指定了默認(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

二、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ù)。

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

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

三、擴(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>]

四、箭頭函數(shù)

ES6允許使用“箭頭”（=>）定義函數(shù)。箭頭函數(shù)前面是輸入，后面是輸出。inputs => outputs

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ù)的一個(gè)用處是簡(jiǎn)化回調(diào)函數(shù)。

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

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

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

箭頭函數(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ù)中，它是固定的。

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

ECMAScript 2017將函數(shù)的最后一個(gè)參數(shù)有尾逗號(hào)（trailing comma）。

此前，函數(shù)定義和調(diào)用時(shí)，都不允許最后一個(gè)參數(shù)后面出現(xiàn)逗號(hào)。

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

上面代碼中，如果在param2或bar后面加一個(gè)逗號(hào)，就會(huì)報(bào)錯(cuò)。

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

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

以上是“ES6新特性之函數(shù)擴(kuò)展的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！