ES6学习

最新推荐文章于 2025-12-19 15:51:19 发布

原创最新推荐文章于 2025-12-19 15:51:19 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文介绍了JavaScript中的解构赋值，包括数组和对象的解构，强调了解构的目标可以是可遍历对象，以及如何处理解构时的默认值和剩余运算符。示例代码展示了数组解构的不完全解构、剩余运算符的使用，以及对象解构的嵌套和忽略解构情况。

解构模型：

一、在解构中，有下面两部分参与：1、解构的源，解构赋值表达式的右边部分。 2、解构的目标，解构赋值表达式的左边部分

二、在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据

三、当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//	1、数组结构
			let [x=3] = [];// 匹配结果是 undefined,将默认值作为返回结果
			console.log(x);// 3
			
			let [a,b,c] = [1,,2];
			console.log(b);// undefined 忽略解构，也可叫不完全解构
			
			let [d,...e] = [1,2,3,4];
			console.log(e);// [2,3,4]	'...'我们叫他为剩余运算符，也可以叫展开运算符，他的作用是把数组的内容逐个展开，
						   //本题的'...e'就是把剩下未解构的数字全部赋值给e
						   
			//	2、对象解构
			let bx = {d: ['reading', {y: 'book'}] };
			let {d: [x, {  }] } = bx;// x = 'reading'	// 可嵌套可忽略解构
			
			let bx = {d: ['reading', {y: 'book'}] };
			let {d: [x, {  },y] } = bx;// x = 'reading' y = undefined	//不完全解构
		</script>
	</body>
</html>

如有错误，欢迎大家在评论区指正。