发布时间:2023-07-18 18:30
本篇文章分享给大家几个常用的处理数组使用的函数方法
filter()
方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
示例代码如下:
// 要求: 使用filter方法过滤出nums数组中的偶数
/*
三个参数:
* item :数组中的每一项
* index : 数组中每一项的索引值
* arr :该数组 (本案例中为数组nums)
*/
var nums = [10, 5, 16, 21, 55, 37]
var newNums1 = nums.filter((item, index, arr) => {
// console.log(item, index, arr)
return item % 2 == 0
})
console.log(newNums1) // [ 10, 16 ]
map()
方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
示例代码如下:
// map 映射
/*
callback 为数组中每个元素执行的函数,该函数接收三个参数:
* currentValue :数组中正在处理的当前元素。
* index : 数组中正在处理的当前元素的索引。
* array 可选 :forEach() 方法正在操作的数组。
*/
var nums = [10, 5, 16, 21, 55, 37]
var newNums2 = nums.map(item => {
return item * 2
})
console.log(newNums2) // [ 20, 10, 32, 42, 110, 74 ]
需要注意的是
map()
方法回调函数的结果组成了新数组的每一个元素。而不是修改了原数组。
forEach()
方法对数组的每个元素执行一次提供的函数。
/*
callback 为数组中每个元素执行的函数,该函数接收三个参数:
* currentValue :数组中正在处理的当前元素。
* index : 数组中正在处理的当前元素的索引。
* array 可选 :forEach() 方法正在操作的数组。
*/
var nums = [10, 5, 16, 21, 55, 37]
var arr = []
nums.forEach(item => {
if (item % 2 == 0) {
arr.push(item)
}
})
console.log(arr) // [ 10, 16 ]
find()
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
var nums = [10, 5, 16, 21, 55, 37]
var result1 = nums.find(item => {
return item == 16
})
var result2 = nums.find(item => {
return item == 200
})
console.log(result1) // 16
console.log(result2) // undefined
// 也可以深入查找对象中的某个属性,如下所示:
var arr2 = [
{ name: 'L', age: 19 },
{ name: 'W', age: 6 },
{ name: 'Z', age: 24 }
]
console.log(arr2.find(item => {
return item.age == 24
})) // { name: 'Z', age: 24 }
findIndex()
方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
var arr2 = [
{ name: 'L', age: 19 },
{ name: 'W', age: 6 },
{ name: 'Z', age: 24 }
]
var findIndex1 = arr2.findIndex(item => {
return item.name === 'Z'
})
var findIndex2 = arr2.findIndex(item => {
return item.name === 'K' //
})
console.log(findIndex1) // 2 索引从0开始,{ name: 'Z', age: 24 }索引为2
console.log(findIndex2) // -1 查找不到name叫K的对象,返回-1
reduce()
方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
/*
语法:
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
两个参数:
回调函数callback 中的四个参数:
* accumulator 累计器 (上一次的返回值)
* currentValue 当前值
* index(可选) 当前索引
* array(可选) 数组
第二个参数(可选):
* initialValue 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的 空数组上调用 reduce 将报错。
*/
var nums = [10, 5, 16, 21, 55, 37]
var total = nums.reduce((acc, cur) => {
return acc + cur
}, 0) // 0 代表initialValue值
console.log(total) // 144 (nums数组元素之和)
reduce()
方法比较难理解,这里就进行一个详细一点的解释。
reduce
为数组中的每一个元素依次执行callback
函数,不包括数组中被删除或从未被赋值的元素。
回调函数第一次执行时,accumulator
和currentValue
的取值有两种情况:如果调用reduce()
时提供了initialValue
,accumulator
取值为initialValue
,currentValue
取数组中的第一个值;如果没有提供initialValue
,那么accumulator
取数组中的第一个值,currentValue
取数组中的第二个值。
注意:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。
如果感觉本篇文章有用请点赞收藏谢谢!祝大家顺利上岸!