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);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章