ES6新特性之函數的擴展實例詳解

文實例講述了ES6新特性之函數的擴展。分享給你們供你們參考，具體以下：

1、函數參數默認值

1. ES6容許爲函數的參數設置默認值，即直接寫在參數定義的後面。

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

   這種寫法有兩個好處：首先，閱讀代碼的人，能夠馬上意識到哪些參數是能夠省略的，不用查看函數體或文檔；其次，有利於未來的代碼優化，即便將來的版本在對外接口中，完全拿掉這個參數，也不會致使之前的代碼沒法運行。

參數變量是默認聲明的，因此不能用let或const再次聲明。不然會報錯。

1. 參數默認值能夠與解構賦值的默認值，結合起來使用。

   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

   一般狀況下，定義了默認值的參數，應該是函數的尾參數。由於這樣比較容易看出來，到底省略了哪些參數。若是非尾部的參數設置默認值，實際上這個參數是無法省略的。

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

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

2、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參數以後不能再有其餘參數（即只能是最後一個參數），不然會報錯。

函數的length屬性，不包括rest參數。

3、擴展運算符

擴展運算符（spread）是三個點（...）。它比如rest參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。

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

4、箭頭函數

ES6容許使用「箭頭」（=>）定義函數。箭頭函數前面是輸入，後面是輸出。inputs => outputs

var f = v => v;
//上面的箭頭函數等同於：
var f = function(v) {
 return v;
};

若是箭頭函數不須要參數或須要多個參數，就使用一個圓括號表明參數部分。

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

若是箭頭函數的代碼塊部分多於一條語句，就要使用大括號將它們括起來，而且使用return語句返回。

var sum = (num1, num2) => { return num1 + num2; }
//因爲大括號被解釋爲代碼塊，因此若是箭頭函數直接返回一個對象，必須在對象外面加上括號。
var getTempItem = id => ({ id: id, name: "Temp" });

箭頭函數能夠與變量解構結合使用。

const full = ({ first, last }) => first + ' ' + last;
// 等同於
function full(person) {
 return person.first + ' ' + person.last;
}

箭頭函數的一個用處是簡化回調函數。

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

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

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

箭頭函數有幾個使用注意點。

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
（3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替。
（4）不可使用yield命令，所以箭頭函數不能用做Generator函數。

上面四點中，第一點尤爲值得注意。this對象的指向是可變的，可是在箭頭函數中，它是固定的。

5、函數參數的尾逗號

ECMAScript 2017將函數的最後一個參數有尾逗號（trailing comma）。

此前，函數定義和調用時，都不容許最後一個參數後面出現逗號。

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

上面代碼中，若是在param2或bar後面加一個逗號，就會報錯。

這樣的話，若是之後修改代碼，想爲函數clownsEverywhere添加第三個參數，就勢必要在第二個參數後面添加一個逗號。這對版本管理系統來講，就會顯示，添加逗號的那一行也發生了變更。這看上去有點冗餘，所以新的語法容許定義和調用時，尾部直接有一個逗號。

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

但願本文所述對你們ECMAScript程序設計有所幫助。