浅拷贝
浅拷贝是拷贝引用(拷贝地址),仍指向同一个地址,所以其中一方改变数据,另一方也会跟着改变
实现方式
- 对象
- Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign()复制的对象第一层是深拷贝,第二层及以后每层都是浅拷贝
let obj1 = {
name: "zhangsan",
info:{
sex: "man",
friend: ["lisi", "wangmazi"]
}
};
let obj3 = Object.assign({}, obj1);
obj3.name = "qiaojing";
obj3.info.friend[1] = ["hah", "kek"];
console.log('obj1',obj1);
console.log('obj3',obj3);
从结果我们可以看出:
在obj1中,修改了第一层的name属性,并没有改变源对象的name属性,因此,第一层为深拷贝。而修改friend时,原对象发生了改变,为浅拷贝。
- 展开运算符
let obj1 = {
name: "zhangsan",
info:{
sex: "man",
friend: ["lisi", "wangmazi"]
}
};
let obj3 = {...obj1};
obj3.name = "qiaojing";
obj3.info.friend[1] = ["hah", "kek"];
console.log('obj1',obj1);
console.log('obj3',obj3);
与使用Object.assign()类似。
2. 数组
- Array.prototype.concat()
var arr = ['old', 1, true, null, undefined,{old: 'old'}, ['old']];
var new_arr = arr.concat();
new_arr[0] = 'new';
arr[5].old = 'new';
arr[6][0] = 'new';
console.log(arr)
console.log(new_arr)
- Array.prototype.slice()
var arr = ['old', 1, true, null, undefined,{old: 'old'}, ['old']];
var new_arr = arr.slice();
new_arr[0] = 'new';
arr[5].old = 'new';
arr[6][0] = 'new';
console.log(arr)
console.log(new_arr)
注意:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化。
- 直接赋值
深拷贝
深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。二者不会相互影响.
- JSON.parse(JSON.stringify(object)) (数组和对象均适用)
let a = {
age: 1,
jobs: {
first: 'FE'
}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log('a',a)
console.log('b',b)
由上可见,改变a并不会对b有影响.
注意:
- 会忽略 undefined
- 会忽略 symbol
- 不能序列化函数
let a = {
age: undefined,
sex: Symbol('male'),
jobs: function() {},
name: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "yck"}
- 不能解决循环引用的对象
let obj = {
a: 1,
b: {
c: 2,
d: 3
}
}
obj.a = obj.b;
obj.b.c = obj.a;
let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON
- 实现深拷贝
var deepCopy = function(obj) {
if (typeof obj !== 'object') return;
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}