深刻理解javascript函數系列第四篇——ES6函數擴展

前面的話

　　ES6標準關於函數擴展部分，主要涉及如下四個方面：參數默認值、rest參數、擴展運算符和箭頭函數

 

參數默認值

　　通常地，爲參數設置默認值需進行以下設置

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

　　但這樣設置其實是有問題的，若是y的值自己是假值(包括false、undefined、null、''、0、-0、NaN)，則沒法取得自己值

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

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

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

　　[注意]參數變量是默認聲明的，因此不能用let或const再次聲明

function foo(x = 5) {
  let x = 1; //SyntaxError: Identifier 'x' has already been declared
  const x = 2; //SyntaxError: Identifier 'x' has already been declared
}

尾參數

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

function f(x = 1, y) {
  return [x, y];
}
f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 報錯
f(undefined, 1) // [1, 1]

　　若是傳入undefined，將觸發該參數等於默認值，null則沒有這個效果

function foo(x = 5, y = 6) {
  console.log(x, y);
}
foo(undefined, null)// 5 null

length

　　指定了默認值之後，函數的length屬性，將返回沒有指定默認值的參數個數

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

　　[注意]若是設置了默認值的參數不是尾參數，那麼length屬性也再也不計入後面的參數了

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

做用域

　　【1】若是參數默認值是一個變量，則該變量所處的做用域，與其餘變量的做用域規則是同樣的，即先是當前函數的做用域，而後纔是全局做用域

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

　　【2】若是函數調用時，函數做用域內部的變量x沒有生成，則x指向全局變量

var x = 1;
function f(y = x) {
  var x = 2;
  console.log(y);
}
f() // 1

應用

　　利用參數默認值，能夠指定某一個參數不得省略，若是省略就拋出一個錯誤

function throwIfMissing() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}
foo()// Error: Missing parameter

　　[注意]將參數默認值設爲undefined，代表這個參數能夠省略

function foo(optional = undefined) {
    //todo
}

 

rest參數

　　ES6引入rest參數(形式爲「...變量名」)，用於獲取函數的多餘參數，這樣就不須要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多餘的參數放入數組中

function add(...values) {
  var sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) //10

　　rest參數中的變量表明一個數組，因此數組特有的方法均可以用於這個變量

　　下面是一個利用rest參數改寫數組push方法的例子

function push(array, ...items) {
  items.forEach(function(i) {
    array.push(i);
    console.log(i);
  });
}
var a = [];
push(a, 1, 2, 3);

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

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

　　[注意]rest參數以後不能再有其餘參數

//Uncaught SyntaxError: Rest parameter must be last formal parameter
function f(a, ...b, c) {
  //todo
}

 

擴展運算符

　　擴展運算符(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>]

　　該運算符主要用於函數調用

function add(x, y) {
  return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42

　　Math.max方法簡化

// ES5
Math.max.apply(null, [14, 3, 77])

// ES6
Math.max(...[14, 3, 77])

//等同於
Math.max(14, 3, 77)

　　push方法簡化

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

　　擴展運算符能夠將字符串轉爲真正的數組

[...'hello']// [ "h", "e", "l", "l", "o" ]

 

箭頭函數

　　關於箭頭函數的詳細介紹移步至此

 

參考資料

　　《ECMAScript 6入門》 阮一峯