JS数组和对象实现深拷贝

数组

1. for 循环

//for 循环 copy
function copyFun(arr) {
    let copyArr = []
    for(let i = 0; i < arr.length; i++){
      copyArr.push(arr[i])
    }
    return copyArr;
}

let arr1 = [1, 2, 3, 4];
let arr2 = copyFun(arr1); //[1, 2, 3, 4]

console.log(arr2) //[1, 2, 3, 4]
arr2[0] = 10;
console.log(arr1) //[1, 2, 3, 4]
console.log(arr2) //[10, 2, 3, 4]

2. slice 方法实现深拷贝

let arr1 = [1, 2, 3, 4];
let arr2 = arr1.slice(0);
arr2[0] = 10;
console.log(arr1); //[1, 2, 3, 4]
console.log(arr2); //[10, 2, 3, 4]

3. concat 方法实现深拷贝

let arr1 = [1, 2, 3, 4];
let arr2 = arr1.concat();
arr2[0] = 10;
console.log(arr1); //[1, 2, 3, 4]
console.log(arr2); //[10, 2, 3, 4]

4. es6 扩展运算实现深拷贝

let arr1 = [1, 2, 3, 4];
let arr2 = [...arr1];
arr2[0] = 10;
console.log(arr1) //[1, 2, 3, 4]
console.log(arr2) //[10, 2, 3, 4]

5. JSON.parse() 与 JSON.stringify()

let arr1 = [1, 2, 3, 4];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2[0] = 10;
console.log(arr1) //[1, 2, 3, 4]
console.log(arr2) //[10, 2, 3, 4]

对象

1. 对象的循环

function copyFun(obj) {
    let copyObj = {};
    for(let key in obj){
      copyObj[key] = obj[key]
    }
    return copyObj
}

let person1 = {
    name: 'mox',
    age: 18,
    job: 'web'
}
let person2 = copyFun(person1);

person2.name = "mamo"
console.log(person1) // {age: 18, job: "web", name: "mox"}
console.log(person2) // {age: 18, job: "web", name: "mamo"}

2. JSON.parse() 与 JSON.stringify()

let obj1 = {
    x: 1,
    y: {
      d: 1
    },
    a: undefined,
    b: function (n, m) {
      return n + m
    },
    c: Symbol("foo")
  };
  let obj2 = JSON.parse(JSON.stringify(obj1));
  console.log(obj1) //{x: 1, y: {d: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
  console.log(obj2) //{x: 1, y: {d: 1}}
  obj2.y.d = 2; //修改obj2.y.d
  console.log(obj1) //{x: 1, y: {d: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
  console.log(obj2) //{x: 2, y: {d: 2}}

此办法可实现多维对象的深拷贝。但是请注意：进行JSON.stringify() 序列化的过程中会把undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时），也就是null值正常保留。

3. es6 扩展运算

let person1 = {
    name: 'mox',
    age: 18,
    job: 'web'
}
let person2 = {...person1}
person2.name = "mamo"
console.log(person1) //{name: "mox", age: 18, job: "web"}
console.log(person2) //{name: "mamo", age: 18, job: "web"}

4. Object.assign()

请注意：Object.assign() 只能实现一维对象的深拷贝。

let obj1 = {x: 1, y: 2};
let obj2 = Object.assign({}, obj1);
console.log(obj1) // {x: 1, y: 2}
console.log(obj2) // {x: 1, y: 2}

obj2.x = 2; // 修改 obj2.x
console.log(obj1) // {x: 1, y: 2}
console.log(obj2) // {x: 2, y: 2}

let obj3 = {
    x: 1, 
    y: {
        d: 1
    }
};
let obj4 = Object.assign({}, obj3);
//console.log(obj3) // {x: 1, y: {d: 1}}
//console.log(obj4) // {x: 1, y: {d: 1}}

obj4.y.d = 2; // 修改 obj4.y.d
console.log(obj3) // {x: 1, y: {d: 2}}
console.log(obj4) // {x: 1, y: {d: 2}}