js 对象深拷贝_数组、对象的深拷贝

目录

• 1、深拷贝背景
• 2、一层深拷贝(数组、对象)
• 3、多层深拷贝

一、深拷贝背景

我们需要得到一份新的data，增删改查操作都不会影响原始数据。请问如何实现，如下

var arr = [
  { number: 1 },
  { number: 2 },
  { number: 3 }
];
var newarr = arr;
newarr[0]=1;
console.log(arr,newarr)

原因是因为应用类型的赋值，只是修改了指针的指向 。可查MDN数据类型

二、数组的一层拷贝

1. slice
2. concat
3. [...]
4. 循环

 var arr = [1,2,3];
 var arr1,arr2,arr3;
 arr1 = arr.slice(0);
 arr2 = arr.concat();
 arr3 = [...arr];
 arr[0]=100;
 console.log(arr,arr1,arr2,arr3);

二.一、对象的一层拷贝

1. Object.assign
2. {...}

 var obj ={
   name:'zh',
   age:30
 }
 var obj1,obj2;
 obj1 = Object.assign({},obj);
 obj2 = {...obj};
 obj.name = '你全家都叫zh'
 console.log(obj,obj1,obj2);

三、多层深拷贝

思路:

1. 非Object类型，直接赋值
2. 递归目标对象的每一项

// 深拷贝
 var array = [
   { number: 1 },
   { number: 2 },
   { number: 3 }
 ];

 function shencopy(obj){
   if(typeof obj !== 'object'){
      return obj
   }
   var res = Array.isArray(obj)?[]:{};
   for(let i in obj){
      res[i] = shencopy(obj[i]);
   }
      return res
 }
 console.log(shencopy(array));

PS:涉及知识点

1、基本数据类型、应用类型 MDN

2、typeof返回 MDN

3、数组、对象判断

var arr = [1,2,3];
var obj = {
    name:'zh'
}

//方法一 constructor
obj.constructor === Object
arr.constructor === Array

// 方法二 instanceof
arr instanceof Array
obj instanceof Object

//方法三 Object.prototype.toString
Object.prototype.toString.call(arr) === "[object Array]"
Object.prototype.toString.call(obj) === "[object Object]"

// 方法四 Array.isArray
Array.isArray(arr)

4、Object.prototype.toString.call()引发的思考 查看

为什么判断对象、数组要用Object的toString 而不用别的toString？

5、for in / for of

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。 for...of语句在可迭代对象（包括 Array， Map， Set， String， TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句