原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

forEach 和 map 的区别

forEach

forEach 是 Array 对象自带的方法，用于遍历数组中的每一项。语法：

Array.prototype.forEach(callback[, thisArg])

callback 函数在数组的每一项上执行一次，它接收三个参数：

• currentValue：当前项的值
• index：当前项的索引
• array：正在被遍历的数组

thisArg 是可选的，表示在调用 callback 函数时，用作 this 的对象。

forEach 无法终止循环，它会遍历数组中的每一项执行回调函数，不像 for、while、do...while 等语句可以在满足条件时跳出循环。

下面是一个 forEach 的示例：

let arr = [1, 2, 3, 4, 5]
arr.forEach((value, index, array) => {
  console.log(value, index, array)
})

输出结果：

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]

map

map 方法也是 Array 对象自带的方法，用于遍历数组中的每一项，并在每一项上执行回调函数。语法：

Array.prototype.map(callback[, thisArg])

callback 函数在数组的每一项上执行一次，它接收三个参数：

• currentValue：当前项的值
• index：当前项的索引
• array：正在被遍历的数组

thisArg 是可选的，表示在调用 callback 函数时，用作 this 的对象。

map 方法的回调函数必须返回一个值，否则会得到一个数组元素值为 undefined 的新数组。

下面是一个 map 的示例：

let arr = [1, 2, 3, 4, 5]
let new_arr = arr.map((value, index, array) => value * value)
console.log(new_arr)

输出结果：

[ 1, 4, 9, 16, 25 ]

forEach 和 map 兼容性写法

由于 forEach 和 map 仅支持主流的现代浏览器，对于一些老旧的浏览器还需要进行兼容性写法。

我们可以使用 for 循环来模拟 forEach 和 map 的功能，下面是具体的实现：

forEach 兼容性写法

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function (callback, thisArg) {
    let T, k
    if (this == null) {
      throw new TypeError('this is null or not defined')
    }
    let O = Object(this)
    let len = O.length >>> 0
    if (Object.prototype.toString.call(callback) !== '[object Function]') {
      throw new TypeError(callback + ' is not a function')
    }
    if (arguments.length > 1) {
      T = thisArg
    }
    k = 0
    while (k < len) {
      let kValue
      if (k in O) {
        kValue = O[k]
        callback.call(T, kValue, k, O)
      }
      k++
    }
  }
}

map 兼容性写法

if (!Array.prototype.map) {
  Array.prototype.map = function (callback, thisArg) {
    let T, A, k
    if (this == null) {
      throw new TypeError('this is null or not defined')
    }
    let O = Object(this)
    let len = O.length >>> 0
    if (Object.prototype.toString.call(callback) !== '[object Function]') {
      throw new TypeError(callback + ' is not a function')
    }
    A = new Array(len)
    k = 0
    while (k < len) {
      let kValue, mappedValue
      if (k in O) {
        kValue = O[k]
        mappedValue = callback.call(T, kValue, k, O)
        A[k] = mappedValue
      }
      k++
    }
    return A
  }
}

jQuery $.each 和 $.map 遍历操作

jQuery 提供了两个方法 $.each 和 $.map 用于遍历元素和对象。

$.each

jQuery 的 $.each 方法用于遍历数组、对象和类数组对象，语法如下：

jQuery.each(collection, callback(indexInArray, valueOfElement))

• collection：要遍历的数组、对象和类数组对象。
• callback：在每个元素上执行的回调函数。回调函数返回 false 可以提前停止循环。

下面是一个 $.each 方法的示例：

let arr = [1, 2, 3, 4, 5]
$.each(arr, (index, value) => {
  console.log(index, value)
})

输出结果：

0 1
1 2
2 3
3 4
4 5

$.map

jQuery 的 $.map 方法用于遍历数组、对象和类数组对象，并可实现遍历后对数据的修改。语法如下：

jQuery.map(array, callback(elementOfArray, indexInArray))

• array：要遍历的数组、对象和类数组对象。
• callback：在每个元素上执行的回调函数。回调函数必须返回一个值。

下面是一个 $.map 方法的示例：

let arr = [1, 2, 3, 4, 5]
let new_arr = $.map(arr, (value, index) => value * value)
console.log(new_arr)

输出结果：

[ 1, 4, 9, 16, 25 ]

总结

• forEach 只是用于遍历数组，而 map 遍历数组并对数组执行操作。两者返回的值不同。
• 老浏览器不支持 forEach 和 map，我们需要手动实现它们的功能。
• $.each 可以用来循环遍历对象、数组、类数组，同时支持 jQuery 对象； $.map 可以用来处理数据并返回一个新数组。