es6 变量的解构赋值

解构赋值本质上是“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

解构规则：只要等号右边的值不少对象，就先将其转为对象。

一、数组的解构赋值

数组解构赋值，索引很重要，即顺序很重要。

原理：等号右边数据结构要有Iterator接口，比如数组，Set。【update20170605】

1、解构[1,2,3]

//把1,2,3分别赋值给a,b,c
        var [a,b,c]=[1,2,3];
        console.log(a+' | '+b+' | '+c);//1 | 2 | 3

2、更复杂，更强大的赋值,解构[1,[2,3]]

//把1,2,3分别赋值给a,b,c
        var [a,[b,c]]=[1,[2,3]];
        console.log(a+' | '+b+' | '+c);//1 | 2 | 3

3、跳着赋值

//把1赋值给a,3赋值给c
        var [a,,c]=[1,2,3];
        console.log(a+' | '+c);  //1 | 3

 4、省略号

var [a,...b]=[1,2,3];
console.log(a+' | '+b);//1 | 2,3
console.log(b);//[2, 3]

ES6中，提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法—"rest模式"。

所以有省略号时变量一定是数组类型的。

注意：【update20170605】

z的值是空数组。

 let [x,y,...z]=['a'];
    console.log("x=",x);   //x= a
    console.log("y=",y);    //y= undefined
    console.log("z=",z);    //z= []

 

5、指定默认值

//给c和d设置默认值为default
        var [a,b,c='default',d='default']=[1,2,3];
        console.log(a+' | '+b+' | '+c+' | '+d);//1 | 2 | 3 | default

6、解构时未赋值的变量值为undefined

//给c和d设置默认值为default
        var [a,b,c]=[1,2];
        console.log(a+' | '+b+' | '+c);//1 | 2 | undefined

优点：代码简单，清晰 

7、ES6内部使用严格等于（===）判断一个位置是否有值

所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

//数组成员不严格等于undefined，默认值不会生效
   var [x=1,y=2,z=3]=[undefined,"undefined",null];
   console.log("x: "+x);//x: 1
   console.log("y: "+y);//y: undefined
   console.log("x: "+z);//x: null

8、默认值是表达式，表达式惰性求值

只有在用到的时候才会求值。

function f(){
    console.log("aaa");
}
let[x=f()]=[1];//x能取到值，f根本不会执行

相当于

let x;
if([1][0]===undefined){
    f();
}else{
    x=[1][0];
}
console.log(x);

 

 

二、对象的解构赋值

对象解构赋值，顺序不再重要，按名称解构

 1、把a和b提取出来变成变量

let obj={
            a:1,
            b:2
        }
        let {a,b}=obj;
        console.log(a+" | "+b);//1 | 2

2、重命名，把obj.a重命名为A

let obj={
            a:1,
            b:2
        }
        let {a:A,b}=obj;
        console.log(A+" | "+b);//1 | 2
        console.log(a);//Uncaught ReferenceError: a is not defined

 3、let声明已经定义的变量会报错

let obj={
            a:1,
            b:2
        }
        let a;//a已经定义了，后面再定义就会报错
        let {a,b}=obj;//Uncaught SyntaxError: Identifier 'a' has already been declared
        console.log(a+" | "+b);

4、如果给已经定义的变量，重新解构赋值？

如果只是如下赋值：会报错，js解析器遇到{}会当成代码块，所以解构赋值时{不能出现在一行的最前面。

{a,b}=obj;//Uncaught SyntaxError: Unexpected token =

用小括号括起来

let obj={
            a:1,
            b:2
        }
        let a=0;//a已经定义
        console.log(a);
        ({a,b}=obj);//用小括号括起来告诉js解析器这是条语句
        console.log(a+" | "+b);//1 | 2

 5、更复杂的情况

let obj={
            arr:[
                'lxy',
                {
                    a:1
                }
            ]
        }
        //复杂解构
        let {arr:[name,{a}]}=obj;

        console.log(name+" | "+a);//lxy | 1

6、对象解构默认值

let {a=1,b=2}={a:10};
        console.log(a+" | "+b);//10 | 2

7、a重命名之后指定默认值

let {a:A=1,b=2}={a:10};
        console.log(A+" | "+b);//10 | 2

8、解构函数，即解构对象的方法

比如Math对象里面有方法

let {floor,pow}=Math;//把Math里的方法提取出来变成一个变量
        let a=1.1;
        console.log(floor(a));//1
        console.log(pow(2,3));//8

三、其他

1、用解构的方式获取到字符串的长度

【想不到】

var {length}='lxy';
        console.log(length);//3

2、把字符串解构成数组

字符串被转换成了一个类似数组的对象。

var [a,b,c]='lxy';
        console.log(a+"|"+b+"|"+c);//l|x|y

3、对函数的传参进行解构

//数组形式
 var arr=[1,2];
        function fun([a,b]){
            console.log("a:"+a);
            console.log("b:"+b);
        }
        fun(arr);
        //a:1
        //b:2

//解构对象
var obj={a:1,b:2};
        function fun({a,b}){
            console.log("a:"+a);
            console.log("b:"+b);
        }
        fun(obj);
        //a:1
        //b:2

四、应用

1、交换变量的值

[x,y]=[y,x];简洁易懂

let x= 1,y=2;
[x,y]=[y,x];
console.log("x: "+x);//x: 2
console.log("y: "+y);//y: 1

2、从函数返回多个值

function example(){
    return [1,2,3];
}
var [a,b,c]=example();

3、提取JSON数据

解构赋值对提取JSON数据尤其有用

 //假设res为一个请求返回的结果
        let res={
            status:200,
            id:12,
            data:[{name:'Bob'},{name:'Shuang Dan'}]
        }

        //es6一行搞定
        let {status,id,data}=res;
        //es5
        var status=res.status;
        var id=res.id;
        var data=res.data;

4、简化默认值

避免了在函数体内些 a=a||10;这样的语句。

var obj={b:2};
        function fun({a=10,b}){
            //a=a||10; //es5默认值写法
            console.log("a:"+a);
            console.log("b:"+b);
        }
        fun(obj);
        //a:10
        //b:2

 

 

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/6919627.html有问题欢迎与我讨论，共同进步。