ES6中数组的扩展笔记

最新推荐文章于 2024-05-30 11:27:58 发布

Cherryup1

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量428

点赞数

文章标签： javascript ecmascript

本文链接：https://blog.csdn.net/qq_38304572/article/details/121834873

版权

一、数组的结构赋值

将目标数组中的对应索引值给变量数组

二、三点运算

1.作为参数使用，此时要注意的是函数的形参...list必须是最后一个参数

2.作为拓展运算符使用（代码转自三点运算符使用方法 - 筑潇 - 博客园）

let arr=[1,2,3];
console.log(...arr);//1, 2, 3返回数组中的各项

let a=[2,3];
console.log(1,...a,4);//1,2,3,4扩展运算符可以放在中间

let divs=document.querySelectorAll('div');
[...divs];//Array[300]，[]可以将divs转为数组解构；
console.log(...divs);//div1,div2....遍历divs各项

let set=new Set([1,2,3,3]);
[...set];//返回数组[1,2,3]，可以将set数据结构转化为数组

let map=new Map([[1,'a'],[2,'b'],[3,'c']]);
[...map.keys];//返回[1,2,3],属性数组；
[...map.values];//返回[a,b,c],value数组

[...'wbiokr'];//["w", "b", "i", "o", "k", "r"]遍历字符串，返回各个字符；

let str='abc';
['aaa',...str,'ccc'];//[aaa, a, b, c, ccc]扩展运算符位置比较任性//三点的扩展运算符，把数组或者类数组对象展开成一系列逗号隔开的值序列，它好比rest参数时候的逆运算。

三、Array.from()将伪数组转化为真数组

    <body>
		<ul>
			<li>第一</li>
			<li>第二</li>
			<li>第三</li>
			<li>第四</li>
		</ul>
	</body>
	<script type="text/javascript">
	    let ul = document.getElementsByTagName("ul")[0]
		let lis = ul.getElementsByTagName("li") //得到的是li集合，是伪数组
		console.log(lis)
		lisArr = Array.from(lis) //将伪数组转化成真数组，即可进行遍历操作
		console.log(lisArr)
		lisArr.forEach(function(item,index){
			item.onclick=function(){
				console.log(index)
			}
		})
	</script>

输出可查看下图：

四、Array.of() 将多个元素组成数组

五、Array.copyWithin(位置1,位置2,位置3) 位置1：替换开始位置位置2：复制开始的位置位置3：复制结束的位置这个数组会改变原数组

let arr = [1,2,3,4,5,6,7]
//         0 1 2 3 4 5 6
let arr2 = arr.copyWithin(0,4,6) //从索引下标为0的地方开始替换，替换值为从索引值为4开始到6结束,包含位置4不包含位置6
console.log(arr,arr2)

运行结果：

六、Array.find()查找第一个符合条件的返回元素

七、Array.findIndex()查找第一个符合条件的索引值下标

八、Array.fill() 填充值

1.一个参数

全部替换成0

2.两个参数

从索引下标为1的位置开始替换成0

3.三个参数

索引下标为1至索引下标为4的位置替换成0（包头不包尾）

九、遍历value值

十、遍历index值

十一、同时遍历index和value

十二、Array.includes ()是否包含某元素，返回true or false，可识别NaN、undefind

十三、map可以遍历数组并且可以直接对数组进行操作

十四、some和every判断数组的条件返回true or false

some:

every:

十五、filter过滤不符合条件的，可得到所有符合条件的数据

十六、reduce

1.对数组进行计算返回结果

上述代码默认sum一开始为0 遍历1次返回sum+item的值，再进行遍历，sum值为上次遍历返回的值，最终实现累加计算

2.用reduce进行数组去重

let score = [80,90,90,66,77,88]
let sum = score.reduce((sum,item,index)=>{
	console.log(sum,item,index)
	if(index == 1){
		sum = [sum]
	}
	if(!sum.includes(item)){
		sum.push(item)
	}
	return sum
})
console.log(sum)

Cherryup1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6中数组的扩展笔记

一、数组的结构赋值将目标数组中的对应索引值给变量数组二、三点运算1.作为参数使用，此时要注意的是函数的形参...list必须是最后一个参数2.作为拓展运算符使用（代码转自三点运算符使用方法 - 筑潇 - 博客园）let arr=[1,2,3];console.log(...arr);//1, 2, 3返回数组中的各项let a=[2,3];console.log(1,...a,4);//1,2,3,4扩展运算符可以放在中间let divs=document.qu..
复制链接

扫一扫