1、for循环
最普通的遍历方法。循环条件总比循环体要多执行一次。
语法:
for (let i = num; i < Array.length; i++) { } // 语句1:(代码块)开始前执行;语句2:定义运行循环(代码块)的条件;语句3:在循环(代码块)已被执行之后执行
案例:
const arr = [1, 2, 3, 5, 0, 14, 17, 20],
arr2 = []
for (let i = 0; i < arr.length; i++) {
arr2.push(arr[i] * 2)
}
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]
2、for of
语法:
for (let val of Array) { }
案例:
const arr = [1, 2, 3, 5, 0, 14, 17, 20],
arr2 = []
for (const val of arr) {
arr2.push(val * 2)
}
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]
3、for in
for in 语句用于循环对象属性。虽然也可以遍历数组,但是不建议用(容易出bug,比如它会遍历Array.prototype的属性与方法等)。
循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
注意: 不要使用 for in 语句来循环数组的索引,你可以使用 for 语句替代。
语法:
for (let index in Object / Array) { }
案例:
const person = { name: '小红', age: 18, job: '医生' }, allPropertys = []
for (const i in person) {
allPropertys.push(i)
}
console.log(allPropertys) // ['name', 'age', 'job']
4、forEach
forEach() 方法用于遍历数组,无返回值。
注意: 1)forEach() 对于空数组是不会执行回调函数的。2)forEach() 本身是不支持 continue 与 break 语句的。
语法:
Array.forEach((item, index, arr) => {}) // item当前元素、index当前索引、arr当前数组
案例:
const arr = [1, 2, 3, 5, 0, 14, 17, 20],
arr2 = []
arr.forEach((item) => {
arr2.push(item * 2)
})
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]
5、map
map() 方法用于遍历数组,返回一个经过函数处理后的新数组。
map() 方法按照原始数组元素顺序依次处理元素。
注意: 1)map() 不会对空数组进行检测。2)map() 不会改变原始数组。
语法:
Array.map((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组
const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const arr2 = arr.map((item, index, arr) => item * 2)
console.log(arr, arr2) // [1, 2, 3, 5, 0, 14, 17, 20] [2, 4, 6, 10, 0, 28, 34, 40]
6、filter
filter() 方法用于筛选数组中满足条件的元素,返回一个新数组。
注意: 1)filter() 不会对空数组进行检测。2)filter() 不会改变原始数组。
语法:
Array.filter((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组
const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const filteredArr = arr.filter((item, index, arr) => {
return item < 5
})
console.log(filteredArr) // [1, 2, 3, 0]
7、every
every() 方法用于检测数组所有元素是否都符合指定条件,返回一个布尔值。
every() 方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
注意: 1)every() 不会对空数组进行检测。2)every() 不会改变原始数组。
语法:
Array.every((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组
案例:
const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const judge = arr.every((item, index, arr) => {
return item < 18
})
console.log(judge) // false
8、some
some() 方法用于检测数组中的元素是否有满足指定条件的,返回一个布尔值。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: 1)some() 不会对空数组进行检测。2)some() 不会改变原始数组。
语法:
Array.some((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组
案例:
const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const judge = arr.some((item, index, arr) => {
return item > 18
})
console.log(judge) // true
9、reduce
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。(从左到右做累加可以用reduceRight() )
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
Array.reduce((item, index, arr) => { }) // item当前元素、index当前索引、arr当前数组
案例:
const arr = [1, 2, 3, 5, 0, 14, 17, 20]
const sum = arr.reduce((total, num) => {
console.log(total, num)
return total + num
})
console.log(sum) // 62
感谢您读完本文!如果本文对您有帮助,请点个赞呗,您的点赞是对我最大的支持和认可!
我的公众号:大前端教程,欢迎关注,会定期更新前端知识,希望能帮到您。