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

数组遍历

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.find(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]); 

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

你可能感兴趣的:(javascript,数组,es6)