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是固定格式