展开语法和剩余参数

javascript
2021/07/06

展开语法

展开语法(Spread syntax),只能用于可迭代对象, 可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开

a = { name: 'mdn' };
b = [1, 2, 3];
console.log({ ...a });
console.log([...b]);

// 函数参数
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
console.log(sum.apply(null, numbers));

// 构造
const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const clonedObj = { ...obj1 };
const mergedObj = { ...obj1, ...obj2 };

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。如果函数的最后一个命名参数以…为前缀，则它将成为一个由剩余参数组成的真数组，其中从 0（包括）到 theArgs.length（排除）的元素由传递给函数的实际参数提供。

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

剩余参数和 arguments 对象之间的区别主要有三个