2022-09-26 11:59

JavaScript深拷贝的几种法

王姐姐

WEB前端

(468)

(0)

收藏

应用场景

JavaScript中,Object是引用类型,把对象objA赋值给objB之后,改变objB的值,objA会跟着改变。这是因为默认执行浅拷贝,也就是在内存中只复制了一个指针给了objB,内存中的数据本身并没有被复制。

如果我们需要一个深拷贝,也就是执行 objB = objA 之后,让 objB 和 objA 再也没有直接关联,该如何操作?

方法一

ES6新特性

const clone = {...original}

示例:

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

注意: 这种方式只能用于单层json对象,也就是对象中的每个value都是基本类型,没有嵌套。

方法二

ES6新特性

const clone = Object.assign({}, original)

示例:

var a = { key1: 1 };
var b = Object.assign({}, a);
b.a-=key1 = 2
console.log(a) // {key1: 1}

注意: 这种方式只能用于单层json对象,也就是对象中的每个value都是基本类型,没有嵌套。

方法三

const clone = JSON.parse(JSON.stringify(original));

这个是可以对多层json对象进行拷贝的

示例:

var a = { 
          key1: {
            subKey: 1
          }
        };
var b = JSON.parse(JSON.stringify(a));
b.key1.subKey = 2
console.log(a)
//打印结果
{
  key1: {
          subKey: 1
        }
}

注意: 使用这个方法,对象中不能有Date, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays这些数据类型。

方法四

自定义深拷贝函数。

function deepClone(o1, o2) {
    for (let k in o2) {
        if (typeof o2[k] === 'object') {
            o1[k] = {};
            deepClone(o1[k], o2[k]);
        } else {
            o1[k] = o2[k];
        }
    }
}

方法五

使用第三方库

例如:

lodash.clonedeep

angular.copy

jQuery.extend()

————————————————

原文链接:https://blog.csdn.net/gang544043963/article/details/107196754

0条评论

点击登录参与评论