ES6(4)之解构赋值

ES6之解构赋值

传统的赋值操作

var a = 1,b = 3,c = 9;

变量需一一罗列，我们需要对每一个元素进行赋值，不能整体显得非常的臃肿，而ES6中的解构赋值则改变了我们的赋值方法。

解构赋值介绍

解构赋值是针对数组，字符串或对象进行模式匹配，然后对其中的变量进行赋值，在ES6中只要某种数据有iterator接口（也就是可以循环迭代），都可以进行解构赋值

数组解构赋值

let a,b,c;
[a,b,c] = [1,3];
console.log(a,b,c);   //1,3,undefined

let a,b,c;
[a,b,c = 6] = [1,3];  //相当于对c进行了初始化
console.log(a,b,c);   //1,3,6

let a,b,c;
[a,b,c=6] = [1,2,3];
console.log(a,b,c);   //1,2,3 初始化会被后来值所覆盖

let a,b;
[a,...b] = [1,3,5,7,9];
console.log(a,b); //(1),[3,5,7,9]

对象的解构赋值

let a,b;
({a,b} = {a:2,b:3})
console.log(a,b);

let num , total;
({a:num,b:total} = {a:123,b:456});
console.log(num,total);

对象的别名问题：

let {a,b} = {a:'hello',b:'world'}
//对象属性别名
let {a:c,b} = {a:'hello',b:'world'}
console.log(c,b)  //如果打印a会出错，因为a:c代表将a改名为c，此时a相当于未声明

一般来讲，后端返回前端的是json数据，而解构赋值在解析json数据中表现良好

function fn(){
    return{
        name:'zby',
        nameList:[{
            name:'zw',
            gender:'man'
        },
        {
            name:'dali',
            gender:'woman'
        }
        ]
    }
}

let data = fn();
let {name:person,nameList:[{name:person1,gender:gen1},{name:person2,gender:gen2}]} = data;
console.log(person,person1,gen1,person2,gen2);

字符串的解构赋值

字符串的解构赋值可以将字符串每一位对应赋值，也可以获取字符串的长度

let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e)
//一个变量一个字符，一一对应

let {length} = 'hello'
console.log(length)   //可输出字符串长度，大括号 + length是固定格式