解构

解构操作

　　1）ES6提供了对数组和对象的字面量提取相关数据的方法：解构操作

　　2）使用解构操作的原因：JSON格式的普及，产生了大量数据提取工作，ES6的解构语法中对这种提取过程，带来了极大的便捷性。

 

　解构赋值语法是一种 Javascript 表达式，可以将属性/值从对象/数组中取出,赋值给其他变量。

之前变量的赋值，需直接指定每一个值：

let a=1;
let b=2;
let c=3;

使用ES6解构就可以写成这样   

 

本质上，这种写法属于“模式匹配”，只要等号两边的模式相匹配，左边的变量就可以被赋予对应的值。

若等号的右边不是可遍历的结构，那么将会报错。

 

一、数组

　　两种基本写法：1.分行结构 2.单行结构

　首先看一下原本的数组获取，若想输出数组中的每一个值，需要使用索引获取

let arr=["li",18,"男"];
console.log(arr[0]);        
console.log(arr[1]);        
console.log(arr[2]);     

　使用解构之后，将数组中每个值赋给变量，拥有更好的语义化，后面可以更方便使用

let [name,age,gender]=arr;
console.log(name);
console.log(age);
console.log(gender);

　　　

　可以进行简写，以“ , ”分隔，只用写一个let 即可完成声明

let arr=["li",18,"男"],
    [name,age,gender]=arr;

　

　如果数量较少可以使用单行结构：     左-变量声明=右-值

　　　　　　　　　　　　 

 　　　必须要一 一完美匹配才可以正确赋值

• 　层级也必须完全匹配，获取想要的值：

　　

　　　　

let [name,[age,gender]]=["li",[18,"男"]]; 

　　 

 

•  　如果不需要赋值，可以用逗号作占位符：

let [,,gender]=["li",18,"男"];
console.log(gender);  //男

　

• 　默认值  -- 为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的变量数组中为元素预设默认值

　　在没有赋值的时候，就会采用默认

 

        

 

• 　...var 没有赋值的所有内容都赋给var变量，并以数组形式返回，即便只有一个数据，依然为数组形式

let [name,...other]=["li",18];
console.log(name); //li
console.log(other);

　　　

 

 

 

二、对象

 　　对象解构同数组大同小异，定义一个对象字面量，然后解构赋值：

let obj={

    name:"li",
    age:18

};

let {name,age}=obj;

　　　

 

 

 　还支持另一种方法解构对象，不必使用let声明，而用()包裹：   {name,age}=obj;

　　　　　　　　

 

 

 　同样对象也支持单行的简写模式：　let {name,age}={name:"li",age:18}

 

• 如果解构的变量名是已存在内容，则解构变量会覆盖原来

let obj={
    name:"li",
    age:18
},name="wang"; //被覆盖
({name,age}=obj);
console.log(name); //li

 

• 如果不相使用对象的属性名作为变量，可以用键值对方式更改变量名

let {name:myName,age:myAge}=obj;

　　这个时候使用的变量就成为了自己设置的变量名 （myName、myAge）

　　　　　　

 

 

• 　默认值

let obj={
　　name:"li",
    age:18
};

let {name,age,gender="男"}=obj;
console.log(gender); //男

 

 

• 对象里嵌套对象

let obj={
    name:"li",
    age:18,
    info:{
        id:1001
    }
};    
let {info:{id}}=obj;
console.log(id);　　//1001

 

数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

 

三、其他解构

　　除数组和对象外，ES6还提供了其他常用的解构方案

• 让两个变量的值进行交换

　原本：声明两个变量， let a=10;  let b=20;   ，若想让a、b数值互换，是需要声明第三个变量参与的 let c;

　　　　c=a;　　a=b;　　b=c;

　　　然后达到互换的结果：　　

 　而使用解构会更加方便：

let a=10;
let b=20;
[a,b]=[b,a];
console.log(a,b);　　//20 10

 

•  若函数返回值是一个数组或对象，直接将函数进行赋值解构

　数组：

function f(){
     return ["li",18,"男"];
}
let [name,age,gender]=f();
console.log(name); 　　//li
    

　对象：

function f(){
    return{
        name:"li",
        age:18,
        gender:"男"
    }
}
let {name,age,gender}=f();
console.log(name); 　　//li   

• 函数进行参数传递时，可以进行数组和对象字面量方式的传参

 　　数组

function f([name,age,gender]){
　　console.log(name);
}
f(["li",18,"男"]); 　　//li

　　对象

function f({name,age,gender}){
    console.log(name);
}
f({name:"li",age:18,gender:"男"});　　 //li

 

•  字符串类型数据也可以解构

　　数组形式 let [x,y,z]="abc"; 起到分割的作用：x=a,y=b,z=c

　　　占位符，...等都可以使用

let [,y]="abc";
console.log(y); 　　//b

let [x,...y]="abc";
console.log(y); 　　//(2) ['b', 'c']

　　对象形式，可以获取属性值：

　　　　将字符串length属性赋给len

let {length:len}="abc";
console.log(len); 　　//3