JavaScript数组遍历的方法总结

数组遍历

for()

for (let index = 0; index < array.length; index++) {
	const element = array[index];
    console.log(element)
}

map()

语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

有返回值返回一个新的数组

var arr = [1,56,4845,1,5416,15,61,89];
arr.map(function(value,index,arr){
    
})

foreach()

语法

array.forEach(function(currentValue, index, arr), thisValue)

var arr = [1,56,4845,1,5416,15,61,89];
arr.forEach(function(value,index,arr){
    console.log(`每个数组元素的值${value}`)；
    console.log(`每个数组索引的值${index}`)；
    console.log(`数组本身${arr}`)
})；

参数	描述
function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。
thisValue	可选。传递给函数的值一般用 “this” 值。 如果这个参数为空， “undefined” 会传递给 “this” 值

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

返回值:	undefined
JavaScript 版本:	ECMAScript 3

some();（es6新增）

array.some(function(currentValue,index,arr),thisValue)

参数说明

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值：	布尔值。如果数组中有元素满足条件返回 true，否则返回 false。
JavaScript 版本:	1.6

every();（es6新增）

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数reduce组进行检测。

注意： every() 不会改变原始数组。

语法

array.every(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值：	布尔值。如果所有元素都通过检测返回 true，否则返回 false。
JavaScript 版本:	1.6

filter();

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值：	返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
JavaScript 版本:	1.6

实例

返回数组 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

输出结果为:

32,33,40

reduce()

定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
function(total,currentValue, index,arr)	必需。用于执行每个数组元素的函数。
initialValue	可选。传递给函数的初始值

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

返回值:	返回计算结果
JavaScript 版本:	ECMAScript 3

for in

for (variable in object)

• variable

  在每次迭代时，variable会被赋值为不同的属性名。

• object

  非Symbol类型的可枚举属性被迭代的对象。

for of

for (variable in object);

• variable

  在每次迭代时，variable会被赋值为不同的属性名。

• object

  数组或者

find

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined，为S6新增的语法。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

find()是ES6在数组的原型（Array.prototype）上进行了添加，同样添加了还有findIndex()

find()内部有两个参数，第一个参数是回调函数，第二个参数是回调函数中this的指向对象，通常为数组本身。

回调函数内有三个参数：

• 第一个参数是遍历到的当前的元素

• 第二个参数是数组的索引（可选）

• 第三个是数组本身（可选）

  下边的代码摘自MDN的文档demo

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';//=>return true;
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

数组对象的各种方法

可以查阅MDN提供的文档