JS中六種For循環怎么使用

這篇文章主要介紹“JS中六種For循環怎么使用”，在日常操作中，相信很多人在JS中六種For循環怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS中六種For循環怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

for 循環在平時開發中使用頻率最高的，前后端數據交互時，常見的數據類型就是數組和對象，處理對象和數組時經常使用到 for 遍歷，因此下班前花費幾分鐘徹底搞懂這 5 種 for 循環。它們分別為：

• for

• for ... in

• for ... of

• for await .. of

• forEach

• map

一、各個 for 介紹

1、for

for 循環是出現最早，也是應用最普遍的一個遍歷，能夠滿足絕大多數的遍歷。可以遍歷 數組、對象、字符串，示例：

// 遍歷數組
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++){
  console.log(arr[i]);
}
//遍歷對象
var obj = {
  job: 'web worker',
  name:'前端代碼女神'
}
for (var i = 0,keys = Object.keys(obj); i< keys.length; i++){
  console.log(obj[keys[i]])
}

//遍歷字符串
let str = 'abc'
for (var i = 0; i < str.length; i++){
  console.log(str[i])
}

2、for ... in

for ... in 是在 ES5 中新增的，以任意順序迭代一個對象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。

// 遍歷數組
var arr = [1, 2, 3]
for (var i in arr ){
  console.log(i);//0 1 2
  console.log(arr[i]);//1 2 3
}
//遍歷對象
var obj = {
  job: 'web worker',
  name:'前端代碼女神'
}
for (var key in obj){
  console.log(key)// job name
  console.log(obj[key])// web worker  前端代碼女神
}
//遍歷字符串
let str = 'abc'
for (var i in str){
  console.log(i) // 0 1 2
  console.log(str[i]) // a b c
}

3、for ... of

for ... of 語句在可迭代對象(包括 Array、Map、Set、String、TypedArray、arguments 對象等等)上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句。

// 迭代 Array
var arr = [1, 2, 3]
for (var val of arr ){
  console.log(val);// 1 2 3
}
//迭代 String
let str = 'abc'
for (var val of str){
  console.log(val) // a b c
}
// 迭代 TypedArray - 一個類型化數組，描述了一個底層的二進制數據緩沖區！
let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);//0 255
}
// 迭代 Map - 對象保存鍵值對，能夠記住鍵的原始插入順序
let map = new Map([['a',1],['b',2]])
for (let key of map) {
  console.log('key',key)//['a',1] ['b',2] 
}
for (let [key,value] of map) {
  console.log(key) // a b
  console.log(value) // 1 2
}
// 迭代 Set
let set = new Set([1,2,3,2,1])
for (let val of set) {
  console.log(val)// 1 2 3
}

4、for await...of

創建一個循環，該循環遍歷異步可迭代對象以及同步可迭代對象，包括內置的 String、Array，類數組對象(arguments 或 nodeList)，TypedArray, Map, Set 和用戶定義的異步/同步迭代器。它使用對象的每個不同屬性的值調用要執行的語句來調用自定義迭代鉤子。

類似于 await 運算符一樣，該語句只能在一個async function 內部使用。

async function* asyncGenerator() {
  var i = 0;
  while (i < 3) {
    yield i++;
  }
}
(async function () {
  for await (num of asyncGenerator()) {
    console.log(num);// 0 1 2
  }
})();

5、forEach

forEach 是ES5版本發布的，按升序為數組中含有效值的每一項執行一次回調函數，那些已刪除或者未初始化的項將被跳過(例如在稀疏數組上)，一般認為是 普通for循環 的加強版。

// 遍歷數組
var arr = [1, 2, 3]
arr.forEach((item, index) => {
  console.log(index);//0 1 2
  console.log(item);// 1 2 3
})
//遍歷對象
var obj = {
  job: 'web worker',
  name:'前端代碼女神'
}
var keys = Object.keys(obj)
keys.forEach((key) => {
  console.log(key)// job name
  console.log(obj[key])// web worker  前端代碼女神
})

6、map

遍歷時可以返回一個新數組，新數組的結果是原數組中每個元素都調用一次提供的函數后返回的值。

// 遍歷數組
var arr = [1, 2, 3]
let newArr = arr.map((item) => item * 2)
console.log(newArr);//[2,4,6]

二、多個 for 之間區別

1、使用場景差異

for循環是最早最原始的循環遍歷語句，for 內部定義一個變量，按照條件進行循環遍歷，通常是數組的長度，當超過長度時就停止循環，一般遍歷的都是數組或類數組。遍歷對象時，由于對象沒有長度，所以使用 Object.keys() 獲取對象的所有屬性，以數組形式返回。

for / in主要是用來遍歷對象上的可枚舉屬性，包括原型對象上的屬性，按任意順序進行遍歷，遍歷對象時獲取到的是屬性的鍵值，遍歷的是數組，數組的下標當做鍵值。

for / of用于遍歷可迭代對象的數據，包括 Array、Map、Set、String、TypedArray、arguments 對象等等。

for await...of用于遍歷異步可迭代對象，該語句只能在一個async function 內部使用。

forEach 是 for 的加升級版，使用更簡單，攜帶參數更多，但本質還是數組的循環，每個元素都執行一次回調，不會改變原數組。

map是給原數組每個元素都執行一次回調，返回一個新數組，不會改變原數組。

2、功能差異

forEach、map 不支持跳出循環，其他不支持。

for await ... of 能夠支持異步操作，其他的不支持。

對于純對象的遍歷， for ... in 枚舉更方便。

對于數組遍歷，如果不需要索引，可以直接使用 for...of 獲取值，還可支持 break 或 return ;如果還需要索引，使用 forEach 更適合，但不支持 return。

如果是一個數組映射成另一個數組，使用 map 最合適。

3、性能差異

在測試環境、測試數據條件一致的情況下，性能排序為：

for > for of > forEach > map > for in。

for 因為沒有額外的函數調用和上下文，所以性能是最快的。

for ... of 具有 iterator 接口的數據結構，可以使用它來迭代成員，直接讀取鍵值。

forEach 是 for 的語法糖，還有許多的參數和上下文，因此會慢一些。

map 因為它返回的是一個等長的全新數組，數組創建和賦值產生的性能開銷較大。

for...in 性能最差，因為需要列舉對象的所有屬性，有轉化過程，開銷比較大。

三、for 的使用

在項目開發中，我們應該根據實際需求，去選擇一個合適的 for 遍歷。以下是一些使用建議：

• 如果需要把數據映射成另外一個數組，如變成對應布爾值，推薦使用 map ，不會修改原數組，使用語法簡單。

• 數組遍歷時，可以使用 for 、forEach 或 for...of。

• 遍歷的是純對象時，推薦使用 for ... in 。

• 如果是需要對迭代器遍歷，推薦使用 for ... of。

• 如果是在數組中篩選符合條件的數組，使用 fillter 。

到此，關于“JS中六種For循環怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！