js的深拷贝和浅拷贝含义与区别_javascript深拷贝和浅拷贝的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38230961/article/details/131472595

文章介绍了JavaScript中浅拷贝和深拷贝的基本概念，以及它们在处理引用类型数据时的区别。浅拷贝通过直接赋值或Object.assign方法实现，而深拷贝常用方法包括JSON.parse(JSON.stringify())。在处理对象和数组时，应优先选择深拷贝以避免数据修改的影响，如在Vue.js中通常使用cloneDeep方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基本概念

浅拷贝：只是复制了原数据的内存地址，其中任一数据元素发生改变，会影响另一个。

深拷贝：两个数据指向了不同的地址，数据元素发生改变时不会相互影响。

二、适用对象

js有两大数据类型有基本类型和引用类型

基本数据类型：Number、String、Boolean等

引用数据类型：Array、Object等

浅拷贝和深拷贝只适用于引用数据类型

三、浅拷贝

1、直接赋值方式

let obj = { a:1, arr:[2,3]};
let res = obj
console.log(res === obj)           // true，res和obj指向同一地址
console.log(res.arr === obj.arr)   // true，res和obj的元素也指向同一地址
obj.a=2
console.log(res)                   // { a:2, arr:[2,3]}
obj.arr[0]=4
console.log(res)                   // { a:2, arr:[4,3]}

2、Object.assign方式

let obj = { a:1, arr:[2,3]};
let res = Object.assign({}, obj)
// let res = {...obj}              // 等价上边的
console.log(res === obj)           // false，res和obj指向不同地址
console.log(res.arr === obj.arr)   // true，res和obj的元素指向同一地址
obj.a=2
console.log(res)                   // { a:1, arr:[2,3]}
obj.arr[0]=4
console.log(res)                   // { a:1, arr:[4,3]}

Object.assign就是新建一个变量，然后把老变量的所有属性，以赋值的方式赋给新变量。改变新对象的属性的值，如果这个属性是基本数据类型，则不会影响老变量，例如上图的a属性；如果这个属性是引用类型，会影响老变量，例如上图的arr属性

四、深拷贝

// 使用JSON的stringify和parse是深拷贝的一种方式，在vue里一般用cloneDeep
//（但是这个方法有坑，不建议使用，这里只是做个示例）

let obj = { a:1, arr:[2,3]};
let res = JSON.parse(JSON.stringify(obj))
console.log(res === obj)           // false
console.log(res.arr === obj.arr)   // false
obj.a=2
console.log(res)                   // { a:1, arr:[2,3]}
obj.arr[0]=4
console.log(res)                   // { a:1, arr:[2,3]}