1-3 数组的遍历方法

项目中想要将数据重组为我们想要的格式，经常用到的对数组的遍历方法有哪些呢？我们来列举一下：

let arr = [1, 2, 3]

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

forEach

arr.forEach(function(item, index){
  console.log(item, index) // 1 2 3
})

在for 循环里还有两个常用的关键字，叫做 break 和 continue，下面我们来对比一下在 for 循环跟forEach 的区别

break 指的是结束循环
continue 是结束本次循环，开始下次循环

for(let i = 0; i< arr.length; i++){
  if (arr[i] == 2){
    // break  
    // continue  
  }
  console.log('break' + arr[i]) // 1 
  console.log('continue' + arr[i])  // 1 3
}

arr.forEach(function(item, index){
   if (arr[index] == 2){
    // break  
    // continue
  }
  console.log('break' + index) // 报错 
  consol.log('continue' + index)  // 报错
})

我们可以看到 forEach 在循环的过程中是无法跳出循环的,因为它不支持 break，也不支持 continue

map

map跟forEach又有什么区别呢？下面我们来举例看一下：

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

forEach 只是一个简单的循环
map 会遍历数组里面的每一个元素，根据回调操作形成一个新的数组，并不会改变原有的数组的值

filter

arr.filter(function(value){
  console.log(value)
})
// filter 返回了一个新的数组，新数组是经过我们筛选的元素
  
let result = arr.filter(function(value){
  return value == 2
})
console.log(arr, result)  // [1, 2, 3]   2
// filter 会找到一个符合结果的数据，形成一个新的数组

some

遍历数组中是否有复合条件的一些元素，返回的是 boolean 类型的值

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

every

every 是检测当前数组的每一个是否都符合当前的判断条件，全部符合才会返回true，其中一个不符合条件就会返回 false

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

reduce

prev 表示上次调用时候的返回值，第一次返回的对应的是初始值
cur 表示当前正在处理的元素
index 是当前正在处理的索引
array 是当前数组

let sum = arr.reduce(function(prev, cur, index, array){
  return prev + cur   // 输出当前数组的和
}, 0)
console.log(sum)  // 6


let max = arr.reduce(function(prev, cur){
  return Math.max(prev, cur)   // 输出当前数组最大的值
}, 0)
console.log(max)  // 3

// 数组去重
let arr = [1, 2, 3, 2, 1, 4]
let res = arr.reduce(function(prev, cur){
  prev.indexOf(cur)  == -1 &&  prev.push(cur)
  return prev
}, [])
console.log(res)  // 1, 2, 3, 4

for in

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

for in 在遍历数组的时候是有问题的，不应该在数组当中去使用

ES6中数组的遍历方式

find

// 返回的是第一个通过测试的元素
let res = arr.find(function(value){
  return value == 2
})
console.log(res)  // 2

findIndex

// 返回的是第一个元素的索引
let res = arr.findIndex(function(value){
  return value == 2
})
console.log(res)  // 1

for of

for(let item of arr){
  console.log(item)  // 1 2 3
}

for(let item of arr.values()){
  console.log(item)  // 1 2 3
}

for(let item of arr.keys()){
  console.log(item)  // 0 1 2
}

// 既有内容也有下标
for(let item of arr.entries()){
  console.log(item)  // 0 1    1 2    2 3
}

以上我们总结了在ES5 还有 ES6 里面，数组的遍历方式，每一种遍历方式各自有各自的特点，我们应该在每次遍历的时候选择最合适的一种方式去循环遍历我们的数组