优雅而高效的JavaScript——扩展运算符

博主：小猫娃来啦
文章核心：优雅而高效的JavaScript——扩展运算符

什么是扩展运算符

扩展运算符的定义

扩展运算符是三个点（…），它可以将一个数组或对象展开成多个元素，或将多个元素合并成一个数组或对象。

扩展运算符的作用

扩展运算符可以用于以下场景：

• 数组的展、合并、复制和解构赋值
• 对象的展开、合并、复制和解构赋值
• 函数参数的传递和返回值的处理

---

扩展运算符在数组中的应用

数组的展开

使用扩展运算符可以将一个数组展开成多个元素，例如：

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

数组的合并

使用扩展运算符可以将多个数组合并成一个数组，例如：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1,2, 3, 4]

数组的复制

使用扩展运算符可以复制一个数组，例如：

const arr1 = [1, 2];
const arr2 = [...arr1];
console.log(arr2); // [1, 2]

数组的解构赋值

数组解构赋值是一种语法，它允许我们从数组中提取值并将它们赋给变量。数组解构赋值的语法使用方括号（[]）来表示要解构的数组，然后通过等号（=）将解构的值赋给变量。
关于数组解构赋值，总结5点。
关于解构赋值的相关内容也可以去看之前的一篇文章，有详解。
传送门：优雅而高效的JavaScript——解构赋值

• 基本用法：

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3

• 忽略某些元素：

const arr = [1, 2, 3, 4, 5];
const [, , c, d] = arr;

console.log(c); // 输出: 3
console.log(d); // 输出: 4

• 不定元素：

const arr = [1, 2, 3, 4, 5];
const [a, ...rest] = arr;

console.log(a);     // 输出: 1
console.log(rest);  // 输出: [2, 3, 4, 5]

• 默认值

const arr = [1];
const [a, b = 2] = arr;

console.log(a); // 输出: 1
console.log(b); // 输出: 2

• 交换变量

let a = 1;
let b = 2;
[a, b] = [b, a];

console.log(a); // 输出: 2
console.log(b); // 输出: 1

---

扩展运算符在对象中的应用

对象的展开

使用扩展运算符可以将一个对象展开成多个属性，例如：

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

对象的合并

使用扩展运算符可以将多个对象合并成一个对象，例如：

const obj1 = { a: , b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

对象的复制

使用扩展运算符可以复制一个对象，例如：

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1console.log(obj2); // { a: 1, b: 2 }

对象的解构赋值

使用扩展运算符可以将一个对象解构赋值给多个变量，例如：

const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;
console.log(a, rest); // 1 { b: 2, c: 3 }

---

扩展运算符在函数中的应用

函数参数的传递

使用扩展运算符可以将一个数组或对象作为函数的参数传递，例如：

function sum(a, b, c) {
  return a + b + c}
const arr = [1, 2, 3];
console.log(sumarr)); // 6

function merge(obj1, obj2) {
  return { ...obj1, ...obj2 };
}
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
console.log(merge(obj1, obj2)); // { a: 1, b: 2, c: 3, d: 4 }

函数返回值的处理

使用扩展运算符可以将一个数组或对象作为函数的返回值处理，例如：

function range(start, end) {
  return [...Array(end - start + 1)].map((_, i) => start + i);
}
console.log(range(1, 5)); // [1, 2, 3, 4, 5]

function clone(obj) {
  return { ...obj };
}
const obj1 = { a: 1, b: 2 };
const obj2 = clone(obj1);
console.log(obj2); // { a: 1, b: 2 }

---

扩展运算符的注意事项

扩展运算符的使用限制

扩展运算符只能用于可迭代对象（如数组、字符串、Set、Map等），不能用于普通对象。

扩展运算符的性能问题

性能问题主要是由于扩展运算符在使用时会创建新的数组或对象，导致内存占用增加和对象复制的开销。特别是在大型数据集上使用扩展运算符时，会占用较多的内存并导致性能下降。

另外，使用扩展运算符进行浅拷贝时，对于嵌套的对象或数组，仅会复制引用而不是真正的拷贝。这可能导致某些意外的副作用，因为原始对象的修改会影响到被复制的对象。

为了解决性能问题，可以考虑以下几点：

• 对于大型数据集，尽量避免在循环中重复使用扩展运算符。可以考虑使用其他高效的方法来处理数据集，比如使用迭代器、forEach等。

• 如果需要对数组进行操作，并且不需要创建新的数组，可以直接在原始数组上进行操作，避免使用扩展运算符。

• 对于深拷贝需求，可以选择其他优化的方法，如使用专门的深拷贝函数或库来处理对象和数组的复制。

扩展运算符的实战

以下是一些使用扩展运算符实战中的代码：

// 数组的展开、合并、复制和解构赋值
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
const arr4 = [...arr1];
const [a, b] = arr1;

// 对象的展开、合并、复制和解构赋值
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
const obj4 = { ...obj1 };
const { a, b } = obj1;

// 函数参数的传递和返回值的处理
function sum(a, b, c) {
  return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6

function merge(obj1, obj2) {
  return { ...obj1, ...obj2 };
}
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
console.log(merge(obj1, obj2)); // { a: 1, b: 2, c: 3, d: 4 }

总结

扩展运算符是一种非常有用的语法，它可以在数组、对象和函数调用等场景中展开数组或对象，可以实现浅拷贝，实现数组的展开、合并、复制和解构赋值，对象的展开、合并、复制和解构赋值，以及函数参数的传递和返回值的处理。但是，在使用扩展运算符时需要注意其使用限制和性能问题。

---