遍历数组的12种方法

• 第一种:普通for循环

for(var i = 0; i < arr.length;i++ ){ //代码 } 

• 第二种:forEach循环

 arr.forEach((item,index,arr)=>{ //代码 }) forEach接收一个回调函数作为参数,而这个回调函数有接受三个参数,作为参数。item是每个元素,index元素在数组中的下标,arr数组本身。 没有返回值！ 

• 第三种:map循环

 var brr= arr.map((item,index,arr)=>{ //代码 return item * 2; }) map的用法和forEach差不多。但是map是有返回值的。他的返回值是一个新数组 arr---->[1,2,3] brr---->[2,4,6] 

• 第四种:for–of

 只有是现实iterator 接口的才能用for---of.对象不能 for(var item of arr){ //代码 } 

• 第五种:filter

 var arr = [ {name:'张三',age:'20'}, {name:'李四',age:"50"} ] arr.filter(item=>{ return item.name; //返回值是 arr本身，所以元素的name都为true }) arr.filter(item=>{ return item.age>30; //[{name:"李四",age:"50"}] }) //接受一个回调函数作为参数,返回值是一个新数组 

• 第六种:every遍历

 every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。(全部符合条件) var arr=[50,6,70,80]; arr.every((item,index,arr)=>{ return item > 50; //每一项数据都要大于50 }) //false 

• 第七种:some遍历

 some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。(只要有一个符合) var arr=[50,6,70,80]; arr.some((item,index,arr)=>{ return item > 50; //只要有一项数据都要大于50 }) //true 

• 第八种:reduce

 reduce()方法接收一个函数作为累加器,数组中每个值(从左往右)开始缩减,最重为一个值 [1,2,3].reduce((a,b) => { return a + b;//6 }) [1,2,3].reduce((previousValue,currentValue,index,arr)=>{ return previousValue + currentValue; }) reduce还有第二个参数，我们可以把这个参数作为第一次调用callback时的第一个参数，上面这个例子因为没有第二个参数，所以直接从数组的第二项开始，如果我们给了第二个参数为5 [1,2,3].reduce((previousValue,currentValue,index,arr)=>{ return previousValue + currentValue; },5) // 6, 8 ,11 第一次调用的previousValue的值就用传入的第二个参数代替， 

• 第九种：reduceRight

 reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。 reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。 var arr = [0,1,2,3,4]; arr.reduceRight(function (preValue,curValue,index,array) { return preValue + curValue; }); // 10 7 = 4 + 3 第一次 9 = 2 + 7 第二次 10 = 9 + 1 第三次 10 = 10 + 0 第四次 

• 第十种:find

 find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined var stu = [ { name: '张三', gender: '男', age: 20 }, { name: '王小毛', gender: '男', age: 20 }, { name: '李四', gender: '男', age: 20 } ] function getStu(element){ return element.name == '李四' } stu.find(getStu) //返回结果为 //{name: "李四", gender: "男", age: 20} 

• 第十一种:findIndex

 对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。 findIndex 不会改变数组对象!!!!! [1,2,3].findIndex(function(x) { x == 2; }); //1 [1,2,3].findIndex(x => x == 4); //-1 

• 第十二种:keys,values,entries

 ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历 for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"