一文了解js数组的常用的迭代方法

228 阅读2分钟

我们在和后端联调或者其他场景,难免会需要对数组进行筛选,过滤等操作,本文将会介绍数组的一些常用的原型方法。

forEach

Array.prototype.forEach(function(currentValue, index, arr) {})

  • currentValue:当前循环的值;
  • index:当前循环的下标;
  • arr:数组实例。

这个方法同for循环类似,将会把数组的每一项传递给forEach的回调函数,同时也会传入当前元素的index,数组本身,无返回值

var myArr = [1, 2, 3, 4, 5]
myArr.forEach((item, index, arr) => {
    console.log(item, index, arr);
})
// 输出
/*
1 0 (5) [1, 2, 3, 4, 5]
2 1 (5) [1, 2, 3, 4, 5].
3 2 (5) [1, 2, 3, 4, 5]
4 3 (5) [1, 2, 3, 4, 5]
5 4 (5) [1, 2, 3, 4, 5]
*/

map

Array.prototype.map(function(currentValue, index, arr) {})

  • currentValue:当前循环的值;
  • index:当前循环的下标;
  • arr:数组实例。 map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
var arr = [1, 2, 3, 4, 5]
var mapArr = arr.map((item) => {
    // 此处对数组的每一项进行+1,然后return
    return item + 1;
})
console.log(mapArr)
// 输出 [2, 3, 4, 5, 6]
// 得到的新数组的每一项就是在之前的每一项的基础上+1,新的数组的长度必然是和之前的数组长度保持一致,如果传入的回调函数的计算结果有误,也将会返回 最后得到的意外的值,如undefined, null等

filter

Array.prototype.filter(function(currentValue, index, arr) {})

  • currentValue:当前循环的值;
  • index:当前循环的下标;
  • arr:数组实例。

filter()方法返回一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,若无满足条件的元素,新数组将是一个空数组 []

var arr = [1, 2, 3, 4, 5]
var filterArr = arr.filter(item => {
    // 条件为 判断每一项是否 > 3 满足return true  不满足 return false
    if (item > 3) {
        return true
    } else {
        return false
    }
})
console.log(filterArr)
// 输出  [4, 5]

some 和 every

语法同forEach()类似。 这两个方法的返回值都是一个布尔值,区别在于,some()方法只要循环中有一次满足条件,那么返回结果就是true,循环中一次都没满足结果,返回值是falseevery()方法需要循环中每一次都要满足条件,返回值才是true,否则返回值就是false

var arr = [1, 2, 3, 4, 5]
var someArr = arr.some(item => item > 2);
// true
var someArr2 = arr.some(item => item > 5);
// false
var everyArr = arr.every(item => item < 2);
// false
var everyArr2 = arr.every(item => item < 6);
// true

find 和 findLast

语法同forEach()类似。两者的作用都是返回在循环中满足条件的第一个元素,不同点在于,find()是从前往后查找,而findLast()是从后往前查找。如果没有满足条件的元素,将会返回undefined

var arr = [1, 2, 3, 4, 5]
var findItem = arr.find(item => item > 3);
// 4
var findItem2 = arr.find(item => item > 5);
// undefined
var findLastItem = arr.findLast(item => item > 3);
// 5
var findLastItem2 = arr.findLast(item => item > 5);
// undefined

findIndex 和 findLastIndex

语法同forEach()类似。两者的作用都是返回在循环中满足条件的第一个元素的下标,不同点在于,find()是从前往后查找,而findLast()是从后往前查找。如果没有满足条件的元素,将会返回-1。

var arr = [1, 2, 3, 4, 5]
var findItem = arr.findIndex(item => item > 3);
// 3
var findItem2 = arr.findIndex(item => item > 5);
// -1
var findLastItem = arr.findLastIndex(item => item > 3);
// 4
var findLastItem2 = arr.findLastIndex(item => item > 5);
// -1