关于前端:js中mapfindfindIndexsomeeveryfilterreduce等常用循环遍历

前言

随着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