javascript-解构赋值

解构赋值（解开解构，进行赋值）

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

 

在解构中，有下面两部分参与：

• 解构的源，解构赋值表达式的右边部分。
• 解构的目标，解构赋值表达式的左边部分。

 

数组的解构赋值：按照书写顺序，--对应解构

let arr=['hello','world','祝你幸福'，13,16]；

let a=arr[0];  //hello

let b=arr[1]   //world

let c=arr[2]   //祝你幸福

let d=arr[3]    //13

let e=arr[4]    //16

console.log(a,b,c,d,e)

结果：

let [c,b,a,e,d]=arr ;

console.log(a,b,c,d,e)

结果

这样可以看出，使用 let 赋值的c 对应 arr数组里的hello，使用let赋值的b对应arr数组里的world。

对象的解构赋值：按照对象的键名解构

let obj={

name:'Admin',

age:18,

sex:'男'，

like:'basketball',

show:()=>{

console.log(this.name)     //这里的this是window，不能通过this找到obj的name了

 

}

}

//let  name=obj.name

let{show,age,like,color}=obj;

console.log(show)

console.log(age)

console.log(like)

console.log(color)

}

打印结果

字符也可以算对象，同时还具有索引和长度，符合数组的规则

字符的结构赋值：等同于数组的结构赋值

 let str = "hello";
        let [q,w,e,r,t,y,u,i] = str;
        console.log(q)
        console.log(w)
        console.log(e)
        console.log(r)
        console.log(t)
        console.log(y)
        console.log(u)
        console.log(i)

结果：

之前：两个变量的值得交换，找个空变量，做个过度

现在：利用解构赋值

var a=10;

var b=20;

var  [a,b]=[b,a];

console.log(a,b)

结果

 

函数的参数的快速解析

function fn([q,z]){

   console.log(q)

   console.log(z)

}

let arr=['hello','world']

fn(arr)