ES6 数组和对象的解构
数组的结构赋值
- 保证等号两边的数组模式是一样的
- 如果不能正确解构,有的变量可能会自动赋值 undefined
- 变量可以有默认值
//解构赋值
let [a,b,c] = [101,300,400]
console.log(a,b,c);
//复杂数组的模式匹配
let [ba,[[bb],[bc,bd]]] = [100,[[200],[300,400]]];
console.log(ba,bb,bc,bd);
//两边模式不能匹配
let [n1,,n2]= [1,2,3];
console.log(n1,n2);
let [n3,n4,n5]= [10,30];
console.log(n3,n4,n5);
//解构赋值 ,变量可以有默认值
let [var1,var2 ="小红"]=['小马','小郑'];
console.log(var1,var2);
let [var3,var4="小红"]=['小马'];
console.log(var3,var4);
let [var5='大钟',var6]= ['小丽丽'];
console.log(var5,var6);
输出结果:

对象的解构
et {bar,foo}={bar:'lili',foo:100};
输出结果:

特殊对象的解构
- 一切皆对象
- 字符串。
let [a,b,c,d,e,f]='hello';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
//字符串当做对象
let {length:len}='world';
console.log(len);
let {PI:p}=Math;
console.log(p);
</script>
输出结果:

解构赋值实际应用功能
- 交换两个变量的值
- 提取json中数据
- 设置函数的默认值
- es6模块
//交换两个变量的值
let a = 100;
let b = 200;
[a,b] = [b,a]
console.log(a, b);
// 提取josn中的数据
let jsonData = {
id:42,
status:'OK',
data:[12.5,67,8]
};
let {id, status, data} = jsonData;
console.log(id, status, data);
// 函数中的默认值
function getJson({
url,
type='get',
data='',
async=true
}) {
console.log(url, type, data, async)
}
输出结果:

本文由 倪建成学习时 编辑,只是普通笔记。若是对你有用,可以自行转载
最后编辑时间为:2019-08-29 00:00:00