js对象赋值

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