本文實例講述了ES6新特性之函數的擴展。分享給大家供大家參考,具體如下:
一、函數參數默認值
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再次聲明。否則會報錯。
2. 參數默認值可以與解構賦值的默認值,結合起來使用。
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
二、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參數。
三、擴展運算符
擴展運算符(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>]
四、箭頭函數
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對象的指向是可變的,但是在箭頭函數中,它是固定的。
五、函數參數的尾逗號
ECMAScript 2017將函數的最後一個參數有尾逗號(trailing comma)。
此前,函數定義和調用時,都不允許最後一個參數後面出現逗號。
function clownsEverywhere( param1, param2 ) { /* ... */ }
上面代碼中,如果在param2或bar後面加一個逗號,就會報錯。
這樣的話,如果以後修改代碼,想為函數clownsEverywhere添加第三個參數,就勢必要在第二個參數後面添加一個逗號。這對版本管理系統來說,就會顯示,添加逗號的那一行也發生了變動。這看上去有點冗余,因此新的語法允許定義和調用時,尾部直接有一個逗號。
function clownsEverywhere( param1, param2, ) { /* ... */ }
希望本文所述對大家ECMAScript程序設計有所幫助。