与es6的不期而遇 - 对象

对象

简洁表达的方式

当变量的名称和对象属性名称一致的时候， 我们书写的时候就可以省略一部分

const name = "cool";
const age = 20;
const isMan = true;
const person = { name, age, isMan };
console.log("person:", person);

上个世纪的写法： person = { name: name, age: age, isMan: isMan}，现在就省略了中间的一部分。

对象的拷贝

1 Object.assign() 拷贝

const name = "cool";
const age = 20;
const isMan = true;
const person1 = { name, age, isMan };
let person2 = {};
Object.assign(person2, person1);
console.log("person1: ", person1);
console.log("person2: ", person2);

这个Object.assgin() 方法就是把 person1 的属性 拷贝到person2 上， 如果person2 有属性和person1冲突了， 那person1上的属性值会覆盖掉person2 的属性值。这个拷贝属于浅拷贝，什么叫浅拷贝呢，简单来说就是你拷贝之后的对象和原来的对象其实在深层次上还有关系，当然啦，如果完全没关系了， 那就是深拷贝了，就是两个独立的对象了。我们再来看下面这个例子。

const name = "cool";
const age = 20;
const isMan = true;
const person1 = { name, age, isMan, hobby: { sport: "pingpang" } };
let person2 = {};
Object.assign(person2, person1);
console.log("person1: ", person1);
console.log("person2: ", person2);
person2.hobby.sport = "swim";
console.log("person1.hobby.sport:", person1.hobby.sport);
console.log("person2.hobby.sport:", person2.hobby.sport);

能够看到我们通过Object.assign() 拷贝了person1 属性给person2, 然后修改了person2.hobby.sport 的值， 然后发现person1 里面对应的值也改了， 这就说明person1 和 person2 还是存在关联的， 并不是真正独立的， 那我们再修改下代码

const name = "cool";
const age = 20;
const isMan = true;
const person1 = { name, age, isMan, hobby: { sport: "pingpang" } };
let person2 = {};
Object.assign(person2, person1);
console.log("person1: ", person1);
console.log("person2: ", person2);
person2.age = 25;
console.log("person1.age:", person1.age);
console.log("person2.age:", person2.age);

通过修改person2.age 发现 person1.age 没有改变， 貌似person1 和 person2 就只是在最外一层是独立的， 嵌套的对象就是有关联的， 所以我们称之为浅拷贝， 就只是拷贝了外面一层。

2 通过扩展运算符’…’ 来拷贝
之前在解构赋值中， 提到了对象的解构，用到了扩展运算符

const name = "cool";
const age = 20;
const isMan = true;
const person1 = { name, age, isMan, hobby: { sport: "pingpang" } };
let person2 = { ...person1 };
person2.age = 25;
person2.hobby.sport = "swim";
console.log("person1.age:", person1.age);
console.log("person2.age:", person2.age);
console.log("person1.hobby.sport:", person1.hobby.sport);
console.log("person2.hobby.sport:", person2.hobby.sport);

通过扩展运算符， 解构了person1 的属性， 并且把属性给了person2，能够看到这个扩展运算符的拷贝的表现和Object.assign() 一致， 其实也是浅拷贝。

3 对象的深拷贝
最简单的办法就是通过JSON.parse(JSON.stringify(obj)) ， 当然了，这种方法有一定的局限性， 也还有其他的方法，例如循环，递归等， 就不一一介绍了， 感兴趣的可以在网上找一找，像lodash.js 都封装好了函数cloneDeep，直接调用就可以了。