JavaScript进阶-深浅拷贝

深浅拷贝

什么是浅拷贝？如何实现浅拷贝？什么是深拷贝？如何实现深拷贝？

浅拷贝
浅拷贝和深拷贝都是针对的引用类型，对值类型进行复制操作会对值进行一份拷贝，而对引用类型赋值，则会进行地址的拷贝，最终两个变量指向同一份数据

for-in遍历浅拷贝，通过遍历其对象属性

function shallowClone(source) {
    var target = {};
    for(var i in source) {
        if (source.hasOwnProperty(i)) {
            target[i] = source[i];
        }
    }
    return target;
}

Object.assign方法和展开运算符...实现

let a = {
  age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // Object.assign

let a = {
  age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // ...

深拷贝
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

通过 JSON.parse(JSON.stringify(object)) 解决

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

undefined、symbol和函数都会被忽略，不能解决循环引用的问题

深拷贝的核心问题是实现浅拷贝+递归

function isObject(x) { // 检测元素是否是对象
    return typeof obj === 'object' && obj != null;
}

function deepCopy(source) {
    if (!isObject(source)) return source; // 检测参数
    let target = Array.isArray( source ) ? [] : {} // 兼容数组
    for(let i in source) {
        if (source.hasOwnProperty(i)) {
            if (isObject(i)) {
                target[i] = deepCopy(source[i]); // 递归浅拷贝对象属性
            } else {
                target[i] = source[i];
            }
        }
    }

    return target;
}