乐趣区

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

jiezi

前言

随着 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
退出移动版