JavaScript深拷贝与浅拷贝

一、拷贝数据的方法

1. 直接赋值给一个变量——浅拷贝

let obj = { username: 'kobe', age: 39, sex: { option1: '男', option2: '女' } };	
let obj1 = obj;
obj1.sex.option1 = '不男不女'; // 修改复制的对象会影响原对象
console.log(obj);
/*
{ username: 'kobe',
  age: 39,
  sex: { option1: '不男不女', option2: '女' } 
}
*/

2. Object.assign()——浅拷贝

let obj = { username: 'kobe', age: 39, sex: { option1: '男', option2: '女' } };
let obj2 = {};
Object.assign(obj2, obj);
obj2.sex.option1 = '女'; // 修改复制的对象会影响原对象
console.log(obj);
/*
{ username: 'kobe',
  age: 39,
  sex: { option1: '女', option2: '女' } 
}
*/

3. Array.prototype.concat()——浅拷贝

let arr = [1, 3, { username: 'kobe' }];
let arr2 = arr.concat();
arr2[2].username = 'a';
console.log(arr);	// [ 1, 3, { username: 'a' } ]

4. Array.prototype.slice()——浅拷贝

let arr = [1, 3, { username: 'kobe' }];
let arr2 = arr.slice();
arr2[2].username = 'a';
console.log(arr);	// [ 1, 3, { username: 'a' } ]

5. JSON.parse(JSON.stringify())——深拷贝

二、实现深拷贝

function deepClone(obj) {
    let objClass = Object.prototype.toString.call(obj).slice(8, -1);
    if (objClass !== 'Object' && objClass !== 'Array') {
        return obj;
    };
    let result = (objClass === 'Object') ? {} : [];
    // 遍历目标对象
    for (let key in obj) {
        let value = obj[key];
        if (Object.prototype.toString.call(value).slice(8, -1) === "Object" || 'Array') {
            result[key] = deepClone(value);
        } else {
            result[key] = obj[key];
        }
    }
    return result;
}
let obj3 = { username: 'kobe', age: 39, sex: { option1: '男', option2: '女' } };
let obj4 = deepClone(obj3);
obj4.sex.option1 = '不男不女'; // 修改复制后的对象不会影响原对象
console.log(obj4, obj3);
/*
{ username: 'kobe',
  age: 39,
  sex: { option1: '不男不女', option2: '女' } 
} 
{ username: 'kobe',
  age: 39,
  sex: { option1: '男', option2: '女' } 
}
*/