js中map、find、findIndex、some、every、filter、reduce等常用循环遍历

前言

随着ES6的推出，js中循环遍历的方法越来越多，但它们之间的功能有很多差异，本篇文章对js中比较常用的循环遍历方法做了一些简单的总结归纳。

一、for循环

for循环在js中是比较早的遍历方法

for (let i = 0; i < 10; i++) {
   console.log(`第${i}次循环`);
}

在for循环当中可以使用break终止循环以及continue跳过本次循环

for (let i = 0; i < 10; i++) {
  if (i === 4) break; // 终止后面的循环语句
  console.log(`第${i}次循环`);
}

for (let i = 0; i < 10; i++) {
  if (i === 4) continue; // 跳过本次循环，继续执行后面的循环
  console.log(`第${i}次循环`);
}

for…of遍历数组（也可以使用break和continue）

const arr = ['a', 'b', 'c', 'd', 'e']
for (let i of arr) {
  console.log(i); // a, b, c, d, e
}

for…in能够遍历对象属性以及数组下标（也可以使用break和continue）

const obj = {
  name: '小明',
  age: 18,
  sex: '男'
}
for (let i in obj) {
  console.log(i); // name, age, sex
}
const arr = ['a', 'b', 'c', 'd', 'e']
for (let i in arr) {
  console.log(i); // 0, 1, 2, 3, 4
}

二、forEach

forEach()遍历数组的时候可以改变自身，没有返回值，不能使用break和continue终止和跳出循环

forEach(function(value, index, array) {
  .....
})

• 第一个参数value：必须，是当前遍历的元素
• 第二个参数index：可选，是当前遍历元素的索引
• 第三个参数array：可选，是当前正在遍历的数组

const arr = [1, 2, 3, 4, 5]
arr.forEach((value, index, arr) => {
  arr[index] = arr[index] * 10
})
console.log(arr); // [10, 20, 30, 40, 50]

如果数组中的每一项为引用数据类型，则可以通过第一个参数修改自身的值

const Arr = [
  { num: 1 },
  { num: 2 },
  { num: 3 }
]
Arr.forEach(item => {
  item.num = item.num + 10
})
console.log(Arr); // [{num: 11},{num: 12},{num: 13}]

forEach不能使用break和continue终止和跳出循环
如果想要跳出和终止循环可采用其它的方式

forEach可以采用return false来跳出本次循环

const arr = [1, 2, 3, 4, 5]
arr.forEach(item => {
  if (item === 4) return
  console.log(item) // 1, 2, 3, 5
})

forEach可以采用抛出异常(try catch)来终止循环

const arr = [1,2,3,4,5]
try{
  arr.forEach((item) => {
    if (item === 3) {
      throw new Error('end')
    }
    console.log(item) // 1, 2
  })
} catch (e) {
  if(e.message === 'end') throw e
}

**注：**用forEach时不常终止循环，故此种方式一般很少用到

三、map

map()即数组的映射，它不会改变原来的数组，而是将处理的结果返回为一个新的数组

const Arr = [1, 2, 3, 4, 5]
const newArr = Arr.map(item => {
  return item * item
})
console.log(Arr); // [1, 2, 3, 4, 5]
console.log(newArr); // [1, 4, 9, 16, 25]

四、find

find()返回符合条件的第一个数组元素值，没有则返回undefined

const arr = [15, 25, 35, 45, 55]
const result = arr.find(item => {
  return item > 30
})
console.log(result); // 35
}

五、findIndex

findIndex()方法常用来查找数组中满足条件的第一个元素的下标，如果数组总没有符合条件的元素，则返回-1

const arr = [15, 25, 35, 45, 55]
const result = arr.findIndex(item => {
  return item > 30
})
console.log(result); // 2

六、some

some()用来检测数组中的元素是否满足指定条件

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false

const arr = [15, 25, 35, 45, 55]
const result = arr.some((item, index) => {
  console.log(index) // 0, 1, 2
  return item > 30
})
console.log(result); // true

七、every

与some()相反，every()用于检测数组所有元素是否都符合指定条件

• 如果有一个元素不满足条件，则表达式返回false , 剩余的元素不会再执行检测。
• 如果所有的元素都满足条件，则返回true

const arr = [15, 25, 35, 45, 55]
const result = arr.every((item, index) => {
  console.log(index) // 0, 1, 2, 3
  return item < 40
})
console.log(result); // false

八、filter

filter()用于过滤数组，返回满足指定条件的新数组

const Arr = [11, 14, 32, 47, 48, 53, 56, 70]
const newArr = Arr.filter(item => {
  return item % 2 === 0
})
console.log(Arr); // [11, 14, 32, 47, 48, 53, 56, 70]
console.log(newArr); // [14, 32, 48, 56, 70]

九、reduce

reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值

arr.reduce(function(prev,cur,index,arr){
...
}, init);

• prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
• cur 必需。表示当前正在处理的数组元素；
• index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为 0，否则起始索引为1；
• arr 可选。表示原数组；
• init 可选。表示初始值
  循环遍历能做的事情，reduce()几乎都能做，下面以数组求和为例

const arr = [1, 2, 3, 4, 5]
const result = arr.reduce((pre, cur) => {
  return pre + cur
})
console.log(result); // 15