js遍历数组方法总结

第一种：for循环，也是最常见的

const arry= [33,66,88,55,44,99];
for(let i=0;i<arry.length;i++){
    console.log(arry[i])'
}
分析执行顺序：第一：i=0,然后比较 0<arry.length，然后执行代码块， 再执行i++ 结果是1， 在根据值1去比较 1<arry.length, 接着执行代码块，然后执行i++变成了2。当遇到break语句的时候，直接退出整个循环，而且也不进行i++的的步骤了。当遇见continue的时候，则不执行continue后面的语句，但是会执行i++这个步骤。 

第二种：forEach

语法：forEach( function(item,index,array){}) //当前元素（必须），下标（可选），数组（可选）。

注意：forEach用来遍历数组中的每一项，这个方法执行没有返回值，不影响原数组

const arry = [
            {id:1,name:'h'},
            {id:2,name:'i'},
            {id:3,name:'j'}
 ]

arry. forEach( function(item,index,arr){
      console.log(item.name==arr[index].name)  //true
    
})

 const arry2= [33,66,88,55,44,99];
 let sum = 0;
 arry2.forEach( function(item,index,array2){
        console.log(item)
        sum+=item    //求和
})

以下5种方法是迭代方法es5-----------------

第三种：map()

语法：array.map(function(item, index, array){ }).//当前元素（必须），下标（可选），数组（可选）。

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的新数组。

需要有return值，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组。

const numbers= [3,6,8,5,4,9];
let mapResult=numbers.map(function(item,index,arry){
    return item *2
})
console.log(mapResult);  //返回的数组都乘以2 ， [6,12,16,10,8,18]
如果没有return值，则返回[undefined,undefined,undefined,undefined,undefined,undefined]

第四种：filter

“过滤”、“筛选”, 对数组中的每一项运行给定函数，返回该函数会返回true的想项组成的新数组。指数组filter后，返回过滤后的新数组。

与map方法不同的是，filter方法的callback函数需要返回等于true值。如果为true，则通过，否则，不通过。不可以原数组。

const numbers= [3,6,8,5,4,9];
let filterResult=numbers.filter(function(item,index,arry){
    return item >5
})
console.log(filterResult) //[6,8,9]

第五种：some

对数组中的每一项运行给定函数，如果该函数对任意一项返回true,则返回true, 否则返回false.

const numbers= [3,6,8,5,4,9];
let someResult=numbers.some(function(item,index,arry){
    return (item >5)
})
console.log(someResult) //true, 应为只有一项大于5就返回true。如果都不大于5才返回false。

第六种：every

对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

const numbers= [3,6,8,5,4,9];
let everyResult=numbers.every(function(item,index,arry){
    return (item >0)
})
console.log(someResult) //true, 应为每一项都大于0

下面是归并方法去遍历-------------

第七种：reduce与reduceRight

语法：value.reduce(function(prev, cur, index, array ){
                 //prev(累加器)  ，cur(当前值)，index(项的索引)，array（数组对象）、initialValue(初始值,可选)
         },initialValue)

initialValue 表示reduce方法第一次执行时的初始值。如果有初始值，
prev就是这个初始值，如果没有初始值，就为数组第一个值。
这个方法迭代数组的所有项，然后构建一个最终返回的值。reduce这从数组的第一项开始，逐个遍历到最后。有俩个参数，一个在每项上调用的函数和（可选的）作为归并基础的初始值。而reduceRight是从最后一项还是遍历到第一项刚好与reduce相反。其他都基本一致。

var  values=[1,2,,3,4,5]
var  sum=value.reduce(function(prev, cur, index, array ){
   return prev+cur;
})
console.log(sum) //15  ,求和
//假设我们希望求数字90与数组 [ 1,2,3,4] 元素的和呢，那就这么写
let total = [1, 2, 3, 4].reduce((accumulator, current) => accumulator += current, 90); // 100  初始值是90。

//数组去重
let arr = [1, 2, 2, 4, null, null].reduce((accumulator, current) => {
    return accumulator.includes(current) ? accumulator : accumulator.concat(current);
}, []);

let arr = [...new Set([1, 2, 2, 4, null, null])]; // [1,2,4,null]  //数组去重

let arr = [1, 2, 2, 4, null, null].filter((item, index, arr) => arr.indexOf(item) === index); // [1,2,4,null]  数组去重

//数组降维，（把二维数组变成一维数组）
let arr = [[1,2],[3,4],[5,6]].flat();//[1, 2, 3, 4, 5, 6]

let arr = [[1,2],[3,4],[5,6]].reduce((accumulator, current)=>accumulator.concat(current),[]);//[1, 2, 3, 4, 5, 6]

以下是es6的语法---------

第八种：find

有返回值，返回第一个符合条件的元素对象。如果没有符合条件的成员，则返回undefined。

find方法用于找出第一个符合条件的数组成员。它的参数跟forEach方法是一样的；所有数组成员依次执行回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

const arr = [{name: '张三', age: 12}, {name: '李四', age: 14}];
let  obj = arr.find(e => {
	return e.name === '张三'
})
console.log(obj);  // print: {name: '张三', age: 12}

var value = [1, 5, 10, 15].find(function(element, index, array) {
  return element > 9;
});
var value2 = [1, 5, 10, 15].find(function(element, index, array) {
  return element > 20;
});
console.log(value); // 10 只要第一个找到了就返回。不在去返回二个值
console.log(value2); // undefined

第九种：findIndex

findIndex方法和find相似；不过它返回数组中符合条件的元素的索引。如果所有成员都不符合条件，则返回-1。

let value=[1, 2, 5, -1, 9].findIndex( (n) => n < 0  )
console.log(value) //3,只有数组中的第4个值小于0，他的索引是3，就返回索引3

var value = [1, 5, 10, 15].findIndex(function(element, index, array) {
  return element > 9;
});
var value2 = [1, 5, 10, 15].findIndex(function(element, index, array) {
  return element > 20;
});

console.log(value); // 2
console.log(value2); // -1

第十种：for … in

for-in循环实际是为循环”enumerable“对象而设计的，for in也可以循环数组，此方法遍历数组效率低，不推荐这样使用，for–in是用来循环带有字符串key的对象的方法。

var value = [1, 5, 10, 15]；
  for(let item in value){
           console.log(arr[item])
  }


//遍历json对象：缺点：只能获得对象的键名，不能直接获取键值。
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
 console.log("obj." + prop + " = " + obj[prop]);
}
// print: "obj.a = 1" "obj.b = 2" "obj.c = 3"

第十一种： for…of

for of为ES6提供，具有iterator接口，就可以用for of循环遍历它的成员。

var arr = [1, 5, 10, 15]；
for(let item of arr){
    console.log(item)
}
 // 字符串
let str = "hello";
for (let s of str) {
 console.log(s); // h e l l o
}
// 遍历数组
let list = [1, 2, 3, 4, 5];
for (let e of list) {
  console.log(e);
}
// print: 1 2 3 4 5
// 遍历对象
obj = {a:1, b:2, c:3};
for (let key of Object.keys(obj)) {
 console.log(key, obj[key]);
}
// print: a 1    b 2    c 3

https://blog.csdn.net/qq_33933205/article/details/107939180