😗博主：小猫娃来啦
😗文章核心：优雅而高效的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等），不能用于普通对象。
扩展运算符的性能问题
性能问题主要是由于扩展运算符在使用时会创建新的数组或对象，导致内存占用增加和对象复制的开销。特别是在大型数据集上使用扩展运算符时，会占用较多的内存并导致性能下降。
另外，使用扩展运算符进行浅拷贝时，对于嵌套的对象或数组，仅会复制引用而不是真正的拷贝。这可能导致某些意外的副作用，因为原始对象的修改会影响到被复制的对象。
为了解决性能问题，可以考虑以下几点：
扩展运算符的实战
以下是一些使用扩展运算符实战中的代码：
// 数组的展开、合并、复制和解构赋值
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 }
总结
扩展运算符是一种非常有用的语法，它可以在数组、对象和函数调用等场景中展开数组或对象，可以实现浅拷贝，实现数组的展开、合并、复制和解构赋值，对象的展开、合并、复制和解构赋值，以及函数参数的传递和返回值的处理。但是，在使用扩展运算符时需要注意其使用限制和性能问题。