当我们需要遍历一个数组时,第一个想到的就是for,然后用length去判断条件,之后++,但着似乎有些过于老套了。本文主要收集各种遍历方法,主要针对数组,也会有关于对象、字符串的,看完它,你会对遍历有一个新的认识。
params
const ArrayList = [
{name: '张三', age: 18},
{name: '李四', age: 20}
]
const ObjectParams = {
name: '孙晓萌',
age: '19'
}
const StringParams = '女帝'
基础for循环
最传统的for{.....}
// 遍历Array
for (let i = 0; i < ArrayList.length; i++) {
console.log(ArrayList[i])
}
// 遍历Object
// 你会发现它并没有走进这个for循环,因为ObjectParams.length === undefined
for (let i = 0; i < ObjectParams.length; i++) {
console.log(ObjectParams[i])
}
// 遍历String
for (let i = 0; i < StringParams.length; i++) {
console.log(StringParams[i])
}
for in 循环 为遍历数组而生
全能了... 可以遍历数组、对象、字符串
for (let i in ArrayList) {
console.log(ArrayList[i]) // i输出为index
}
for (let i in ObjectParams) {
console.log(ObjectParams[i]) // i输出为key
}
for (let i in StringParams) {
console.log(StringParams[i]) // i输出为index
}
for of 循环
es6引入的
<div class="reference">for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩。。。for...of循环本质上就是调用这个接口产生的遍历器. for...of</div>
for (let i of ArrayList) {
console.log(i)
}
// 数组原生具备iterator接口(即默认部署了Symbol.iterator属性),for...of循环本质上就是调用这个接口产生的遍历器
ObjectParams[Symbol.iterator] = ArrayList[Symbol.iterator].bind(ArrayList)
for (let i of ObjectParams) {
console.log(i) // 输出结果与直接遍历ArrayList一样,Object默认是不具备Symbol.iterator属性的,因此无法对Object用for of进行遍历
}
for (let i of StringParams) {
console.log(i)
}
forEach循环
数组特有... 不可break。 forEach()方法是ES5.1标准引入的。
ArrayList.forEach((item, index) => {
console.log(item, index) // item当前下标对象 index下标
})
while循环
let i = 0
while (i < ArrayList.length){
console.log(ArrayList[i])
i++
}
let j = 0
// 你会发现它并没有走进这个while循环,因为ObjectParams.length === undefined
while (j < ObjectParams.length){
console.log(ObjectParams[j])
j++
}
let k = 0
while (k < StringParams.length){
console.log(StringParams[k])
k++
}
do while 循环
let i = 0
do {
console.log(ArrayList[i])
i++
}
while (i < ArrayList.length)
let j = 0
do {
console.log(ObjectParams) //会输出 因为do while是先走do语句
j++
}
// 你会发现它并没有走进这个while循环,因为ObjectParams.length === undefined
while (j < ObjectParams.length)
let k = 0
do {
console.log(StringParams[k])
k++
}
while (k < StringParams.length)
map
数组特有... 不可break
ArrayList.map((item, index) => {
console.log(item, index)
})
跳出for循环
break 语句用于跳出循环。上述几种方法中forEach和map不支持break..
continue 用于跳过循环中的一个迭代。 上述几种方法中forEach和map不支持continue..
总结
遍历数组用forEach、map(如果你不需要中断它),需要中断的话就选for...of吧
遍历字符串for..of, for...in
遍历对象for...inwhile和do while的区别
while先判断条件,do while先执行一次再判断条件。