本文目录一览:
- JavaScript中浅拷贝和深拷贝的区别和实现
- js实现深拷贝的几种方法
- js对象浅拷贝有那些方法呢?
- JS中实现深拷贝的几种方法(object,Array)
- JS中如何进行对象的深拷贝
- JavaScript怎样进行真正有效的对象拷贝
JavaScript中浅拷贝和深拷贝的区别和实现
浅拷贝只是拷贝了引用,数据在内存中还是一个,如果引用的对象发生了变化,该变量也会同步变化。 深拷贝相当于把内存上的数据拷贝了一份,此时修改该变量不会影响原来的变量,同理修改原来的变量也不会影响现在的变量。 浅拷贝:
const foo = { bar: 'bar', baz: 'baz' }
const ref_foo = foo
深拷贝(最简单的方法,拷贝性能也不弱):
const foo = { bar: 'bar', baz: 'baz' }
const ano_foo = JSON.parse(JSON.stringify(foo))
js实现深拷贝的几种方法
简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。
浅拷贝主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。
使用 JSON.stringify
和 JSON.parse
实现深拷贝:JSON.stringify
把对象转成字符串,再用 JSON.parse
把字符串转成新的对象;
缺陷: 它会抛弃对象的构造函数,深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成 Object
;这种方法能正确处理的对象只有 Number
, String
, Boolean
, Array
, 扁平对象,也就是说,只有可以转成 JSON 格式的对象才可以这样用,像 function
没办法转成 JSON;
递归拷贝实现深拷贝,解决循环引用问题。
js对象浅拷贝有那些方法呢?
- 首先可以通过
Object.assign
来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign
只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所以并不是深拷贝。 - 还可以通过展开运算符
...
来实现浅拷贝
let a = { age: 1 }
let b = { ...a }
a.age = 2
console.log(b.age) // 1
JS中实现深拷贝的几种方法(object,Array)
- 通过第三方工具实现深拷贝
lodash.cloneDeep
数组深拷贝
concat(arr1, arr2,....)
slice(idx1, idx2)
参数可以省略:- 没有参数是拷贝数组
- 只有一个参数是从该位置起到结束拷贝数组元素
- 两个参数,拷贝从起始位置到结束位置的元素(不包含结束位置的元素:含头不含尾)
注意:当数组中的元素均为一维是深拷贝
数组中元素一维以上是值的引用
JS中如何进行对象的深拷贝
// 拷贝数据,深拷贝数据,绝对不会出现对象与数组引用相同位置
var copyData = function(item) {
if (item == null) {
return null;
}
if ($.isArray(item)) {
var newArray = [];
for (var i = 0; i < item.length; i++) {
newArray.push(copyData(item[i]));
}
return newArray;
}
if ($.isPlainObject(item)) {
var newObj = {};
for (var p in item) {
newObj[p] = copyData(item[p]);
}
return newObj;
}
return item;
}
JavaScript怎样进行真正有效的对象拷贝
有效的对象拷贝应该是指深拷贝。
浅拷贝:就是两个 JS 对象指向同一块内存地址,所以当 obj1
,obj2
指向 obj3
的时候,一旦其中一个改变,其他的便会改变!
深拷贝:就是重新复制一块内存,这样就不会互相影响。
有些时候我们定义一个数组,把这个数据赋值给多个对象数组中的一个字段,当我们改变对象数组中的该字段的时候,我们会把原来的数组也改变了,这不是我们想要的。
这个时候我们会用到深拷贝。
深拷贝的方法:
var deepCopy = function(source) {
var result;
(source instanceof Array) ? (result = []) : (result = {});
for (var key in source) {
result[key] = (typeof source[key] === 'object') ? deepCopy(source[key]) : source[key];
}
return result;
}