JS解构赋值

什么是解构?

从一组值中挑出一或多个值,然后把它们分别赋给独立的变量,这也是一个非常常见的需求,举个简单列子

没有使用解构赋值前

//把这个值分别保存在各自的变量中,让他们成为一个独立的变量
    let nextValue=["xxj","tq"];
    let boy=nextValue[0];
    let girl=nextValue[1]

使用后

//用解构赋值,一句话解决上面三句代码
    let [boy,girl]=['xxj','tq']
    alert(boy)//xxj
    alert(girl)//tq

如果你不想取该数组中的全部值

//这样就只会给变量girl赋值,值为tq
    let [, girl]=['xxj','tq']
    alert(girl)//tq

交换两个变量的值,往往都需要第三方变量 列:

 //如何交换两个变量的值?
    let boy='xxj';
    let girl='tq';
    //使用第三方变量
    let temp=boy;
    boy=girl;
    girl=temp;

使用解构后数组赋值,就可以省略掉那个变量temp

    let boy='xxj';
    let girl='tq';
    //使用解构赋值,就不需要第三方变量,就解决了第三方变量的繁琐
    let [boy,girl]=['tq','xxj']

对象解构赋值

    let person={
        name:'xxj',
        age:20
    }
    //使用解构后,相当于给name,age取了个别名,就是外号的意思,比如周树人:鲁迅
    let {name:personName,age:personAge}=person
    alert(personName)//xxj
    alert(personAge)//20

数组解构

        let arr=[1,2,3,4,5,6]
        let arr2=[7,8,9,10]
        let arr3=[...arr,...arr2]
        //可以说是把arr和arr2中的数值,push到arr3中
        console.log(arr3)//[1,2,3,4,5,6,7,8,9,10]

默认值

在数组的结构赋值表达式中也可以为数组的任意位置添加默认值,当指定位置的属性不存在或其值为undefind时使用该默认值

        let list=[123,'xxj'];
        //如果city属性为undefind时,取该默认值深圳
        let [num,peron,city='深圳']=list
        console.log(num,person,city)//123,xxj,深圳

不定元素赋值

在数组中,可以通过...语法将数组中其余的元素赋值给一个特定的变量,列:

       let colors=['red','green','blue']
       let [firstColor,...othersColor]=colors
       console.log(firstColor)//red
       console.log(othersColor)//['green','blue']