JavaScript展开运算符

JavaScript展开运算符

展开运算符（Spread Operator） 是 JavaScript 中的一种语法，使用 ... 表示。它可以将数组、对象或字符串“展开”为独立的元素，常用于函数调用、数组操作和对象操作。

1. 展开运算符的基本用法

(1) 展开数组

• 将数组展开为独立的元素。

示例：

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出：[1, 2, 3, 4, 5]

(2) 展开对象

• 将对象展开为独立的键值对。

示例：

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

(3) 展开字符串

• 将字符串展开为独立的字符。

示例：

const str = 'hello';
const chars = [...str];
console.log(chars); // 输出：['h', 'e', 'l', 'l', 'o']

2. 展开运算符的应用场景

(1) 函数调用

• 将数组展开为函数的参数。

示例：

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

(2) 数组操作

• 合并数组。
• 复制数组。

示例：

// 合并数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // 输出：[1, 2, 3, 4]

// 复制数组
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // 输出：[1, 2, 3]

(3) 对象操作

• 合并对象。
• 复制对象。

示例：

// 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // 输出：{ a: 1, b: 2, c: 3, d: 4 }

// 复制对象
const original = { a: 1, b: 2 };
const copy = { ...original };
console.log(copy); // 输出：{ a: 1, b: 2 }

(4) 字符串操作

• 将字符串转换为数组。

示例：

const str = 'hello';
const chars = [...str];
console.log(chars); // 输出：['h', 'e', 'l', 'l', 'o']

3. 展开运算符的注意事项

(1) 浅拷贝：

• 展开运算符只能进行浅拷贝，嵌套对象或数组不会被深拷贝。

const original = { a: { b: 1 } };
const copy = { ...original };
copy.a.b = 2;
console.log(original.a.b); // 输出：2（原对象也被修改）

(2) 对象展开的顺序：

• 如果对象中有重复的键，后面的值会覆盖前面的值。

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

(3) 不可展开非可迭代对象：

• 展开运算符只能用于可迭代对象（如数组、字符串、Map、Set 等）。

const obj = { a: 1, b: 2 };
const arr = [...obj]; // 报错：TypeError: obj is not iterable

总结

场景	示例	描述
函数调用	sum(...numbers)	将数组展开为函数参数
数组合并	[...arr1, ...arr2]	合并多个数组
数组复制	[...original]	创建数组的浅拷贝
对象合并	{ ...obj1, ...obj2 }	合并多个对象
对象复制	{ ...original }	创建对象的浅拷贝
字符串展开	[...str]	将字符串展开为字符数组

展开运算符是 JavaScript 中非常实用的语法，可以简化数组、对象和字符串的操作，提升代码的可读性和简洁性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github