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 再次聲明。

function foo(x = 5) {
  let x = 1; // error   const x = 2; // error }

 使用參數默認值時，函數不能有同名參數。

// 不報錯 function foo(x, x, y) {
  // ... }
 // 報錯 function foo(x, x, y = 1) {
  // ... } // SyntaxError: Duplicate parameter name not allowed in this context

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

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

// 寫法一 function m1({x = 0, y = 0} = {}) {
  return [x, y];
}
 // 寫法二 function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函數沒有參數的狀況 m1() // [0, 0] m2() // [0, 0]  // x 和 y 都有值的狀況 m1({x: 3, y: 8}) // [3, 8] m2({x: 3, y: 8}) // [3, 8]  // x 有值，y 無值的狀況 m1({x: 3}) // [3, 0] m2({x: 3}) // [3, undefined]  // x 和 y 都無值的狀況 m1({}) // [0, 0]; m2({}) // [undefined, undefined] 
m1({z: 3}) // [0, 0] m2({z: 3}) // [undefined, undefined]

 

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

 注意，rest 參數以後不能再有其餘參數（即只能是最後一個參數），不然會報錯。

// 報錯 function f(a, ...b, c) {
  // ... }

 

3.name 屬性

函數的 name 屬性，返回該函數的函數名。

function foo() {}
foo.name // "foo"

 

4.箭頭函數

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;
};

因爲大括號被解釋爲代碼塊，因此若是箭頭函數直接返回一個對象，必須在對象外面加上括號，不然會報錯。

// 報錯 let getTempItem = id => { id: id, name: "Temp" };
 // 不報錯 let getTempItem = id => ({ id: id, name: "Temp" });

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

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

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

// 正常函數寫法 var result = values.sort(function (a, b) {
  return a - b;
});
 // 箭頭函數寫法 var result = values.sort((a, b) => a - b);