数组与对象、字符串遍历方法大全

当我们需要遍历一个数组时，第一个想到的就是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...in
while和do while的区别 while先判断条件，do while先执行一次再判断条件。

源码地址