es6数组解构和对象解构

数组解构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script>
			// 数组解构
			// let arr = [1,2,3]
			// let [a,b,c] = arr
			// console.log(a,b,c);
			
			// // d1 会出现未赋值
			// let arrs = [1,2,3]
			// let [a1,b1,c1,d1] = arrs
			// console.log(a1,b1,c1,d1);
			
			// let arrse = [1,2,3]
			// let [a2,b2] = arrse
			// console.log(a1,b1);
			
			
			// 二维数组解构
			// 同类型写法即可
			// let arr1 = [1,2,[3,4],5]
			// let [a,b,[c,d],e] = arr1
			// console.log(a,b,c,d,e);
			
			
			// ...三点运算符或是扩展运算符   会把剩下的以数组形式返回
			// let arr2 = [1,2,5,3]
			// let [a,...b] = arr2
			// console.log(a,b);
			
			
			
			// 合并数组
			// let arr3 = [1,2]
			// let arr4 = [3,4]
			// let arr5 =  [...arr3,...arr4]
			// console.log(arr5);
			
			
			
			// 设置默认值的情况 ,只有undefined时才会生效
			let arr6 = [1,undefined]
			let [a,b=5] = arr6
			console.log(a,b);
		</script>
	</body>
</html>

            let arr6 = [1,undefined]
            let [a,b=5] = arr6
            console.log(a,b);

 结果

对象解构 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 对象解构
			// 第一种写法  名字必须对应上
			// let obj = {
			// 	name : '李四',
			// 	age : 50
			// }
			
			// let {age ,name} = obj
			// console.log(name,age);
			
			// 第二种写法
			// 这种写法类似于变量赋值,左侧name只是找到他,然后值赋给右侧names ,这样可以自定义属性名
			// let objs = {
			// 	name : '李四',
			// 	age : 50
			// } 
			
			// let {name : names , age :ages } = objs
			// console.log(names,ages);
			
			
			
			let objs = {
				name : '李',
				ages : 30
			}
			
			
			// let {name,ages,height} = objs
			// console.log(name,ages,height);
			
			
			// height 只有当underfiner时才能生效
			let {name,ages,height=111} = objs
			console.log(name,ages,height);
		</script>
	</body>
</html>

let {name,ages,height=111} = objs
            console.log(name,ages,height);

结果

 

扫描二维码关注公众号,回复: 14915533 查看本文章

猜你喜欢

转载自blog.csdn.net/tea_tea_/article/details/126939398