es6数组遍历(map、filter、find、findIndex)

4 篇文章 0 订阅
3 篇文章 0 订阅

数组遍历

arr.map(callback [, thisArg])

map方法我们用得最最最多了吧,超级好用,当你需要批量改变数组中的值的时候就要想到它了
注:map方法不会改变原始值,它会返回一个新的数组
例:

let arr = [1, 2, 3, 4, 5, 6]
// 把上面的arr中数据统一加2
arr = arr.map(val => val + 2)
console.log(arr) // [3, 4, 5, 6, 7, 8]

当然,如果数组是包含Json对象的,也是一样的
例:

let arr = [{
	age: 25,
	address: '你猜'
}, {
	age: 40,
	address: '你猜'
}, {
	age: 30,
	address: '你猜'
}]
// 此时我们要把年龄都加上2
arr = arr.map(item => {
	item.age += 2
	return item
})
console.log(arr[0].age) // 27
arr.filter(callback [, thisArg])

当我们需要对数组进行筛选的时候,就用得上了。
注:此方法也不会改变原始数组,会返回一个筛选成功匹配的元素组成的新数组。

例:

let arr = [{
	age: 25,
	address: '你猜'
}, {
	age: 40,
	address: '你猜'
}, {
	age: 30,
	address: '你猜'
}]
// 此时我们要把年龄大于30的人筛选出来
let newArr = arr.filter(item => {
	return item.age > 30
})
console.log(newArr.length) // 1
console.log(newArr[0].age) // 40

是不是方便很多呢。

数组查找

有时候我们并不需要遍历所有数组,我们只需要找到我想要的数据就可以,这样可以减少遍历次数,从而加快代码运行数度。

arr.find(fn(callback [, thisArg])

查找数组中匹配的元素,找到一个就返回匹配的元素,没找到就返回undefined。
注:下面的例子相对于需求是一个错误的示范,因为我们要找出大于2的数,当找到匹配到3时,满足条件,函数就会停止。

例:

let arr = [1, 2, 3, 4, 5, 6]
// 此时我们找大于2的数
let newArr = arr.find(val => {
	return val > 2
})
console.log(newArr) // 3
arr.findIndex(callback [, thisArg])

查找数组中匹配的元素,找到一个就返回匹配的元素的位置,没找到就返回-1。
注:跟find一样,只是返回值不一样。

例:

let arr = [1, 2, 3, 4, 5, 6]
// 此时我们找大于2的数
let newArr = arr.findIndex(val => {
	return val > 2
})
console.log(newArr) // 2

另外

还有一些其他方法,也比较好用,但支持版本太高,比如:

// 此方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值
arr.reduce(callback [, initialValue]); 
[1, 2, 3].reduce((prev, current) => {
    return prev + current;  // 1 + 2, 3+ 3
});

// 测试数组中所有元素是否都通过了指定函数的测试
arr.every(callback [, thisArg]); 

// 测试数组中是否至少有一项元素通过了指定函数的测试
str.some(callback [, thisArg]); 

注:爱护原创,转载请说明出处

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云端君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值