E6 中的 扩展运算符(Spread) 和 剩余运算符(Rest)

时间：2024.12.29

之前看到 Es6 中的 三点运算符，有如下的几种写法，有时候三点运算符放在左边，有时候三点运算符放在右边，老是混淆。今天记录下，加强理解。

先看一个问题

最近在看 《ECMAScript 6 入门》关于扩展运算符章节的的时候，有一些疑问。

文章链接：扩展运算符的应用–与解构赋值结合

• 问题 1：

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

将这个问题，抛给 chatGPT ,回复如下：

• 问题 2

const [first, ...rest] = [1, 2, 3, 4, 5];
first; // 1
rest; // [2, 3, 4, 5]

将上面的问题抛给 chatGPT ,给出的回答如下：

有大佬知道的，请不吝告知。

扩展运算符(Spread)

• 定义：将数组或对象展开为多个元素
• 用途：函数调用、数组和对象中的元素展开

用法示例

• 数组展开

const arr1 = [1, 2];
const arr2 = [3, 4, ...arr1];
// arr2 =  [3,4,1,2]

• 对象展开

const obj1 = { name: "孙悟空" };
const obj2 = { age: 18, ...obj1 };
// obj2 = {age: 18,name: "孙悟空"}

• 函数调用的参数

function sum(x, y, z) {
  return x + y + z;
}
const nums = [1, 2, 3];
sum(...nums);

剩余运算符(Rest)

• 定义：将多个参数收集到一个数组(对象)中
• 用途：函数定义、数组解构、对象解构
• 注意：只能是最后一个参数，否则会报错

用法示例

• 数组解构

let [head, ...tail] = [1, 2, 3, 4];
head; // 1
tail; // [2, 3, 4]

• 对象解构

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

• 函数定义的参数

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3); // 10

总结

注意

• 剩余运算符(Rest)，只能是最后一个参数，否则会报错