03 ES6的扩展运算符

扩展运算符（Spread Operator）是 ECMAScript 2015 (ES6) 引入的一种语法，用三个点 ... 表示。它提供了一种优雅的方式来扩展数组或对象中的元素或属性。以下是扩展运算符的一些常见用法：

数组的扩展

1. 合并数组：
   使用扩展运算符可以将多个数组合并为一个新数组。

   const firstArray = [1, 2, 3];
   const secondArray = [4, 5, 6];
   const combinedArray = [...firstArray, ...secondArray];
   // 结果: [1, 2, 3, 4, 5, 6]
   

2. 复制数组：
   扩展运算符可以用来复制数组，创建一个新数组，而不是引用同一个数组。

   const originalArray = [1, 2, 3];
   const copiedArray = [...originalArray];
   // copiedArray 是 originalArray 的一个浅拷贝
   

3. 在函数调用中扩展元素：
   可以将数组中的元素作为单独的参数传递给函数。

   const numbers = [1, 2, 3, 4];
   console.log(...numbers); // 相当于 console.log(1, 2, 3, 4);
   

对象的扩展

1. 合并对象：
   使用扩展运算符可以合并多个对象为一个新对象。

   const person = { name: 'Alice' };
   const details = { age: 30, city: 'New York' };
   const personWithDetails = { ...person, ...details };
   // 结果: { name: 'Alice', age: 30, city: 'New York' }
   

2. 复制对象：
   扩展运算符可以用来复制对象，创建一个新对象，而不是引用同一个对象。

   const originalObject = { a: 1, b: 2 };
   const copiedObject = { ...originalObject };
   // copiedObject 是 originalObject 的一个浅拷贝
   

3. 在函数调用中扩展属性：
   可以将对象的属性作为单独的参数传递给函数。

   function greet(name, age, city) {console.log(`Hello, ${name}! You are ${age} years old and live in ${city}.`);
   }const person = { name: 'Bob', age: 25, city: 'Los Angeles' };
   greet(...person);
   // 相当于 greet('Bob', 25, 'Los Angeles');
   

注意事项

• 扩展运算符进行的是浅拷贝，这意味着如果对象或数组中包含引用类型的数据，拷贝的将是引用，而不是深层的数据。
• 当合并对象时，后面的属性会覆盖前面的同名属性。
• 在函数调用中使用扩展运算符时，如果传入的是一个数组或对象，它们将被展开成单独的参数或属性。

扩展运算符提供了一种灵活且强大的方式来处理数组和对象，使得代码更加简洁和易于阅读。