JavaScript 数组拷贝全攻略：从基础到高级的10种实现方式

1. JavaScript数组拷贝基础概念

数组拷贝是JavaScript开发中最常见的操作之一，但很多新手开发者往往低估了它的复杂性。简单来说，数组拷贝可以分为两种基本类型：浅拷贝和深拷贝。浅拷贝只复制数组的第一层元素，而深拷贝则会递归复制所有嵌套的对象和数组。

在实际项目中，我经常看到开发者因为不理解这两种拷贝方式的区别而踩坑。比如修改拷贝后的数组却意外影响了原数组，或者在处理复杂数据结构时遇到性能问题。理解这些基本概念，能帮助你在开发中避免90%的数组操作问题。

提示：判断一个拷贝方法是浅拷贝还是深拷贝，最简单的方式就是看它是否能正确处理嵌套对象。如果嵌套对象被共享，那就是浅拷贝；如果完全独立，就是深拷贝。

JavaScript中的数组是引用类型，这意味着当你直接将一个数组赋值给另一个变量时，实际上只是复制了引用，而不是创建新的数组。这就是为什么我们需要专门的拷贝方法。举个例子：

const original = [1, 2, {name: '张三'}]; const fakeCopy = original; // 这不是拷贝，只是引用复制 fakeCopy[0] = 100; console.log(original[0]); // 输出100，原数组被修改了

2. 浅拷贝的8种实现方式

2.1 扩展运算符（Spread Operator）

扩展运算符是ES6引入的最便捷的浅拷贝方法，也是我在日常开发中最常用的方式。它的语法简洁明了，三个点(...)就能完成拷贝：

const original = [1, 2, {name: '李四'}]; const copy = [...original]; // 修改基本类型 copy[0] = 100; console.log(original[0]); // 1 (未改变) // 修改对象类型 copy[2].name = '王五'; console.log(original[2].name); // '王五' (被改变)

这种方法的优点是代码简洁，可读性强，特别适合React的状态更新场景。但要注意它只能拷贝可枚举的属性，且性能上不如一些原生方法快。

2.2 slice()方法

Array.prototype.slice()是我在ES5时代最常用的拷贝方法。不传参数时，它会返回原数组的浅拷贝：

const colors = ['red', 'green', {code: 'blue'}]; const colorsCopy = colors.slice(); colorsCopy[1] = 'GREEN'; console.log(colors[1]); // 'green' (未改变) colorsCopy[2].code = 'BLUE'; console.log(colors[2].code); // 'BLUE' (被改变)

slice()方法的优势在于兼容性好，所有浏览器都支持，而且在V8引擎中有优化，性能相当不错。我在处理大型数组时经常会优先考虑这个方法。

2.3 concat()方法

concat()方法通常用于数组合并，但传入空数组或不传参数时，它也能实现浅拷贝：

const langs = ['JavaScript', 'Python', {name: 'Java'}]; const langsCopy = langs.concat(); langsCopy[0] = 'JS'; console.log(langs[0]); // 'JavaScript' (未改变) langsCopy[2].name = 'JAVA'; console.log(langs[2].name); // 'JAVA' (被改变)

虽然concat()能实现拷贝，但在现代开发中，我建议优先使用扩展运算符，因为它的意图更明确，代码更简洁。

2.4 Array.from()方法

Array.from()是ES6新增的方法，主要用途是将类数组对象转为数组，但也可以用来做浅拷贝：

const sets = [new Set([1]), new Set([2]), {type: 'set'}]; const setsCopy = Array.from(sets); setsCopy[0] = new Set([10]); console.log(sets[0]); // Set {1} (未改变) setsCopy[2].type = 'SET'; console.log(sets[2].type); // 'SET' (被改变)

这个方法在处理特殊数据结构时特别有用，比如将NodeList转换为数组并拷贝。我在处理DOM操作时经常用到这个组合技巧。

2.5 map()方法

map()方法本意是数组映射，但使用恒等函数(x => x)也能实现浅拷贝：

const data = [1, 2, {id: 101}]; const dataCopy = data.map(item => item); dataCopy[1] = 200; console.log(data[1]); // 2 (未改变) dataCopy[2].id = 202; console.log(data[2].id); // 202 (被改变)

虽然这种方法能工作，但我不推荐专门用它来做拷贝，因为它的意图不够明确，性能也比slice()稍差。

2.6 filter()方法

与map()类似，filter()也可以"滥用"来实现浅拷贝：

const nums = [5, 10, {value: 15}]; const numsCopy = nums.filter(() => true); numsCopy[0] = 50; console.log(nums[0]); // 5 (未改变) numsCopy[2].value = 150; console.log(nums[2].value); // 150 (被改变)

这种方法看起来有些取巧，在实际项目中我几乎不会使用，知道有这个可能性就好。

2.7 reduce()方法

reduce()是功能最强大的数组方法之一，当然也能实现浅拷贝：

const items = ['apple', 'banana', {fruit: 'cherry'}]; const itemsCopy = items.reduce((acc, current) => { acc.push(current); return acc; }, []); itemsCopy[1] = 'BANANA'; console.log(items[1]); // 'banana' (未改变) itemsCopy[2].fruit = 'CHERRY'; console.log(items[2].fruit); // 'CHERRY' (被改变)

