JS--对象数组深拷贝的方法

拼搏现实的明天。 2023-10-02 21:16 13阅读 0赞

原文网址：[JS--对象数组深拷贝的方法\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN]

## 简介 ##

本文用示例介绍JavaScript对象数组深拷贝的方法。

## 问题描述 ##

对于普通数组（数组元素为数字或者字符串），深拷贝很简单，拷贝之后两个数组指针指向的存储地址不同，从而完成深拷贝。

ar test = [1,2,3];//原数组
    var testCopy = [].concat(test);//拷贝数组
    testCopy[0]=4;
    console.log(test);// [1,2,3]
    console.log(testCopy);//[4,2,3]

对于对象数组

//形如
    var objArr=[{"name":''weifeng"},{"name":"boy"}]

如果还是利用上述的\[\].concat()方法拷贝数组，则获取的结果仍然是浅拷贝，改变一个数组的内容，另一个数组的内容会改变。例子：

从例子上可以看出，这种对于对象数组的拷贝，由于数组内部属性值为引用对象，因此整个拷贝还是浅拷贝，拷贝之后数组各个值的指针还是指向相同的存储地址。

## 解决方案 ##

### 方案1：JSON转换（不推荐） ###

ar test = [{"name":"demi"},{"name":"lily"}];//原数组
    var testCopy = [].concat(JSON.parse(JSON.stringify(test)));//转换成json再转换成对象实现深拷贝
    testCopy[1].name="test";
    console.log(test);// [{"name":"demi"},{"name":"lily"}]
    console.log(testCopy);//[{"name":"demi"},{"name":"test"}]

仅在原对象包含可序列化值类型且没有任何循环引用时才有效。不可序列化值类型的一个例子：Date 对象 - Date 对象在JSON.stringify时会被转化为 String，JSON.parse 只能将其解析为字符串而无法解析回其原始的 Date 对象。

可序列化的值类型（没问题的类型）有：Boolean，Number，String，对象，数组

不可序列化的值类型（有问题的类型）有（以下问题都发生在JSON.stringify时）：

1.  undefined，Function，Symbol 时，它被忽略掉
2.  Infinity，NaN 会被变成 null
3.  Date 对象会被转化为 String (默认调用date.toISOString())

### 方案2：lodash的cloneDeep（推荐） ###

const _ = require('lodash');
    
    let one_brand = [
        {name: 'A', count: 1, value: Infinity},
        {name: 'B', count: 2},
    ]
    
    // 深拷贝
    let two_brand = _.cloneDeep(one_brand);
    
    console.log("改变前:")
    console.log(one_brand) 
    console.log(two_brand) 
    
    two_brand[1].count = 0;
    
    console.log("改变后:")
    console.log(one_brand) 
    console.log(two_brand)

结果

改变前:
    [ { name: 'A', count: 1, value: Infinity },
      { name: 'B', count: 2 } ]
    [ { name: 'A', count: 1, value: Infinity },
      { name: 'B', count: 2 } ]
    改变后:
    [ { name: 'A', count: 1, value: Infinity },
      { name: 'B', count: 2 } ]
    [ { name: 'A', count: 1, value: Infinity },
      { name: 'B', count: 0 } ]

[JS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126943860