ES6 数组和对象的解构

博客分类: 笔记 阅读次数: comments

ES6 数组和对象的解构

ES6 数组和对象的解构

数组的结构赋值

//解构赋值
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>

输出结果:

解构赋值实际应用功能

//交换两个变量的值
	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)
	}

输出结果: