本文已参与「新人创作礼」活动，一起开启AdminJS创作之路。
数组遍历是我们针对数组最频繁的操作。下面我们看一下常见的数组的遍历方式。
1. for循环
这是最基本的实现方式
var arr=[1,2,3]
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
2. forEach( )函数
arr.forEach( )方法允许为数组的每个元素都运行一个函数，forEach( )方法也是我们遍历数组用的比较多的方法，forEach( )函数接收一个回调函数，参数分别表示当前执行的元素的值，当前值的索引和数组本身。
var arr = [1, 3, 6, 90, 23];
arr.forEach(function (element, index, array) {
console.log(index + ":" + element);
});
3. map( )函数
map( )不改变原数组，它对数组的每个元素都调用函数，并返回结果数组。
var arr = [1, 3, 6, 90, 23];
var result = arr.map(function (element, index, array) {
console.log(index);
return element * element;
});
console.log("result: ===", result);
在使用map函数的时候一定要注意：在map( )函数的回调函数中需要通过return将处理后的值进行返回，否则会返回undefined.
map和forEach的区别
定义：
- forEach() 针对每一个元素执行提供的函数。
- map()创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。 区别：
- forEach()返回值是undefined，不可以链式调用。
- 没有办法终止或者跳出forEach( )循环（不能使用break），除非抛出异常，使用return也不能返回到外层函数，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();
- map里可以用return ,而foreach里用return不起作用，foreach不能用break，会直接报错
- forEach( )允许callback更改原始数组的元素。map()返回新的数组，原数组不会改变。
- 性能方面，for循环是在有js的时候就有了，forEach()和map()是es5的时候出来的，单纯从性能上说，map和forEach方法是远远落后for语句的，而map( )还需要返回一个等长的数组。for性能最好，其次是forEach，再者是map。
4. some( )函数与every( )函数
some( )函数与every( )函数的相似之处都是在对数组进行遍历的过程中，判断数组中是否有满足条件的元素，如果有满足条件的就返回true,否则返回false.
some()与every()的区别在于:some( )函数只要数组中某个元素满足条件就返回true,不会在对后面的元素进行判断。而every( )函数是数组中每个元素都要满足条件时才会返回true.
- 要判断数组中是否有大于6的元素的时候，可以通过
some( )函数来处理。 - 而要判断数组中是否所有的元素都大于6，则需要通过
every( )函数来处理。
function fn(element, index, array) {
return element > 6;
}
var result = [1, 2, 3, 4, 5].some(fn); //false
console.log(result);
function fn(element, index, array) {
return element > 6;
}
var result = [1, 2, 3, 4, 5, 7].every(fn); //false
console.log(result);
5. find( )函数
find( ) 函数用于数组的遍历，当找到第一个满足条件的元素值时，则直接返回该元素值，如果都找不到满足条件的，则返回undefined。find( )方法的参数与forEach是一样的。
var arr = [1, 3, 6, 90, 23];
const result = arr.find(function (element, index, array) {
return element > 6;
});
console.log(result); // 90
6. filter( )函数
filter方法是应用于过滤的方法，但是它也可以遍历函数
var fn = function (x) {
return x % 2 !== 0;
};
var arr = [1, 2, 5, 6, 78, 9, 10];
var result = arr.filter(fn);
console.log(result);//[ 1, 5, 9 ]
7. reduce( )函数
reduce函数常用于对数组中的元素做累加的处理，也可以遍历数组
reduce函数最主要的作用就是做累加的操作，该函数接收一个函数作为累加器，将数组中的每个元素从左到右依次执行累加器，返回最终的处理结果。
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
求出数组中所有元素累加的和
var arr = [1, 2, 3, 4, 5, 6];
var sum = arr.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum);
统计出数组中每个元素出现的次数
var fun = function(arr){
return arr.reduce(function(accumulator,currentValue){
accumulator[currentValue]
?accumulator[currentValue]++
:(accumulator[currentValue]=1)
return accumulator
},{})//采用key-value的形式
}
console.log(fun([1,2,2,3,3,3,5,6]));//{ '1': 1, '2': 2, '3': 3, '5': 1, '6': 1 }
8. for of & for in（不推荐）
首先两者都可用于遍历
for of
for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句.
for in
- 一般用于遍历对象的可枚举属性(一般用于遍历对象的key)，以及对象从构造函数原型中继承的属性。对于每个不同的属性，语句都会被执行。
- 不建议使用for in 遍历数组，因为输出的顺序是不固定的。
- 如果迭代的对象的变量值是null或者undefined, for in不执行循环体，建议在使用for in循环之前，先检查该对象的值是不是null或者undefined
区别：
-
for in 适合遍历对象，for of 用于遍历数组
-
for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值且不包括数组的原型属性method和索引name
const arr = [1, 2, 3, 4, 5]
for (let value of arr) {
console.log(value)
}
//1
//2
//3
//4
//5
// 遍历对象 通常用for in来遍历对象的键名
const userInfo = {
name: 'zhangsan',
age: 20,
gender: 'male'
}
for (let item in userInfo) {
console.log(item) // 对象的key: name age gender
console.log(userInfo[item]) // 对象的value: zhangsan 20 male
}
以上内容仅供学习参考，如有错误欢迎大家指出