用JavaScript遍历数组和可迭代对象的6大方法总结与对比
2023-09-06 03:05:44
JavaScript 拥有丰富的数组和可迭代对象的遍历方法，例如 forEach(), map(), filter(), find(), findIndex(), some(), every(), 以及 for...of 和 for...in 循环。这些方法具有不同的功能，应用场景，兼容性，效率，返回值以及是否改变原始数组等特性。为了帮助您更好地理解这些遍历方法，我们将对它们进行总结和对比。
-
forEach() 方法
-
功能：
forEach()方法用于遍历数组或可迭代对象中的每个元素，并将回调函数应用于每个元素。回调函数接受三个参数：当前元素、当前元素的索引以及数组或可迭代对象本身。 -
应用场景：
forEach()方法适用于需要遍历数组或可迭代对象中的每个元素并对每个元素执行特定操作的情况。例如，可以使用forEach()方法将数组中的每个元素打印到控制台，或者将数组中的每个元素增加 1。 -
兼容性：
forEach()方法在所有现代浏览器中都受支持。 -
效率：
forEach()方法的效率很高，因为它只遍历数组或可迭代对象中的每个元素一次。 -
返回值：
forEach()方法没有返回值。 -
是否改变原始数组：
forEach()方法不会改变原始数组。
-
-
map() 方法
-
功能：
map()方法用于遍历数组或可迭代对象中的每个元素，并将回调函数应用于每个元素。回调函数接受三个参数：当前元素、当前元素的索引以及数组或可迭代对象本身。map()方法会将回调函数的返回值作为新数组的元素，并返回这个新数组。 -
应用场景：
map()方法适用于需要遍历数组或可迭代对象中的每个元素并生成一个新数组的情况。例如，可以使用map()方法将数组中的每个元素增加 1，并生成一个新数组。 -
兼容性：
map()方法在所有现代浏览器中都受支持。 -
效率：
map()方法的效率很高，因为它只遍历数组或可迭代对象中的每个元素一次。 -
返回值：
map()方法返回一个新数组。 -
是否改变原始数组：
map()方法不会改变原始数组。
-
-
filter() 方法
-
功能：
filter()方法用于遍历数组或可迭代对象中的每个元素，并将回调函数应用于每个元素。回调函数接受三个参数：当前元素、当前元素的索引以及数组或可迭代对象本身。filter()方法会将回调函数返回 true 的元素作为新数组的元素，并返回这个新数组。 -
应用场景：
filter()方法适用于需要遍历数组或可迭代对象中的每个元素并过滤出符合特定条件的元素的情况。例如，可以使用filter()方法从数组中过滤出所有大于 10 的元素，并生成一个新数组。 -
兼容性：
filter()方法在所有现代浏览器中都受支持。 -
效率：
filter()方法的效率取决于回调函数的复杂度。如果回调函数很简单，那么filter()方法的效率就会很高。 -
返回值：
filter()方法返回一个新数组。 -
是否改变原始数组：
filter()方法不会改变原始数组。
-
-
find() 方法
-
功能：
find()方法用于遍历数组或可迭代对象中的每个元素，并将回调函数应用于每个元素。回调函数接受三个参数：当前元素、当前元素的索引以及数组或可迭代对象本身。find()方法会返回第一个使回调函数返回 true 的元素。 -
应用场景：
find()方法适用于需要遍历数组或可迭代对象中的每个元素并找到第一个符合特定条件的元素的情况。例如，可以使用find()方法从数组中找到第一个大于 10 的元素。 -
兼容性：
find()方法在所有现代浏览器中都受支持。 -
效率：
find()方法的效率取决于回调函数的复杂度。如果回调函数很简单，那么find()方法的效率就会很高。 -
返回值：
find()方法返回第一个使回调函数返回 true 的元素。如果数组或可迭代对象中没有元素使回调函数返回 true，则find()方法返回undefined。 -
是否改变原始数组：
find()方法不会改变原始数组。
-
-
findIndex() 方法
-
功能：
findIndex()方法用于遍历数组或可迭代对象中的每个元素，并将回调函数应用于每个元素。回调函数接受三个参数：当前元素、当前元素的索引以及数组或可迭代对象本身。findIndex()方法会返回第一个使回调函数返回 true 的元素的索引。 -
应用场景：
findIndex()方法适用于需要遍历数组或可迭代对象中的每个元素并找到第一个符合特定条件的元素的索引的情况。例如，可以使用findIndex()方法从数组中找到第一个大于 10 的元素的索引。 -
兼容性：
findIndex()方法在所有现代浏览器中都受支持。 -
效率：
findIndex()方法的效率取决于回调函数的复杂度。如果回调函数很简单，那么findIndex()方法的效率就会很高。 -
返回值：
findIndex()方法返回第一个使回调函数返回 true 的元素的索引。如果数组或可迭代对象中没有元素使回调函数返回 true，则findIndex()方法返回 -1。 -
是否改变原始数组：
findIndex()方法不会改变原始数组。
-
-
some() 方法
-
功能：
some()方法用于遍历数组或可迭代对象中的每个元素，并将回调函数应用于每个元素。回调函数接受三个参数：当前元素、当前元素的索引以及数组或可迭代对象本身。some()方法会返回true，如果数组或可迭代对象中至少有一个元素使回调函数返回true；否则，返回false。 -
应用场景：
some()方法适用于需要遍历数组或可迭代对象中的每个元素并确定是否存在至少一个元素符合特定条件的情况。例如，可以使用some()方法确定数组中是否存在大于 10 的元素。 -
兼容性：
some()方法在所有现代浏览器中都受支持。 -
效率：
some()方法的效率取决于回调函数的复杂度。如果回调函数很简单，那么some()方法的效率就会很高。 -
返回值：
some()方法返回true，如果数组或可迭代对象中至少有一个元素使回调函数返回true；否则，返回false。 -
是否改变原始数组：
some()方法不会改变原始数组。
-
-
every() 方法
-
功能：
every()方法用于遍历数组或可迭代对象中的每个元素，并将回调函数应用于每个元素。回调函数接受三个参数：当前元素、当前元素的索引以及数组或可迭代对象本身。every()方法会返回true，如果数组或可迭代对象中的所有元素都使回调函数返回true；否则，返回false。 -
应用场景：
every()方法适用于需要遍历数组或可迭代对象中的每个元素并确定所有元素是否都符合特定条件的情况。例如，可以使用every()方法确定数组中的所有元素是否都大于 10。 -
兼容性：
every()方法在所有现代浏览器中都受支持。 -
效率：
every()方法的效率取决于回调函数的复杂度。如果回调函数很简单，那么every()方法的效率就会很高。 -
返回值：
every()方法返回true，如果数组或可迭代对象中的所有元素都使回调函数返回true；否则，返回false。 -
是否改变原始数组：
every()方法不会改变原始数组。
-
-
for...of 循环
-
功能：
for...of循环用于遍历数组或可迭代对象中的每个元素。for...of循环会自动将数组或可迭代对象中的每个元素迭代出来，并将其作为变量存储。 -
应用场景：
for...of循环适用于需要遍历数组或可迭代对象中的每个元素并执行特定操作的情况。例如，可以使用for...of循环将数组中的每个元素打印到控制台，或者将数组中的每个元素增加 1。 -
兼容性：
for...of循环在所有现代浏览器中都受支持。 -
效率：
for...of循环的效率很高，因为它只遍历数组或可迭代对象中的每个元素一次。 -
返回值：
for...of循环没有返回值。 -
是否改变原始数组：`for...of
-
