ES6 扩展操作符：详情和示例

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；****知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

ES6 中的扩展运算符（Spread syntax 或 Spread operator）由三个点 ... 表示，它在JavaScript中有多种用途，主要用于数组和对象的操作。下面详细介绍扩展运算符在数组和对象上的应用，并给出相应的示例代码。

一、数组的扩展运算符

1. 合并数组（Concatenate arrays）

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

2. 复制数组（Clone an array）

let originalArray = [1, 2, 3];
let copiedArray = [...originalArray]; // copiedArray = [1, 2, 3]
// 修改 copiedArray 不会影响 originalArray
copiedArray[0] = 'new'; 
console.log(copiedArray); // ['new', 2, 3]
console.log(originalArray); // [1, 2, 3]

3. 将数组作为函数参数传递（Passing array as arguments）

function myFunction(arg1, arg2, arg3) {
  console.log(arg1, arg2, arg3);
}

let args = [10, 20, 30];
myFunction(...args); // 输出：10 20 30

4. 尾部添加元素（Spreading into another array）

let baseArr = [0, 1];
let newArr = [...baseArr, 2, 3]; // newArr = [0, 1, 2, 3]

二、对象的扩展运算符

5. 浅复制对象（Shallow copy of an object）

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 }; // obj2 = { a: 1, b: 2 }
// 这里是浅复制，若属性值为引用类型，则内部引用还是共享的

6. 合并对象（Merge objects）

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

7. 展开对象属性到新对象（Spread properties into a new object）

let obj = { a: 1, b: 2 };
let newObj = { ...obj, c: 3 }; // newObj = { a: 1, b: 2, c: 3 }

三、注意事项

• 对于数组，扩展运算符确实会创建数组的浅复制，但对包含对象的数组而言，嵌套的对象仍然是引用复制。
• 对于对象，扩展运算符做的是浅层合并，如果源对象和目标对象有相同的属性键，则目标对象的属性值会被源对象覆盖。同样，如果属性值为对象，也会进行引用复制而非深度复制。 若要进行深度复制，需要额外使用递归或其他深拷贝的方法。