新的一天开始了，难得的五一假期。劳动节就该劳动了。

今天一上来，老师就讲了一个令我匪夷所思的问题。直接上代码。

const jessica = {
    firstName: 'jessica',
    lastName: 'williams',
    age: 27
};
const jessicaCopy = jessica
jessicaCopy.lastName = 'Davis'
console.log(jessica);
console.log(jessicaCopy);

这几行代码输出结果是

为什么改了一个复制的对象，原对象也就跟着改变了呢？经过老师的解释我恍然大悟。他说jessicaCopy只是获取到了jessica对象的地址，所以他们所属相同的地址，一个修改，另一个也就随之修改了。这样看来，与我之前写过的浅拷贝还是有几分相像的。然后老师给提供了一种方法，代码如下

const jessica = {
    firstName: 'jessica',
    lastName: 'williams',
    age: 27
};
const jessicaCopy = Object.assign({}, jessica)
jessicaCopy.lastName = 'Davis'

console.log(jessica);
console.log(jessicaCopy);

Object.assign()这个方法是吧两个对象拼接到一起成为一个新的对象，而和一个空对象拼接到一起，还是原来的那个对象，只不过不再和原来的对象共用一个地址了，所以当新对象里面的value修改时，原对象中对应keys的value不会修改，这也很类似我们之前写到过的深拷贝。

注：Object.assign()拼接嵌套的层级多的对象的时候，之后第一层会显示深拷贝作用，即例子中firstName，lastName，age这一层，而之后再有层级的话，会显现浅拷贝作用。总而言之，这个方法还是属于浅拷贝的。

数组解构

const arr = [2, 3, 4]
const [a, b, c] = arr
console.log(a, b, c);

输出的结果就是 2 3 4 这是简单的数组解构。

const arr = [2, 3, 4]
const [a, , b] = arr
console.log(a, b);

这样的输出结果就是 2 4 ，意味着我们可以获取到数组中任意索引所对应的value

解构嵌套数组

const arr = [2, 3, [4, 5]]
const [i, , [j, k]] = arr
console.log(i, j, k);

答案显而易见 2 4 5，这相对来说还是容易理解的

注: 如果解构取值大于数组的length-1，则会显示undefined

解构对象

直接用代码演示吧，其实和解构数组区别不大

const openingHours = {
  thu: {
    open: 12,
    close: 22,
  },
  fri: {
    open: 11,
    close: 23,
  },
  sat: {
    open: 0, // Open 24 hours
    close: 24,
  },
}

这是初始对象

const { thu: a, fri: b } = openingHours
console.log(a, b);

输出结果为

const { thu: { open: a, close: b }, fri: { open: c, close: d } } = openingHours
console.log(a, b, c, d);

输出结果为

答案已经显而易见了，只要按照对象的格式解构，就可以得到对应的值，这个应该不是特别难理解。

扩展运算符(...)

ES6(ES2015)新增加的属性。他的功能令我们叹为观止。像之前提到过的浅拷贝，还有我所学习的vuex中都有涉及到。最基本的，它可以轻易获取数组的每一项的value。

拼接字符串

const arr = [7, 8, 9];
const newArr = [1, 2, ...arr]
console.log(newArr);

这看起来是不是有点魔幻，可他确实可以实现。

浅拷贝 还是老样子，直接上代码。

const aaa = {
  ccc: {
    a: 22
  },
  name: 'cgx',
  address: 'china',
  age: '12'
}
const aaaCopy = { ...aaa }
aaaCopy.name = 'ldh'
aaaCopy.ccc.a = 11
console.log(aaa, aaaCopy);

可以观察到，扩展运算符的浅拷贝和上文提到过的Object.assign()非常类似，再次就不多做解释了。

剩余运算符

和扩展运算符相反，直接上代码。

const aaa = [1, 2, 3, 4, 5, 6]
const [a, b, ...ccc] = aaa
console.log(a, b, ccc);

也不多做解释了，看懂扩展运算符，这个还是很容易理解的。

总结

今天看来知识点还是非常多的，需要好好的消化一下。今就到这了，加油吧大家。

第十二天前端浅记录

数组解构

解构对象

扩展运算符(...)

剩余运算符

总结