JS数组直接赋值与深浅拷贝详解

作者：青柠时间：2026-10-25 21:33:35浏览：615

本文详细解析JavaScript中数组直接赋值导致的浅拷贝问题，以及slice、concat、展开运算符等浅拷贝方法的局限性。针对包含引用类型的数组，介绍了JSON序列化、jQuery extend及递归实现等深拷贝方案，帮助开发者避免数据共享引发的副作用。

在JavaScript中，数组的直接赋值实际上执行的是浅拷贝操作。由于JS中的对象引用存储的是内存地址，这种赋值方式使得新旧数组共享同一块内存空间。因此，当修改其中一个数组的内容时，另一个数组也会随之发生相应的变化。

var a =[1,2,3];
var b=a;
a[0]=30;
console.log(a,b);

//结果： [30, 2, 3]   [30, 2, 3]

当数组内部仅包含基本数据类型而不含引用类型时，可以使用slice()、concat()或Object.assign()等方法实现深拷贝。此时，修改其中一个数组的值，不会对另一个数组产生任何影响，两者完全独立。

数组的concat方法

var a=[1,2,3];
var b=[].concat(a); 
a[0]=30;
console.log(a,b);

//结果：[30, 2, 3]  [1, 2, 3]

使用es6的展开操作符： …arr

var a=[1,2,3];
var b=[].concat(a); 
var c=[...a]; 
a[0]=30;
console.log(a,b,c);

//结果：[30, 2, 3]  [1, 2, 3] [1, 2, 3]

利用split join map方法

let arr1=[1,2,3];
var newArr4 = arr1.join(" ").split(" ").map(function(i){
    return parseInt(i);
    
}); 
arr1[0]=30;
console.log(arr1,newArr4);

//VM1175:1 (3) [30, 2, 3] (3) [1, 2, 3]

如果数组内部包含引用类型（如对象或嵌套数组），上述slice()、concat()和assign()方法仅对非引用类型值进行深拷贝，而对引用类型值仍执行浅拷贝。这意味着修改嵌套对象中的属性，另一个数组中的对应部分也会随之改变。

深拷贝的核心定义是完全复制一个对象，即使该对象内部嵌套了其他对象，两者也能相互独立。修改其中一个对象的任何属性，都不会对另一个对象产生任何影响，确保数据的完全隔离。

第一种常见方法是通过JSON.stringify()将数组转换为字符串，再使用JSON.parse()将其解析回原始数组结构。这种方法简单直接，但无法处理函数、undefined或特殊对象类型。

let arr=[{a:1,b:2},{a:3,b:4}]; 
let arr1=JSON.parse(JSON.stringify(arr)); 
arr[0].a=10;
console.log(arr,arr1); 

//输出结果如下
(2) [{…}, {…}]
    0: {a: 10, b: 2}
    1: {a: 3, b: 4}

(2) [{…}, {…}]
    0: {a: 1, b: 2}
    1: {a: 3, b: 4}

第二种方法是利用jQuery库提供的$.extend()方法。通过设置第一个参数为true，可以实现深度合并与拷贝，从而处理包含引用类型的复杂数组结构。

let arr=[{a:1,b:2},{a:3,b:4}]; 
let arr1=$.extend(true,[],arr); 
arr[0].a=10;
console.log(arr,arr1); 

//输出结果如下
(2) [{…}, {…}]
    0: {a: 10, b: 2}
    1: {a: 3, b: 4}
    
(2) [{…}, {…}, contains: ƒ, each: ƒ, uniquelize: ƒ]
    0: {a: 1, b: 2}
    1: {a: 3, b: 4}

更多关于js数组直接赋值的问题和js数组的浅拷贝，深拷贝方法请查看下面的相关文章

作者最新文章

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

JavaScript新手常犯的编码错误与最佳实践指南

2026-11-04 22:12:38