js:rest 參數和擴展運算符...的用法

函數的rest 參數

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

function test() {
  return arguments;
}
test(2, 5, 3) // [2, 5, 3]的僞數組
function test(...values) {
  return values;
}
test(2, 5, 3) // [2, 5, 3]

數組的擴展運算符

相當於 rest 參數的逆運算,將一個數組轉爲用逗號分隔的參數序列。

console.log(...[1, 2, 3])
// 1 2 3
[...[1,2,3], 4]
// [1, 2, 3, 4]

運用:

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

注意:
只有函數調用時,擴展運算符纔可以放在圓括號中,否則會報錯。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

對象的擴展運算符

取出參數對象的所有可遍歷屬性,拷貝到當前對象之中。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

對象的擴展運算符等同於使用Object.assign()方法:

let aClone = { ...a };
// 等同於
let aClone = Object.assign({}, a);

擴展運算符可以用於合併兩個對象:

let ab = { ...a, ...b };
// 等同於
let ab = Object.assign({}, a, b);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章