zoukankan      html  css  js  c++  java
  • 如何深拷贝一个对象数组?

    一、背景

    某个项目里,存在一个对象数组,我用 lodashfilter() 函数,分别生成了 A、B 两个新的对象数组,但我遍历了 B 数组,改造里面的每一个对象,没想到引起 A 数组的里对象发生了变化,引发了错误。

    这是一个基础的,对引用类型——对象没有使用深拷贝的问题,我疏忽了,特此记录下。

    二、例子

    1、浅拷贝

    const _ = require('lodash');
    
    let one_brand = [
        {name: 'A', count: 1, value: Infinity},
        {name: 'B', count: 2},
    ]
    
    // 浅拷贝
    // 方法一
    let two_brand = one_brand.slice(0);
    // 方法二(推荐)
    let two_brand = _.clone(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) 
    
    

    return:

    改变前:
    [ { 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 } ]
    [ { name: 'A', count: 1, value: Infinity },
      { name: 'B', count: 0 } ]
    

    你会发现改变了 two_brand 的一个对象,one_brand 的那个对应的对象也改变了。这样不行。

    2、深拷贝

    const _ = require('lodash');
    
    let one_brand = [
        {name: 'A', count: 1, value: Infinity},
        {name: 'B', count: 2},
    ]
    
    // 深拷贝
    // 方法一
    let two_brand = one_brand.map(o => Object.assign({}, o));
    // 方法二
    let two_brand = one_brand.map(o => ({...o}));
    // 方法三(推荐)
    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) 
    
    

    return:

    改变前:
    [ { 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 } ]
    

    3、拓展

    其实网上还有一种方法:

    let two_brand = JSON.parse(JSON.stringify(one_brand))
    

    这种方法存在很大的问题。虽然他在 stackoverflow 是得票最多的一个答案。(https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript)

    它的主要缺点是,只限于处理可被 JSON.stringify() 编码的值。

    JSON.stringify() 将编码 JSON 支持的值。包含 Boolean,Number,String,以及对象,数组。其他任何内容都将被特殊处理。

    undefinedFunctionSymbol 时,它被忽略掉
    InfinityNaN 会被变成 null
    Date 对象会被转化为 String (默认调用date.toISOString())

    问:为什么JSON.stringify() 编码 JSON 支持的值那么少呢?

    因为JSON是一个通用的文本格式,和语言无关。设想如果将函数定义也stringify的话,如何判断是哪种语言,并且通过合适的方式将其呈现出来将会变得特别复杂。特别是和语言相关的一些特性,比如JavaScript中的Symbol。

  • 相关阅读:
    [CFNews] Ediscovery: 4 scenarios that call for computer forensics
    [CFNews] MacForensicsLab发布MacLockPick 3.0
    [CFNews] Logicube也欲分“山寨机”取证一杯羹
    [CFNews] Tableau 发布全功能只读接口T35689iu
    [转载] Windows 8 TypedURLsTime
    [CFNews] Guidance发布EnCase V7.04.01中文及英文版
    [CFNews] AIS Inc. 发布苹果取证产品MacResponse LE
    [CFNews] Office 20072010、PGP全盘加密快速破解,Passware Kit 11.7发布
    [CFNews] GSI发布EnCase v7.04
    [CFNews] Paraben发布ProjectAPhone新型号ICD8000
  • 原文地址:https://www.cnblogs.com/xjnotxj/p/9810534.html
Copyright © 2011-2022 走看看