ECMAScript6基础之结构赋值与展开运算符

一、 结构赋值

（1）结构赋值基本写法

<script type="text/javascript">
	var obj= {
		a:1,
		b:2
	};
	var a = obj.a;
	var b = obj.b;
	console.log(a,b); //输出 1 2
</script>

（2） ES6对象结构赋值

<script type="text/javascript">
	let obj= {
		a:1,
		b:2,
		c:3,
		d:4
	};
	let {a,b,d} =obj;
	console.log(a,b,d); //输出 1 2 4
</script>

（3） ES6数组结构赋值

<script type="text/javascript">
	let arr= [1,2,3,4];
	let {a,b} =arr;
	console.log(a,b); //输出 1 2
</script>

（4） ES6字符串结构赋值

<script type="text/javascript">
	let str= "abc";
	let {a,b} =str;
	console.log(a,b); //输出 a b
</script>

（4） 结构赋值常见面试题之如何快速交换a，b的值

<script type="text/javascript">
	let a =1;
	let b =2;
	[a,b]=[b,a];
	console.log(a,b); //输出 2 1
</script>

二、 展开运算符

（1）数组展开运算符

<script type="text/javascript">
	let arr1=[1,2,3];
	let arr2=[...arr1,4,5,6];
	console.log(arr2); //输出 [1, 2, 3, 4, 5, 6]
</script>

（2）对象展开运算符

<script type="text/javascript">
	let obj1={
		a:1,
		b:2
	};
	let obj2={
		...obj1,
		c:3,
		d:4
	};
	console.log(obj2); //输出 {a: 1, b: 2, c: 3, d: 4}
</script>

（3）展开运算符剩余参数

<script type="text/javascript">
	let arr=[1,2,3];
	let [a,b,...c] =arr
	console.log(a,b,c); //输出 1 2 [3]
</script>

注：对象传址问题

<script type="text/javascript">
	let obj1={
		a:1,
		b:2
	};
	let obj2=obj1;
	obj2.a=10
	console.log(obj1.a); //输出 10
	/*
		由于obj1是对象类型的存在传值的问题，不建议直接赋值另一个变量
	*/
</script>

解决方法

<script type="text/javascript">
	let obj1={
		a:1,
		b:2
	};
	let obj2={...obj1};
	obj2.a=10
	console.log(obj1.a); //输出 1
	/*
		通过结构赋值把obj1的结构赋给obj2,这样就不会出现传址的问题了
	*/
</script>