在 ES6 JavaScript 中，扩展操作符是一种使用三个点（...）语法的特殊操作符，它可以将一个对象或数组的内容展开，并将其作为单个元素传递给另一个对象或数组。这个特性非常实用，可以用来简化代码，提高可读性，甚至可以帮助我们更好地理解函数调用和参数传递以及数组的操作等问题。
1. 对象的展开
使用扩展操作符 ... 可以将一个对象展开，将该对象的所有可枚举属性作为单独的属性添加到另一个对象中。例如：
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }在这个示例中，obj2 中包含了 obj1 中的所有属性，并增加了 c: 3 属性。扩展操作符 ... 将 obj1 中的所有属性展开作为单独的属性添加到 obj2 中。
扩展操作符也可以用于合并两个对象。如果有相同的属性，则后一个对象中的属性值将覆盖前一个对象中的对应属性值。例如：
let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 3, c: 4 }在这个示例中，我们使用扩展操作符 ... 将 obj1 和 obj2 展开合并成一个新对象 obj3。由于 obj2 中包含了 b 属性，因此 obj3 中的 b 属性的值将会是 3，而不是 2。
2. 数组的展开
除了对象，扩展操作符也可以应用于数组。使用扩展操作符 ... 可以将一个数组展开，将该数组的所有元素作为单独的项传递给另一个数组。例如：
let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5]
在这个示例中，我们使用扩展操作符 ... 将数组 arr1 的所有元素展开作为单独的项添加到数组 arr2 中，从而创建了一个新的数组。
扩展操作符也可以用于合并两个数组。例如：
let arr1 = [1, 2]; let arr2 = [3, 4]; let arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4]
在这个示例中，我们使用扩展操作符 ... 将数组 arr1 和 arr2 的所有元素展开为单独的项，并将它们连接成一个新的数组 arr3。
3. 函数的参数展开
如果要将一个数组作为一个函数的参数传递，通常需要使用 apply() 方法。但是，在 ES6 JavaScript 中，我们可以使用扩展操作符 ... 来展开一个数组，然后将其元素作为单独的参数传递给函数。例如：
function add(a, b, c) {
return a + b + c;
}
let arr = [1, 2, 3];
let sum = add(...arr);
console.log(sum); // 6在这个示例中，我们使用扩展操作符 ... 来展开数组 arr 的所有元素，并将它们作为单独的参数传递给函数 add()。因此，sum 的值将会是 1 + 2 + 3 = 6。
4. 数组的复制
使用扩展操作符 ... 也可以用于复制一个数组。例如：
let arr1 = [1, 2, 3]; let arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
在这个示例中，我们使用扩展操作符 ... 将数组 arr1 中的所有元素展开作为单独的项并赋值给数组 arr2。由于是将数组的元素作为单独的项传递给 arr2，而不是将整个数组传递给 arr2，因此 arr2 即使在改变时也不会影响到 arr1。
5. 对象的浅拷贝
除了数组的复制，扩展操作符 ... 还可以用于对象的浅拷贝。例如：
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }在这个示例中，我们使用扩展操作符 ... 将对象 obj1 中的所有属性展开为单独的属性，并将这些属性作为单个项添加到一个新对象 obj2 中。由于这是一个浅拷贝，因此当更改某个属性时，它就会在两个对象中都发生变化。
6. 限制属性的复制
如果希望在将一个对象展开到另一个对象时限制一些属性的复制，可以使用对象解构和扩展操作符结合起来。例如：
let obj1 = { a: 1, b: 2, c: 3 };
let { b, ...obj2 } = obj1;
console.log(obj2); // { a: 1, c: 3 }在这个示例中，我们使用对象解构和扩展操作符结合起来，将对象 obj1 的属性 b 赋值给变量 b，将余下的属性展开为单独的项添加到对象 obj2 中。由于 b 已经被赋值到变量 b 中了，因此不包含 b 属性的对象就被赋值给了 obj2。
总结
扩展操作符 ... 是 ES6 JavaScript 中一个非常实用的特性，可以用于对象和数组的展开、合并、参数传递、复制以及限制属性的复制等操作。当我们在编写 JavaScript 代码时，了解并熟练掌握这个特性不仅可以提高代码的可读性和简洁性，还可以帮助我们更好地理解函数调用、参数传递以及数组操作等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470734e968c7c53b0e93685