數組與對象、字符串遍歷方法大全

當咱們須要遍歷一個數組時，第一個想到的就是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先執行一次再判斷條件。

源碼地址