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

szysky 發布于2019-08-22 16:40 / 1051人閱讀

摘要：本文主要收集各種遍歷方法，主要針對數組，也會有關于對象字符串的，看完它，你會對遍歷有一個新的認識。方法是標準引入的。

當我們需要遍歷一個數組時，第一個想到的就是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引入的

for...of語句在可迭代對象(包括 Array, Map, Set, String, TypedArray，arguments 對象等等)上創建一個迭代循環，對每個不同屬性的屬性值,調用一個自定義的有執行語句的迭代掛鉤。。。for...of循環本質上就是調用這個接口產生的遍歷器. for...of

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先執行一次再判斷條件。

源碼地址

GPU云服務器云服務器數組遍歷遍歷數組遍歷方法遍歷篩選數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94564.html

【譯】45種Javascript技巧大全

摘要：對進行序列化和反序列化避免使用和構造函數使用和構造函數是非常昂貴的操作，因為每次他們都會調用腳本引擎將源代碼轉換成可執行代碼。原文：45 Useful JavaScript Tips, Tricks and Best Practices 譯文：45個有用的JavaScript技巧，竅門和最佳實踐譯者：dwqs 在這篇文章中，我將分享一些JavaScript常用的技巧，竅門和最...

hufeng 2019-08-21 10:25 評論0 收藏0
JavaScript基礎大全（原型，閉包）[持續更新]

摘要：對象原型上的一個屬性，它指向了構造器本身。其中，構造器對象可用于實例化普通對象。基于代碼兼容性可讀性等方面的考慮，不建議開發者顯式訪問屬性或通過更改原型鏈上的屬性和方法，可以通過更改構造器對象來更改對象的屬性。基本語法 1.嚴格模式 use strict 作用消除JS語法的一些不合理、不嚴謹、不安全的問題，減少怪異行為并保證代碼運行安全提高編譯器解釋器效率，增加運行速度與...

miracledan 2019-08-20 16:11 評論0 收藏0
JavaScript：對Object對象的一些常用操作總結

摘要：一可以用作對象的復制可以用作對象的合并注意目標對象自身也會改變。對象四返回一個數組，包括對象自身的不含繼承的所有可枚舉屬性不含屬性的鍵名。該方法返回被凍結的對象。方法判斷一個對象是否被凍結。 JavaScript對Object對象的一些常用操作總結。一、Object.assign() 1.可以用作對象的復制 var obj = { a: 1 }; var copy = Object....

馬龍駒 2019-08-23 12:46 評論0 收藏0
Java--String--方法大全

摘要：本文介紹中的的常見方法。將此與另一個比較忽略大小寫。判斷字符串中是否包含方法傳入的字符串。分隔字符串成數組。修改方法作用返回數組參數的字符串表示形式。將此中的所有字符都轉換為大寫。 ?? ? ? ? 本文介紹Java中的String的常見方法。索引位置方法作用char charAt(...

forrest23 2021-11-23 09:51 評論0 收藏0
JavaScript編程注意事項、技巧大全

摘要：數組元素刪除應使用。用來序列化與反序列化結果為的值與對象相同不要使用或者函數構造器和函數構造器的開銷較大，每次調用，引擎都要將源代碼轉換為可執行的代碼。收藏自 JavaScript奇技淫巧45招 JavaScript是一個絕冠全球的編程語言，可用于Web開發、移動應用開發（PhoneGap、Appcelerator）、服務器端開發（Node.js和Wakanda）等等。JavaSc...

Shimmer 2019-08-21 10:24 評論0 收藏0