js对象赋值
- 1. 含有相同的键进行赋值
- 2. 复制对象(遍历赋值)
- 3. 复制对象(直接`=`赋值)
- 4. es6的Object.assign()方法拷贝对象 (深拷贝,但没完全深)
- 5. JSON.parse(JSON.stringify(obj))
- 7. 总结:对象赋值方法(深拷贝)
1. 含有相同的键进行赋值
let a = {name:"",age:""} // 需要被赋值的对象
let b = {name:"zlj",age:"18",sex:"男"} // 数据对象
// 将b与a相同的健进行赋值
Object.keys(a).forEach((key) => {
a[key] = b[key]
})
b.name="jin"
console.log(a) // {name: 'zlj', age: '18'}
console.log(b) // {name: 'jin', age: '18', sex: '男'}
2. 复制对象(遍历赋值)
let a = {
x : true,
y : false
}
let b = {};
//遍历对象a,把它的所有成员赋值给对象b
for (var i in a) {
b[i] = a[i];
}
b.x = false
console.log(a) // {x: true, y: false}
console.log(b) // {x: false, y: false}
3. 复制对象(直接=
赋值)
JavaScript 中对象的赋值是默认引用赋值的(两个对象指向相同的内存地址),所以修改另一个对象时,即修改了内存地址里的对象,其他关联对象也会改变
let a = {'name': 'zlj'};
let b = a;
let c = [1, 2, 3];
let d = c;
d[1] = 888
b.name = 'jj';
console.log(a); // {name: 'jj'}
console.log(b); // {name: 'jj'}
console.log(c); // [1, 888, 3]
console.log(d); // [1, 888, 3]
4. es6的Object.assign()方法拷贝对象 (深拷贝,但没完全深)
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign(obj1); // 浅拷贝
let obj3 = Object.assign({},obj1) // 只有一层深拷贝
obj1.a = 1
obj1.b.c = 1
console.log(JSON.stringify(obj2)); // {"a":1,"b":{"c":1}}
console.log(JSON.stringify(obj3)); // {"a":0,"b":{"c":1}}
obj2.a = 2;
console.log(JSON.stringify(obj1)); // {"a":2,"b":{"c":1}}
console.log(JSON.stringify(obj2)); // {"a":2,"b":{"c":1}}
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // {"a":2,"b":{"c":3}}
console.log(JSON.stringify(obj2)); // {"a":2,"b":{"c":3}}
- 当修改obj2.b.c的值时,原对象obj1.b.c也跟着发生了变化,Object.assign()只是让对象里第一层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。
- Object.assign(obj) --浅拷贝
Object.assign({},obj) --只有第一层深拷贝 (ES6中扩展运算符…也是如此
5. JSON.parse(JSON.stringify(obj))
使用场景限制:obj属性不能是function、RegExp等,JSON序列化时会造成属性丢失:
let obj1 = { a: 0, b: { c: 0 } }
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.a = 666
obj1.b.c = 888
console.log(obj1) // { a: 666, b: { c: 888 } }
console.log(obj2) // { a: 0, b: { c: 0 } }
7. 总结:对象赋值方法(深拷贝)
function deepClone(obj = {}, hashMap = new WeakMap()) {
//变量先置空
let objClone = null,
hashKey = hashMap.get(obj);
if (obj instanceof RegExp) return new RegExp(obj); //正则表达式的情况
if (obj instanceof Date) return new Date(obj); //日期对象的情况
if (hashKey) return hashKey;
//判断是否需要继续进行递归
if (typeof obj == "object" && obj !== null) {
objClone = obj instanceof Array ? [] : {};
hashMap.set(obj, objClone);
//进行下一层递归克隆
for (const i in obj) {
if (obj.hasOwnProperty(i)) {
objClone[i] = this.deepClone(obj[i], hashMap);
}
}
} else {
//如果不是对象直接赋值
objClone = obj;
}
return objClone;
};
let obj = {
name: "jj",
birth: new Date(),
desc: null,
reg: /^123$/,
ss: [1, 2, 3],
rp: {
f: 4
},
fn: function () {
console.log("123");
},
};
//使用方式
let obj2 = this.deepClone(obj);
obj.name = 'jin'
obj.birth = 323
obj.desc = undefined
obj.num = null
obj.reg = /^666$/,
obj.ss = [1, 888, 3],
obj.rp.f = 55555
obj.fn = function () {
console.log("999");
},
obj.fn(); // 999
obj2.fn(); // 123
console.log(obj, obj2, "深拷贝");
注意: vue中
obj.hasOwnProperty(i)
需要替换成Object.hasOwnProperty.call(obj, i)
否则会报错error : Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtins