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