常用数组循环方式

145 阅读3分钟

从es5到es6我们接触了很多有关数组遍历的方法,每个方法都有其特点,以下对日常常用的一些数组遍历方式进行简单的收集总结

1.for循环
for循环为最基本的数组遍历方式,遍历数组每一项,默认打印数组的索引

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

2.forEach()
forEach()方法没有返回值,并且传入的回调函数,遍历的是数组的每一项,并不能直接修改原数组,不能使用break和continue

// forEach
let arr = [1,2,3,2]
arr.forEach(function(ele,index,arr){
  console.log(ele,index,arr)
}

3.map()
map()方法返回一个新数组,新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。不会改变原数组的值

// map
let arr = [1,2,3,2]
const result = arr.map(function(value){
     value += 1
    return value
})
console.log(arr,result)

4.filter()
filter()方法返回符合条件的元素,如果不做筛选处理,也可做基础循环方法使用

// filter
let arr = [1,2,3,2]
let result = arr.filter(function(value){
// console.log(value)
   return value==2
})
console.log(arr,result)

5.some()
some()方法返回一个bool值 只要有一个符合条件就返回true

// some
let arr = [1,2,3,2]
let result = arr.some(function(value){
    return value==2
})  
console.log(arr,result)

6.every()
every()方法返回一个bool值 只有有一个不符合条件就返回false

// every
let arr = [1,2,3,2]
let result = arr.every(function(value){
    return value==2
})  
console.log(arr,result)

7.reduce()
reduce() 第一个参数是回调函数第二个参数表示初始值,函数参数有四个:
(1).上一次回调的返回值(第一次是初始值)
(2).正在处理的元素
(3).正在处理的元素的索引
(4).当前数组
常用方式

let arr = [1,2,3,2]
// 累加器
let sum = arr.reduce(function(prev,cur,index,arr){
     return prev+cur
},0)
console.log(sum)
// 取最大值
let max= arr.reduce(function(prev,cur){
    return Math.max(prev,cur)
})
console.log(max)
// 去重
let newArr = arr.reduce(function(prev,cur){
    prev.indexOf(cur)==-1&& prev.push(cur)
    return prev
},[])
console.log(newArr)

8.for..in
for..in 循环
(1).index索引为字符串型数字,不能直接进行几何运算
(2).遍历顺序有可能不是按照实际数组的内部顺序
(3).使用for in会遍历数组所有的可枚举属性,包括原型

let arr = [1,2,3,2]
Array.prototype.foo= function(){
    console.log('foo')
}
for(let index in arr){
    console.log(index,arr[index])
}

9.for..of
for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。

let arr = [1,2,3,2]
 // values()方法默认可以不写,取value值
 for( let item of arr.values()){
   console.log(item)
 }
 //keys()方法返回数组的索引
 for( let item of arr.keys()){
   console.log(item) 
 }
 // entries()可以返回数组的索引和值
 for( let [index,item] of arr.entries()){
   console.log(index,item) 
 }

10.find()
find()返回第一个通过测试的元素,不改变元素组

let arr = [1,2,3,2]
let res = arr.find(function(value){
    return value == 2
})
console.log(arr,res) 

11.findIndex() findIndex()返回第一个符合条件的元素的索引

let arr = [1,2,3,2]
let res = arr.findIndex(function(value){
    return value == 2
})
console.log(arr,res)