数组的遍历方法

发表于 分类于 / Changyan：

下面是总结的数组遍历的常见方法

for循环

  • 标准for循环
  • forEach((当前值, 当前索引, 当前数组) => {…}, [, 绑定的this])`
    • 无法中途退出循环，只能用 return 退出本次回调，进行下一次回调
    • 它总是返回 undefined 值，即使你 return 了一个值
  • for…in（不推荐）会把继承链的对象属性都会遍历一遍，而且数组遍历不一定按次序
    • for-in 循环返回的是所有能通过对象访问的、可枚举的属性
  • for (variable of iterable)（ES6）可迭代Array，Map，Set，String等（迭代的是值value）
    • 在 for..of 中如果遍历中途要退出，可以使用 break 退出循环

ES5

  • map (不改变原数组) 会给原数组中的每个元素都按顺序调用一次 callback 函数

  • reduce (不改变原数组) 数组中的前项和后项做某种计算,并累计最终值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 语法：
    // arr.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    // callback 参数
    // (累积器, 当前元素, 当前元素索引, 当前数组)
    // initialValue:指定第一次回调 的第一个参数
    var wallets = [4, 7.8, 3]
    var totalMoney = wallets.reduce(function (countedMoney, curMoney) {
        return countedMoney + curMoney;
    }, 0)

  • filter (不改变原数组)

    1
    2
    3
    4
    var arr = [2, 3, 4, 5, 6]
    var morearr = arr.filter(function (number) {
        return number > 3
    }) // [4,5,6]

  • every (不改变原数组) 测试数组的所有元素是否都通过了指定函数的测试

    • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
    • 如果所有元素都满足条件，则返回 true
    1
    2
    3
    4
    var arr = [1,2,3,4,5]
    var result = arr.every(function (item, index) {
        return item > 2
    }) // false

  • some (不改变原数组) 测试是否至少有一个元素通过 callback 中的条件。对于放在空数组上的任何条件，此方法返回 false

    • 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测
    • 如果没有满足条件的元素，则返回false
    1
    2
    3
    4
    5
    6
    7
    8
    // some(callback, thisArg)
    // callback:
    //    (当前元素, 当前索引, 调用some的数组)

    var arr = [1,2,3,4,5]
    var result = arr.some(function (item,index) {
        return item > 3
    }) // true

ES6

  • find() & findIndex() 根据条件找到数组成员

    • find 定义：用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回 undefined
    • findIndex 定义：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 语法
    let new_array = arr.find(function(currentValue, index, arr), thisArg)
    let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)

    // 这两个方法都可以识别NaN,弥补了indexOf的不足

    // find
    let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
    let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n));  // 返回元素NaN
    // findIndex
    let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
    let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n));  // 返回索引4

  • keys() & values() & entries() 遍历键名、遍历键值、遍历键名+键值

    • 三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 语法
    array.keys()   array.values()   array.entries()

    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1

    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
    // 'a'
    // 'b'

    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"