js数组遍历方法总结forEach、map、some、every、filter、reduce、reduceRight、while、for..in、for..of12种方法

数组遍历方法，本文涉及到的方法大概有 do while、while、for、map、some、every、filter、reduce、reduceRight、forEach、for…in、for…of 12种方法。

一、do…while

与 while 相比，添加满不满足，都会执行一次；do…while 后面 花括号{ }为可选项，不是必须;

var arr = [1,2,3,4] , count1 = 0, 
    k = arr.length;
do {
    // 代码块，条件不满足，也会执行一次
    console.log(arr[count1]);
    count1++;  
} while (count1 < k)
{
   // 此代码块，可选项，不是必须。条件满不满足，都会执行一次
   console.log('条件满不满足，执行一次'); // 条件满不满足，执行一次
}
// 控制台打印 1,2,3,4

二、while

只有当条件满足才会执行

var arr = [1,2,3,4], count = 0,  j = arr.length;
while (count < arr.length) {
    console.log(arr[count]);
    count++;
}
// 控制台打印 1,2,3,4

三、for

我项目使用此方法居多；do…while、while 使用的比较少

for (let i = 0; i < arr.length; i++){
    console.log('for循环', arr[i]);
}

四、map

此方法有返回值，并且不会改变原数组，会返回一个新数组。

var arr = [1,2,3,4];
var returnA = arr.map(item => {
    return item * 2
})
console.log(returnA) // 打印 [2, 4, 6, 8]

五、some

此方法有返回值，并且不会改变原数组，数组中有一个条件满足，就会返回true。

var arr = [1,2,3,4];
var returnB = arr.some(item => {
    return item > 2
})
console.log(returnB); // 打印 true 

六、every

此方法有返回值，并且不会改变原数组，数组中所有条件满足，才会返回true。与上面 some 恰好相反。

var arr = [1,2,3,4];
var returnC = arr.every(item => {
    return item > 2
})
console.log(returnC); // 打印 false 

七、filter

此方法有返回值，返会一个新数组，并且不会改变原数组，满足条件的值放到一个新数组里面返回。

var arr = [1,2,3,4];
var returnD = arr.filter(item => {
    return item > 2
})
console.log(returnD); // 打印 [3,4]

八、reduce

此方法有返回值，返回数组相加的结果，并且不会改变原数组。
curr： 当前值加上下一位值的和;
next： 当前循环下标下一位的值,
currentValue 当前循环的值;
thisArr 当前数组。
initialValue 可选。传递给函数的初始值(curr)

var arr = [1,2,3,4];

var returnE = arr.reduce((curr, next, currentValue, thisArr ) => {
    console.log(curr  , next, currentValue, currentIndex)
    return curr + next
},  initialValue);
console.log(returnE) // 打印 10

九、reduceRight

此方法有返回值，返回数组相加的结果，并且不会改变原数组。reduceRight 从数组最后一位开始遍历，reduce 从数组第一位开始遍历;
curr： 当前值加上下一位值的和;
next： 当前循环下标下一位的值,
currentValue 当前循环的值;
thisArr 当前数组。
initialValue 可选。传递给函数的初始值(curr)

var returnF = arr.reduce((curr, next, currentValue, thisArr ) => {
    return curr + next
}, initialValue );
console.log(returnF) // 打印 10

十、forEach

此方法没有返回值，forEach循环函数里面的 this 指的是 [1,2,3], 不能使用 es6 的箭头函数，会影响this指向.
注意: forEach() 对于空数组是不会执行回调函数的 详细查看此篇文章

var arr = [1,2,3];
// item：当前循环的值, index 当前值得下标, arr 当前循环的数组
var returnG  = arr.forEach(function(item, index, arr) {
  
    console.log('forEach', item, this);
}, [1,2,3])
// 第二个参数代表初始值
console.log(returnG); 
//forEach 1 (3) [1, 2, 3]
//forEach 2 (3) [1, 2, 3]
//forEach 3 (3) [1, 2, 3]

十一、for…in

for…in 用来循环数组或者对象，一般用来循环对象；下标 i 值 从0 开始；

var arr = [1, 2, 3];
for (leti in arr) {
    console.log(i, arr[i]);
}
// i 代码当前循环数组的下标， arr[i] 代表当前下标的值
// 0 1
// 1 2
// 2 3
var obj = {
    name: 'jim',
    age: 18
}
for (let i in obj) {
    console.log(i, obj[i]);
}
// i：代表当前循环对象的属性， obj[i]: 代表当前对象属性的值，输出 一下
// name jim
// age 18
// 给数组添加一个foo属性
arr1.foo = '4';
console.log(arr); // [1, 2, 3, foo: "4"]
console.log(arr.foo) // 4
// 再次循环
for(let i of arr){
    console.log(i, arr[i-1])
}
 // 1 1
//  2 2
//  3 3
// foo 4  // **for..in 可以循环出来**

十二、for…of

for…of 与 for…in 基本上没有区别，区别的地方
（1） 下标 i 值 从 1 开始，for…in 下标从0开始
（2）给数组添加 一个属性arr.foo = ‘4’，使用for…of 不会循环出 foo属性来。

// for..of
let arr = [1, 2, 3];
for(let i of arr){
    console.log(i, arr[i])
}
arr1.foo = '4';
console.log(arr); // [1, 2, 3, foo: "4"]
console.log(arr.foo) // 4
// 再次循环
for(let i of arr){
    console.log(i, arr[i-1])
}
 // 1 1
//  2 2
//  3 3  // **区别：for..of 不会循环出属性来**

十三、find

找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回;多个重复的值，也只是返回第一个；该方法有两个参数
第一个 function(item, index, arr){}
第二个 thisValue

var arr = [1, 2, 3];
var returnH = arr.find(function(item, index, arr){
	// this  代表find 函数 第二个参数 [2]
	console.log(this)
	return item == 2;
}, [2]);

console.log(returnH); // 2

find 函数内部的this值得是 第二个参数，会输出 [2]

十四、findIndex

找到第一个满足测试函数的元素并返回那个元素的索引下标，如果找不到，则返回 -1；多个重复的值，也只是返回第一个值的下标，从0 开始；
该方法有两个参数
第一个 function(item, index, arr){}
第二个 thisValue

var returnI = [1,2,2,3].findIndex(function(item){
	// this  代表第二个参数 [2]
    return item == 2
}, [3]);
console.log(returnI) // 1

findIndex 函数内部的this值得是 第二个参数，会输出 [3]

以上是整理的数组和对象的循环方法，有不对的地方还望大家指出。希望大家可以点个赞，谢谢。