JS前端：数组/对象解构（每日一知识点）

数组解构

数组解构，就是将数组里的值一个一个赋值给新的变量，不需要用到遍历数组或者用索引拿值。

const arr = [1,2,3,4,5]
const [a,b,c,d,e] = arr
console.log(a)                    //1

数组解构，先要有一个数组，然后定义一组变量数组，将arr赋值给新变量，因为数组是有序的，所以变量（ [a,b,c,d,e] ）和arr中的值存在一一对应的关系,即a->1,b->2,c->3,d->4,e->5.。

以上是变量名和arr中的值数量相等的情况。但若变量名小于arr数组中的值：

const arr = [1,2,3,4,5]
const [a,b] = arr

则只会解构成功前两个值，即a=1,b=2.其他的值并没有被解构给新的变量，但是可以用剩余参数：

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

变量c是一个数组，包含了其余变量，需要注意的是，剩余参数（...变量）只能放到最后写

对象解构

对象解构就是将对象里的属性和方法拆解出来，使用时不需要用对象名 . 属性名/方法名  的方式使用，直接写属性名/方法名就可以使用了。步骤：定义一个对象，定义一组用大括号包裹的变量，需要注意的是，变量名和对象里的属性名/方法名需要一致，但顺序上可以不一样，比如如下代码

const obj = {
    uname:'小丽',
    age:10,
    like:'画画'
}
const {age,like,uname} = obj
console.log(uname)                            //小丽

和数组不同的是，对象无序，不存在一一对应的关系。

如果想要改变结构出来的变量名，也可以：

const {uname:name,age}={
                          uname:'小丽',
                          age:10

                        }
console.log(name)            //小丽

语法--->旧变量名：新变量名。调用时就可以使用自己重新定义的变量了。

总结

注意：解构谁，就用谁的符号定义变量，比如结构数组，就用[ ]包裹变量；解构对象，就用{ }包裹变量。

（本章是基本知识点，没有涉及到多级解构）