数据存储及对象拷贝_内存数据拷贝到对象-CSDN博客

本文链接：https://blog.csdn.net/java_vava2/article/details/119994254

本文详细介绍了JavaScript中的浅拷贝和深拷贝概念，包括它们的区别以及如何通过不同方法实现。文章通过实例展示了数组和对象的浅拷贝与深拷贝操作，包括遍历赋值、slice方法、Object.assign()以及JSON.parse和递归等实现方式，并探讨了在实际编程中如何选择合适的拷贝策略。

摘要由CSDN通过智能技术生成

基本数据类型以值的方式存储在内存中而对象在存储的是地址。在一处修改对象中的值在每个调用的地方都会修改。可以通过拷贝的方式创建新的对应关系。
大多数情况下存储数据的对象会遇到拷贝需求（数据中没方法）

数组拷贝

浅拷贝：只拷贝当前对象自身的属性（第一层），对属性的属性无法实现完全拷贝

方式一、遍历数组依次赋值

const arr1 = [1,2,3,['a','b','c']]
const arr2 = []
for(let i=0; i<arr1.length; i++){
  arr2.push(arr[i])
}
arr1[0] = 10
arr1[3][0] = 'q'
console.log(arr1,arr2) //[10, 2, 3, ["q", "b", "c"]] , [1, 2, 3, ["q", "b", "c"]]

方式二、利用splice方法

const arr1 = [1,2,3,['a','b','c']]
const arr2 = arr1.slice()
arr1[0] = 10
arr1[3][0] = 'q'
console.log(arr1,arr2) //[10, 2, 3, ["q", "b", "c"]] , [1, 2, 3, ["q", "b", "c"]]

深拷贝：完全拷贝(见对象拷贝)

对象拷贝

浅拷贝

const obj1 = {
	name: 'jack',
	age: 18,
	friend: { gender: '男'}
}
const obj2 = {}
for (let k in obj1) {
  obj2[k] = obj1[k]
}
obj1.name = 'rose'
obj1.friend.gender = '女'
console.log(obj1,obj2)  //name: "rose", friend: {{ gender: '女'}} ; name: "18", friend: {{ gender: '女'}}

方式二、利用assign() 方法

const obj1 = {
	name: 'jack',
	age: 18,
	friend: { gender: '男'}
}
const obj2 = Object.assign({},obj1)
obj1.name = 'rose'
obj1.friend.gender = '女'
console.log(obj1,obj2)  //{name: "rose",age: 18, friend: {{ gender: '女'}}} ; {name: "jack", age: "18", friend: {{ gender: '女'}}

深拷贝

方式一、利用JSON对象。由于stringify无法对函数转化成json所有包含函数对象时无法使用JSON方法

const obj1 = {
	name: 'jack',
	age: 18,
	friend: { gender: '男'}
}
const obj2 = JSON.parse(JSON.stringify(obj1))  
console.log(obj2)// {name: "jack", age: 18, friend: {gender: '女'}}
obj1.name = 'rose'
obj1.friend.gender = '女'
console.log(obj1,obj2)//{name: "rose", age: 18, friend: {gender: '女'}} {name: "jack", age: 18, friend: {gender: '男'}}

方式二、递归，遍历判断原始值的类型，原始值直接拷贝，对象值再遍历

const obj1 = {
	name: 'jack',
	age: 18,
	friend: { gender: '男'}
}
const obj2 = {}
function deepCopy(sourse, target){
  for(let k in sourse) {
    //对属性值进行类型检测
    if (typeof sourse[k] ==='object' &&sourse[k] !== null){
      //对象处理： 再遍历 
      //target[k]不存在，应该先设置为对象才行
      target[k] = sourse[k] instanceof Array ? []: {}
      deepCopy(sourse[k] ,target[k])
    }
    //原始值处理
    target[k] = sourse[k]
  }
}
deepCopy(obj1, obj2)
obj1.name = 'rose'
obj1.friend.gender = '女'
console.log(obj1,obj2)//{name: "rose", age: 18, friend: {gender: '女'}} {name: "jack", age: 18, friend: {gender: '男'}}