一、背景
某个项目里,存在一个对象数组,我用 lodash
的 filter()
函数,分别生成了 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 是得票最多的一个答案。()
它的主要缺点是,只限于处理可被 JSON.stringify()
编码的值。
JSON.stringify()
将编码 JSON 支持的值。包含 Boolean,Number,String,以及对象,数组。其他任何内容都将被特殊处理。
undefined
,Function
,Symbol
时,它被忽略掉Infinity
,NaN
会被变成 nullDate
对象会被转化为 String (默认调用date.toISOString())问:为什么
JSON.stringify()
编码 JSON 支持的值那么少呢?因为JSON是一个通用的文本格式,和语言无关。设想如果将函数定义也stringify的话,如何判断是哪种语言,并且通过合适的方式将其呈现出来将会变得特别复杂。特别是和语言相关的一些特性,比如JavaScript中的Symbol。