JS中的forEach、$.each、map方法推荐

JS中的forEach、$.each、map方法是常用的数据遍历方法，这篇攻略将会介绍它们的使用方法及推荐情况。

forEach方法

语法

array.forEach(callback[, thisArg])

参数

callback: 数组遍历时执行的函数。

thisArg(可选): 执行callback时候this关键字指向的对象。

描述

forEach方法对数组对象中的每个元素执行一次提供的函数。它无法使用break、continue等操作改变流程。对于需要内部修改数组元素的情况，可以使用map、filter、reduce等方法。

示例

const array = [1, 2, 3, 4, 5];

array.forEach((element) => {
  console.log(element);
});

上述代码将会输出：

1
2
3
4
5

$.each方法

语法

$.each(obj, callback)

参数

obj: 待遍历的对象。

callback: 对于每个匹配元素都执行的一个函数。 包含两个参数：index、对应的DOM元素或JavaScript对象。

描述

$.each()函数是jQuery中对于普通对象（类数组）和DOM元素列表进行迭代的通用函数。

示例

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

上述代码将会输出：

1
2
3
4
5

map方法

语法

array.map(callback[, thisArg])

参数

callback: 数组遍历时执行的函数。

thisArg(可选): 执行callback时候this关键字指向的对象。

描述

map方法创建一个新数组，其结果是该数组中的每个元素都回调函数的处理结果。

示例

const array = [1, 2, 3, 4, 5];

const newArray = array.map(element => {
  return element * 2;
});

console.log(newArray);

上述代码将会输出：

[2, 4, 6, 8, 10]

一个jQuery forEach，JavaScript map的示例

$.getJSON('data.json', (data) => {
  $.each(data, (index, value) => {
    console.log(value.name);
  });
  const names = data.map((value) => {
    return value.name;
  });
  console.log(names);
});

上述代码从data.json文件中获取内容，使用$.each输出了每个元素的name属性，接下来使用map方法创建了一个新的数组保存了所有的name属性的值。