数组ES5新增遍历迭代的方法及其区别

数组在ES5新增了很多实用的东西,今天我们给大家介绍新增的遍历迭代的API,它们的作用,应用场景,参数,以及返回值分别是什么。
我们统一设定一个初始数组:

let array = [1,5,9,2,4,6];
1. forEach(callback)

对数组的每个元素执行一次提供的参数。
callback是一个函数,在遍历数组的每个元素时,都会去调用该函数执行
callback函数结构function(currentValue, index, array) {
- currentValue表示的是当前遍历到的数组元素值
- index表示的是当前遍历到的数组元素下标
- array表示的是当前调用forEach()方法的数组对象
}
使用方法:

let newArray = [];
array.forEach((item, index, arr) => {
	console.log('currentValue:', item)
	console.log('index:', index)
	console.log('arr:', arr)
	newArray.push(item * 2)
})
console.log(newArray)

输出的结果如下:
在这里插入图片描述
一般笔者遍历数组的时候喜欢用forEach替换for循环


2. map(callback)

创建一个新数组,其结果是该数组中每个元素都调用一个提供的函数后返回的结果。
即map()方法调用后返回一个新数组,新数组中的元素是callback函数的返回值。
使用方法:

let newArray = array.map((item, index) => {
console.log('currentValue:', item)
	console.log('index:', index)
	return item * 2
})
console.log(newArray)

输出结果如下:
在这里插入图片描述


3. some(callback)

测试数组中的某些元素是否通过由提供的函数实现的测试
测试,返回boolean值,每个元素都会调用执行callback函数,当callback函数返回为false时,继续遍历下一个元素,直到遍历结束,最终返回false。如果在遍历到某个元素时,callback返回true则结束遍历,some()返回true的结果。
使用方法:

let mark = array.some((item, index) => {
console.log('currentValue:', item)
	console.log('index:', index)
	return (item < 0)
})
console.log(mark)

PS:判断遍历到的内容是否小于0,如果为false则判断下一个,如果为true则直接返回true值,不在进行接下来的遍历了。
上面代码输出结果如下:
在这里插入图片描述
因为没有小于0的,所以最终的返回值是false。
我们换个条件再来测试一下:

let mark = array.some((item, index) => {
	console.log('currentValue:', item)
	console.log('index:', index)
	return (item < 2)
})
console.log(mark)

我们将判断改成了是否小于2。
输出结果如下:
在这里插入图片描述
可以发现只遍历了第一个值发现就满足条件了,所以直接跳出遍历,返回true的结果。


4. every(callback)

测试数组中的每一个元素是否通过由提供的函数实现的测试必须全部符合条件才会返回true,否则返回false。
测试代码如下:

let mark = array.every((item, index) => {
	console.log('currentValue:', item)
	console.log('index:', index)
	return (item < 2)
})
console.log(mark)

输出结果如下:
在这里插入图片描述
every其实是与some刚刚好相反,some是遇到条件满足的退出循环返回true,而every是遇到条件不满足的退出循环返回false。some是有一个满足就返回true,而every是全部满足才会返回true。


5. filter(callback)

过滤,筛选出callback函数返回值为true的对应元素,放到新的数组中。
测试代码如下:

let newArray = array.filter((item, index) => {
	console.log('currentValue:', item)
	console.log('index:', index)
	return (item < 6)
})
console.log(newArray)

输出结果如下:
在这里插入图片描述

  • 9
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值