02、ES6变量的解构赋值

什么是解构赋值

解构赋值语句是一个JavaScript表达式，这使得可以将 值从数组 或 属性从对象 提取到不同的变量中。

 

数组的解构赋值

简单使用

一般的，提取全部

const arr = [1,2,3,4];

let [a,b,c,d] = arr; //将数组的值提取到变量中，如想要常量可以换成const定义

//这样的话,abcd就可以成为变量了
console.log(a);
console.log(b);
console.log(c);
console.log(d);

 

选择性的，提取某一个或者几个

//选择性获取
const arr = [1,2,3,4];

let [a,b] = arr; //这样就可以12取出来

let [,,c] = arr;  //这样就可以把3取出来。逗号一定不能省略，表示前两项不取

 

嵌套的，提取嵌套里面的某一个或者几个

//嵌套类型的获取
const bbc = [1,2,[3,4],5]; 

let [,,[,a]] = bbc; //这样就可以把4取出来了

let [,,b] = bbc;  //这样就可以把3、4这个数组取出来了

 

扩展运算符（...）

可以获取某个数组的全部值，如

//将abc三个数组的值提取出来，合并到一个新的数组里面
const a = [1,2,3];
const b = [4,5,6];
const c = [7,8,9];

const d = [...a,...b,...c];  //...a表示继承a里面的全部值

 

可以表示获取剩下的常量，如

const oo = [1,2,3,4];

let [a,b,...c] = oo;  //表示剩下的3，4两个数全放进c里面。 ...c后面不能有任何参数，否则会报错

 

默认值

//默认值
const nn = [1,2];

//const[a,b,c] = nn; //nn数组中只有两个值，所以c就是undefined

//若不想c为undefined，可以为c设置默认值

const[a,b,c=33] = nn; //先判断c是否为undefined，是就换成33

 

交换变量

es6之前的交换变量方式

//a和b交换
var a = 1;
var b = 2;
var temp;

var temp = a;
var a = b;
var b = temp;

 

结构赋值方式

let a = 1;
let b = 2;

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

 

接收多个  函数返回值

function getUserInfo(id){
    return [
        'true',
        {
            name:'小明',
            age:18,
            id:id
        },
        '请求成功'        
    ];
}

const [status,data,msg] = getUserInfo(33);  //接收return返回的数组，并把数组内容分别赋值给status，data，msg

console.log(status);
console.log(data);
console.log(msg);

 

 

对象的解构赋值

简单使用

提取全部

//注意 变量名/常量名 需要跟被解构的对象保持一致

const bb = {
    name : 'zhangsan',
    age : 18
}

const {name,age} = bb;

 

选择性提取，提取被解构对象里面的某一项

//选择性的，提取 被解构对象 里面的某一个值
const bb = {
    name : {
        zhang:'zhang',
        li:'li',
        huang:'huang'
    },
    
    sex:[{
        man : 'male',
        woman :'female'        
    },{
        man : '男',
        woman : '女'
    }],
    
    age : 18
}

const {age} = bb; //这个前面不需要加逗号，因为对象是无序的，常量名保持跟对象里面一致即可

//选择 bb对象 > sex数组 > 第一个值(对象)
const {sex:[first]} = bb; 
//根据数组的结构赋值规则，[]里面的名字可以随意，但是逗号一定不能忘记

//选择 bb对象 > sex数组 > 第二个值(对象) > nv属性
const {sex:[,{nv}]} = bb;

//选择 bb对象 > name对象 > huang属性
const {name:{huang}} = bb;

//选择 sex数组第一个对象的woman，跟sex数组第二个对象的woman
const {sex:[{woman}]} = bb;
const {sex:[,{woman:nvren}]}; //因为woman已经定义，所以这里需要更名为nvren

 

扩展运算符

//用法跟数组差不多

可以表示获取剩下的常量，如

const obj = {
    name : 'zhang',
    age : 18,
    address : 'beijing'
}

const {name,...haha} = obj; //name正常获取，将剩余的age和address塞到haha里面

 

还可以继承对象里面全部的属性

//继承obj、ojb、ojj里面的属性到一个新对象里面去
const obj ={
    name :'hah'
}

const ojb ={
    age : 29
}

const ojj = {
    address : 'beijing'
}

const hahaha ={     //继承上面的属性放到这里面
    ...obj,
    ...ojb,
    ...ojj
}

 

对已经声明的变量进行解构赋值

//对已经声明的变量进行解构赋值

let age;  //这里先声明age

const obj ={
    name:'dkhfljs',
    age:88
}

//若是该变量没有被提前声明我们的做法是：
//let {age} = obj; 
//但是age已经声明了，再这样写会报错

//这时我们就得这样：
({age} = obj);
//如果不括起来的话，浏览器会认为将obj常量赋值给块级作用域，这个是会报错的

 

默认值

let bb = {
    name : 'ttt',
    age : 88,
}

let {name,age,hobby=['喜欢读书']} = bb; //当hobby为undefined的时候，那么就启用它的默认值

 

使用对象传入乱序的函数参数

// 使用对象传入乱序的函数参数

function ajax({        //小括号这里可以接收参数，并进行结构赋值
    url,
    data,
    type='get',
    msg
}){
    //解构赋值完成后这里就可以正常使用了
    console.log(url);
    console.log(data);
    //....
}

ajax({     //调用ajax函数，并传入对象
    url:'./pp.php',
    data:{
        a:1,
        name:'haha',
        age:6,
    },
    msg:'请求成功'
});

 

获取多个函数返回值

//获取多个 函数返回值

function getInfo(id){
    //...

    return {
        name : 'ttt',
        age : 88,
        address:'beijing'
    }
}

const {name,age,address} = getInfo(33);

 

字符串的解构赋值

提取值

//字符串解构赋值

const str = 'I am happy';

const [a,b,c] = str; //获取前三位字符，I、空格、a

const [d,...other] = str; //other是一个数组，里面存储着后面的每一位字符串

const [...str1] = str; //这三个获取到的内容都相同
const str2 = [...str]; //都是获取到str每一位字符组成的数组
var str3 = str.split(''); //es6以前用这种方法

 

提取该数组的方法

const {length,split} = str;
//提取length方法和split方法

 

 

数值 与 布尔值 的解构赋值

数值

const {valueOf} = 123; //数值里面可以获取到valueOf的方法

//在取 1.valueOf 的时候，临时转成一个包装对象，
//获取这个对象的valueOf，完了之后再把这个对象销毁掉，
//所以直接调用 1.valueOf 就会报错

当然我们可以手动包装一个对象进行查看

// 手动包装对象
var str = 123;
var sstr = new String(str);
console.log(sstr);

 

 

//可以发现里面除了str本身外还有其他各种各样的方法

布尔值

const {toString} = false; //提取布尔值的toString方法
//同样，布尔值本来没有toString方法的，在取false.toString的时候，该属性是临时包装对象的一个方法

 

 

函数参数的解构赋值

//在对象的解构赋值中讲过

例子1，函数参数为数组时

function exchange([x,y]){  //对传入的数组进行解构赋值
    return [y,x];
}

let arr = [1,2];
arr = exchange(arr);  //将数组传入函数中

 

例子2，函数参数为对象时

function bb({  //接收对象并进行结构赋值
    name,
    age=18,
    data
}){
    console.log(name);
    console.log(data);
}

bb({name:'xiaoxiao',data:'shujv'}); //传入对象