JavaScript中的解构赋值(详细)

最新推荐文章于 2024-07-03 07:53:05 发布

逆风优雅

最新推荐文章于 2024-07-03 07:53:05 发布

阅读量1.9k

点赞数 1

分类专栏：开发小技巧总结面试文章标签： javascript

本文链接：https://blog.csdn.net/qq_44603011/article/details/118460557

版权

开发小技巧总结同时被 2 个专栏收录

147 篇文章 6 订阅

订阅专栏

面试

14 篇文章 0 订阅

订阅专栏

解构赋值，就是快速的从对象或者数组中取出成员的一个语法方式
1.解构:将对象或者数组中的某个成员取出来
2.赋值:取出来的成员赋值给某一个变量

1.数组的解构
使用 [ ] 来进行解构数组
解构数组,变量名可以随便定义,变量名在[ ]的位置是和数组一一对应

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	</body>
</html>
<script type="text/javascript">
	//将数组中的某个元素从数组中解构出来
	let arr = [1,2,'黎明','黑暗']
	let [c,d,e] =arr //[]里面的变量名是可以随便起的，此处表示解构arr中的前三个元素
	console.log(e)//因为解构的第三个变量对应的是黎明，所以此时打印的结果为黎明
	//给解构出的元素赋一个新的值
	d='黄昏' //表示将解构出的元素2，重新赋值为黄昏
	console.log(d) //黄昏
	
	//解构伪数组
	let lis = document.querySelectorAll('li')
	console.log(lis) //获取到的是一个伪数组
	let [li1,li2]=lis //解构伪数组中的前面的两个元素
	console.log(li2) //打印的结果是第二个li标签
	
	//交换ab的值
	let a = 10,b=20;
	[a,b]=[b,a]
	console.log(a) //此时a打印的而结果为20
	console.log(b) //此时b打印的结果为10
	
</script>

2.对象的解构（常用）
使用{ }来解构对象

<script type="text/javascript">
	//对象的解构（常用）
	// 使用[]来解构对象
	function createGirlFriend(){ 
		let name = '小红';
		let age = 18;
		let hobby = '写代码';
		return { //返回这个对象,
			name:name,
			age:age,
			hobby:hobby,
		}
	//当属性和属性值相同时，可以只写一个，上面的返回格式的写法可以直接写name、age、hobby、
	}
	//es5,获取对象属性值的方法
	let obj = createGirlFriend()
	console.log(obj.name) //小红
	console.log(obj['name']) //小红
	//解构的方法获取对象属性值的方法
	let {name}=createGirlFriend()
	console.log(name) //小红
</script>

逆风优雅

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的解构赋值(详细)

解构赋值，就是快速的从对象或者数组中取出成员的一个语法方式 1.解构:将对象或者数组中的某个成员取出来 2.赋值:取出来的成员赋值给某一个变量1.数组的解构使用 [ ] 来进行解构数组解构数组,变量名可以随便定义,变量名在[ ]的位置是和数组一一对应<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name...
复制链接

扫一扫

专栏目录