JS展开运算符|极客笔记

JS展开运算符

在JavaScript中，展开运算符（Spread Operator）是ES6新增的语法，它可以在函数调用、数组字面量和对象字面量中展开数组或对象。展开操作符在ES6中的正式称呼是Rest/Spread Properties，它可以取代函数中的apply方法实现展开操作。

使用展开运算符

1. 在函数调用中使用展开运算符

展开运算符可以将数组中的值展开作为参数传递给函数。例如：

function sum(a, b, c) {
  return a + b + c;
}

let numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

在上面的示例中，我们定义了一个sum函数来计算三个数的和，通过展开运算符...numbers将数组中的值展开传递给sum函数。

2. 在数组字面量中使用展开运算符

展开运算符可以将一个数组展开成另一个数组。例如：

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]

在这个示例中，我们通过...arr1将arr1数组展开，然后与后面的值合并成一个新的数组arr2。

3. 在对象字面量中使用展开运算符

展开运算符还可以在对象字面量中使用，用于将一个对象的属性展开到另一个对象中。例如：

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };

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

在这个示例中，我们使用展开运算符将obj1对象的属性展开到新的obj2对象中，同时添加了一个新的属性c。

场景示例

1. 合并数组

展开运算符可以方便地合并多个数组。例如：

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4]

2. 克隆数组

展开运算符可以快速克隆一个数组。例如：

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]

3. 合并对象

展开运算符可以将多个对象合并成一个新的对象。例如：

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2 }

4. 克隆对象

展开运算符也可以用于快速克隆一个对象。例如：

let obj1 = { a: 1, b: 2 };
let clonedObj = { ...obj1 };

console.log(clonedObj); // { a: 1, b: 2 }

注意事项

在使用展开运算符时需要注意以下几点：

展开运算符只能展开可迭代对象（如数组、字符串、Set、Map等），普通对象不能被展开。
展开运算符是浅拷贝，如果展开的属性是对象类型，只会拷贝对象的引用，而不会拷贝对象本身。
在对象展开运算符中，如果多个对象有相同的属性名，后面的属性会覆盖前面的属性。

总结

展开运算符是JavaScript中一个非常实用的语法特性，可以简化代码并提高代码的可读性。它在函数调用、数组字面量和对象字面量中都能发挥作用，用来展开数组和对象，方便地操作数据。在开发过程中，合理地运用展开运算符可以让代码更加简洁高效。

JS展开运算符