虽然这种方法展示了reduce的灵活性，但在实际项目中，除非你已经在使用reduce处理数组，否则没必要专门用它来做拷贝。

2.8 循环拷贝（for/while）

最原始的拷贝方式就是使用循环，这也是所有高级方法的基础：

// for循环实现 const original = ['a', 'b', {title: '标题'}]; const copy = []; for (let i = 0; i < original.length; i++) { copy[i] = original[i]; } // while循环实现 const source = [10, 20, [30, 40]]; const target = []; let i = 0; while (i < source.length) { target[i] = source[i]; i++; }

这种方法虽然笨拙，但在某些特殊场景下很有用，比如需要过滤某些元素时，或者在性能关键的代码中可以做更多优化。

3. 深拷贝的2种核心方法

3.1 JSON.parse & JSON.stringify

这是最简单的深拷贝方法，也是我见过用得最多的方法：

const complexArray = [ {id: 1, name: '项目1'}, [2, 4, 6], new Date(), function test() { console.log('test'); } ]; const deepCopy = JSON.parse(JSON.stringify(complexArray)); deepCopy[0].id = 100; console.log(complexArray[0].id); // 1 (未改变) // 但有以下问题： console.log(deepCopy[2]); // 日期变成了字符串 console.log(deepCopy[3]); // undefined (函数丢失)

我在实际项目中使用这个方法时踩过不少坑。它无法处理函数、undefined、循环引用，还会把Date对象转为字符串。但对于简单的数据结构，它仍然是一个快速有效的解决方案。

3.2 递归深拷贝函数

要实现完整的深拷贝，我们需要自己编写递归函数：

function deepClone(obj, hash = new WeakMap()) { // 处理基本类型和null if (obj === null || typeof obj !== 'object') { return obj; } // 处理日期对象 if (obj instanceof Date) { return new Date(obj); } // 处理正则表达式 if (obj instanceof RegExp) { return new RegExp(obj); } // 处理循环引用 if (hash.has(obj)) { return hash.get(obj); } // 创建新对象/数组 const cloneObj = new obj.constructor(); hash.set(obj, cloneObj); // 递归拷贝所有属性 for (const key in obj) { if (obj.hasOwnProperty(key)) { cloneObj[key] = deepClone(obj[key], hash); } } return cloneObj; } // 使用示例 const original = { arr: [1, 2, {name: '测试'}], date: new Date(), regex: /test/g }; const cloned = deepClone(original);

这个实现考虑了各种边界情况，包括循环引用、特殊对象等。我在项目中通常会把它放在工具库中，需要深拷贝时直接调用。虽然性能不如JSON方法，但功能完整。

4. 拷贝方法的选择与实践建议

4.1 性能对比

在实际项目中，我经常需要权衡拷贝方法的性能。以下是我做的简单测试结果（Chrome浏览器）：

注意：这些测试结果会因JavaScript引擎、数据结构和数据量而变化，建议在关键路径上自己做性能测试。

4.2 React/Vue中的最佳实践

在现代前端框架中，不可变数据是核心概念。以React为例：

// 好的做法 - 使用浅拷贝创建新状态 const [todos, setTodos] = useState([{text: '学习React', done: false}]); function addTodo(newTodo) { setTodos([...todos, newTodo]); // 使用扩展运算符 } // 更好的做法 - 对于大型数组 function removeTodo(index) { setTodos(todos.slice(0, index).concat(todos.slice(index + 1))); }

在Vue中，由于响应式系统的存在，有时需要特别注意：

// Vue中需要确保触发响应式更新 this.todos = [...this.todos, newTodo]; // 正确 this.todos.push(newTodo); // 不会触发视图更新

4.3 常见问题解决方案

问题1：如何拷贝包含函数的数组？

JSON方法会丢失函数，这时需要使用递归深拷贝：

const withFunction = [ {action: function() { console.log('工作') }}, {action: function() { console.log('休息') }} ]; // JSON方法不行 const badCopy = JSON.parse(JSON.stringify(withFunction)); console.log(badCopy[0].action); // undefined // 使用递归深拷贝 const goodCopy = deepClone(withFunction); goodCopy[0].action(); // '工作'

问题2：如何处理循环引用？

循环引用是指对象相互引用形成环，这在复杂数据结构中很常见：

const objA = {name: 'A'}; const objB = {name: 'B', ref: objA}; objA.ref = objB; // 形成循环引用 // JSON方法会报错 // JSON.parse(JSON.stringify(objA)); // TypeError // 使用带有WeakMap的深拷贝函数 const cloned = deepClone(objA); console.log(cloned.ref.ref.name); // 'A'

问题3：如何拷贝特殊对象如Map/Set？

ES6新增的数据结构需要特殊处理：

// 使用structuredClone API（现代浏览器支持） const original = { set: new Set([1, 2, 3]), map: new Map([['a', 1]]), date: new Date() }; const cloned = structuredClone(original); console.log(cloned.set.has(1)); // true console.log(cloned.map.get('a')); // 1

对于不支持structuredClone的环境，需要使用专门的库如lodash的cloneDeep方法。