一、数据类型存储
前面文章我们讲到,JavaScript
中存在两大数据类型:
基本类型数据保存在在栈内存中
引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中
二、浅拷贝
浅拷贝,指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝
如果属性是基本类型,拷贝的就是基本类型的值。如果属性是引用类型,拷贝的就是内存地址
即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址
下面简单实现一个浅拷贝
1 2 3 4 5 6 7 8 9
| function shallowClone(obj){ let newObj={}; for(let prop in obj){ if(obj.hasOwnProperty(prop)){ newObj.prop=obj.prop; } } return newObj; }
|
在JavaScript
中,存在浅拷贝的现象有:
Object.assign
Array.prototype.slice()
, Array.prototype.concat()
- 使用拓展运算符实现的复制
Object.assign()
1 2 3 4 5 6 7 8 9 10 11 12
| var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka' }, love: function () { console.log('fx is a great girl') } } var newObj = Object.assign({}, fxObj);
|
slice()
1 2 3 4 5
| const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.slice(0) fxArrs[1] = "love"; console.log(fxArr) console.log(fxArrs)
|
concat()
1 2 3 4 5
| const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.concat() fxArrs[1] = "love"; console.log(fxArr) console.log(fxArrs)
|
拓展运算符
1 2 3 4 5
| const fxArr = ["One", "Two", "Three"] const fxArrs = [...fxArr] fxArrs[1] = "love"; console.log(fxArr) console.log(fxArrs)
|
三、深拷贝
深拷贝开辟一个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性
常见的深拷贝方式有:
- _.cloneDeep()
- jQuery.extend()
- JSON.stringify()
- 手写循环递归
_.cloneDeep()
1 2 3 4 5 6 7 8
| const _ = require('lodash'); const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; const obj2 = _.cloneDeep(obj1); console.log(obj1.b.f === obj2.b.f);
|
jQuery.extend()
1 2 3 4 5 6 7 8
| const $ = require('jquery'); const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; const obj2 = $.extend(true, {}, obj1); console.log(obj1.b.f === obj2.b.f);
|
JSON.stringify()
1
| const obj2=JSON.parse(JSON.stringify(obj1));
|
但是这种方式存在弊端,会忽略undefined
、symbol
和函数
,而且无法深拷贝循环引用
1 2 3 4 5 6 7 8
| const obj = { name: 'A', name1: undefined, name3: function() {}, name4: Symbol('A') } const obj2 = JSON.parse(JSON.stringify(obj)); console.log(obj2);
|
循环递归
这里用WeakMap原因:WeakMap的键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内。因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。
关于WeakMap看
[]: https://www.bookstack.cn/read/es6-3rd/spilt.4.docs-set-map.md
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| const cloneDeep1 = (target, hash = new WeakMap()) => { if (typeof target !== 'object' || target === null) { return target; } if (hash.has(target)) return hash.get(target);
const cloneTarget = Array.isArray(target) ? [] : {}; hash.set(target, cloneTarget);
const symKeys = Object.getOwnPropertySymbols(target); if (symKeys.length) { symKeys.forEach(symKey => { if (typeof target[symKey] === 'object' && target[symKey] !== null) { cloneTarget[symKey] = cloneDeep1(target[symKey]); } else { cloneTarget[symKey] = target[symKey]; } }) }
for (const i in target) { if (Object.prototype.hasOwnProperty.call(target, i)) { cloneTarget[i] = typeof target[i] === 'object' && target[i] !== null ? cloneDeep1(target[i], hash) : target[i]; } } return cloneTarget; }
|
小结
前提为拷贝类型为引用类型的情况下:
- 浅拷贝是拷贝一层,属性为对象时,浅拷贝是复制,两个对象指向同一个地址
- 深拷贝是递归拷贝深层次,属性为对象时,深拷贝是新开栈,两个对象指向不同的地址