JS展开运算符和剩余参数

最新推荐文章于 2024-03-15 14:43:36 发布

apeWy

最新推荐文章于 2024-03-15 14:43:36 发布

阅读量485

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/q12wuyi/article/details/127852851

版权

JS展开运算符和剩余参数

展开运算符
- - - 一、数组的展开
    - 二、对象的展开
  - 三、将伪数组转变成数组
剩余参数
万万语录

展开运算符

一、数组的展开

展开运算符...arr，可以将数组，对象展开成字符串，合并数组，添加对象。如下代码所示

var arr1 = [1,2,3,4,5]
var arr2 = [6,7,8,9,0]
console.log(...arr1,...arr2);
var newarr = [...arr1,...arr2,"hello"]
console.log(newarr)

输出结果为

1 2 3 4 5 6 7 8 9 0
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'hello']

还可以获取数组中最大值

var arr = [1,2,3,4,5]
var maxarr = Math.max(...arr)
console.log(maxarr);

输出结果

二、对象的展开

与数组类似，但需大括号括住，可用作合并对象，如下代码所示

var arr1 = {
	age:18,
	name:"张三",
}
var arr2 = {
	age:19,
	name:"李四"
}
var newarr = {...arr1,...arr2}
console.log(newarr )

输出结果的值

{
	age:19,
	name:"李四"
}

造成只有一组对象的原因是两组对象的键名相同，下面覆盖上面，如果赋值键名不同则输出

{
	age1:18,
	name1:"张三",
	age2:19,
	name2:"李四"
}

三、将伪数组转变成数组

<body>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<script>
		var res = document.getElementsByClassName('.item')
		console.log(res)
		//res.forEach(function(){})
		let newres = [...res]
		console.log(newres)
		newres.forEach(function(){})
	</script>
</body>

以上输出结果为

HTMLCollection []
[]

未解构前，res 为HTMLCollection 伪数组，所以使用数组方法forEach()会报错，使用展开运算符...res转变成数组，就可以使用数组方法forEach()

剩余参数

当函数的参数不确定时

function newarr(...arr){
	console.log(arr)
}
newarr(1,2)

输出结果为

 [1, 2]

若参数至少为n个时

function newarr(a,b,...arr){
	console.log(a)
	console.log(b)
	console.log(arr)
}
newarr(1,2,3,4,5,6)

输出结果为

1
2
[3, 4, 5, 6]

注意：参数至少有一个确定时，展开运算符都必须写在该形参的后面，不能写在前面

万万语录

2022.11.14
对，今天拉肚子

apeWy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS展开运算符和剩余参数

JS展开运算符和剩余参数
复制链接

扫一扫

JS展开运算符和剩余参数

JS展开运算符和剩余参数

展开运算符

一、 数组的展开

二、对象的展开

三、将伪数组转变成数组

剩余参数

万万语录

“相关推荐”对你有帮助么？

一、数组的展开