js深拷贝与浅拷贝

1.区别:

  • 深拷贝和浅拷贝的使用场景是在复杂对象里,即对象的属性还是对象;
  • 浅拷贝是指只复制一层对象,当对象的属性是引用类型时,实质复制的是其引用,当引用指向的值改变时也会跟着变化;深拷贝是指复制对象的所有层级。

2.深拷贝实现

Json序列化与反序列化:

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}

 缺点:

  • 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  • undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。
  • 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。
  • 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。
  • 不可枚举的属性会被忽略
  • 对于引用类型:object,array,date,regexp,function,err,只能深拷贝对象和数组,对于其他种类的对象,会失真。这种方法比较适合平常开发中使用,因为通常不需要考虑对象和数组之外的类型。

最佳实现:(类似lodash的cloneDeep)

function isArray(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
}
function isObject(val) {
    return typeof val === 'object' && val !== null;
}

function deepCopy(obj2) {
    var obj = isArray(obj2) ? [] : {};
    for (var property in obj2) {
        if (isObject(obj2[property])) {
            obj[property] = deepCopy(obj2[property]);
        } else {
            obj[property] = obj2[property];
        }
    }
    return obj;
}

3.浅拷贝实现

  • Object.assign() 
  • Underscore —— _.clone()
  • lodash —— _.clone()
  • 数组中concat和slice方法

你可能感兴趣的:(web前端)