for 循環(huán)在平時(shí)開(kāi)發(fā)中使用頻率最高的，前后端數(shù)據(jù)交互時(shí)，常見(jiàn)的數(shù)據(jù)類(lèi)型就是數(shù)組和對(duì)象，處理對(duì)象和數(shù)組時(shí)經(jīng)常使用到 for 遍歷，因此下班前花費(fèi)幾分鐘徹底搞懂這 5 種 for 循環(huán)。它們分別為：

• for
• for ... in
• for ... of
• for await .. of
• forEach
• map

一、各個(gè) for 介紹

1、for

for 循環(huán)是出現(xiàn)最早，也是應(yīng)用最普遍的一個(gè)遍歷，能夠滿(mǎn)足絕大多數(shù)的遍歷?？梢员闅v 數(shù)組、對(duì)象、字符串，示例：

// 遍歷數(shù)組
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++){
  console.log(arr[i]);
}
//遍歷對(duì)象
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 中新增的，以任意順序迭代一個(gè)對(duì)象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。

// 遍歷數(shù)組
var arr = [1, 2, 3]
for (var i in arr ){
  console.log(i);//0 1 2
  console.log(arr[i]);//1 2 3
}
//遍歷對(duì)象
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 語(yǔ)句在可迭代對(duì)象(包括 Array、Map、Set、String、TypedArray、arguments 對(duì)象等等)上創(chuàng)建一個(gè)迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個(gè)不同屬性的值執(zhí)行語(yǔ)句。

// 迭代 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 - 一個(gè)類(lèi)型化數(shù)組，描述了一個(gè)底層的二進(jìn)制數(shù)據(jù)緩沖區(qū)！
let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);//0 255
}
// 迭代 Map - 對(duì)象保存鍵值對(duì)，能夠記住鍵的原始插入順序
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

創(chuàng)建一個(gè)循環(huán)，該循環(huán)遍歷異步可迭代對(duì)象以及同步可迭代對(duì)象，包括內(nèi)置的 String、Array，類(lèi)數(shù)組對(duì)象(arguments 或 nodeList)，TypedArray, Map, Set 和用戶(hù)定義的異步/同步迭代器。它使用對(duì)象的每個(gè)不同屬性的值調(diào)用要執(zhí)行的語(yǔ)句來(lái)調(diào)用自定義迭代鉤子。

類(lèi)似于 await 運(yùn)算符一樣，該語(yǔ)句只能在一個(gè)async function 內(nèi)部使用。

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版本發(fā)布的，按升序?yàn)閿?shù)組中含有效值的每一項(xiàng)執(zhí)行一次回調(diào)函數(shù)，那些已刪除或者未初始化的項(xiàng)將被跳過(guò)(例如在稀疏數(shù)組上)，一般認(rèn)為是 普通for循環(huán) 的加強(qiáng)版。

// 遍歷數(shù)組
var arr = [1, 2, 3]
arr.forEach((item, index) => {
  console.log(index);//0 1 2
  console.log(item);// 1 2 3
})
//遍歷對(duì)象
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

遍歷時(shí)可以返回一個(gè)新數(shù)組，新數(shù)組的結(jié)果是原數(shù)組中每個(gè)元素都調(diào)用一次提供的函數(shù)后返回的值。

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

二、多個(gè) for 之間區(qū)別

1、使用場(chǎng)景差異

for循環(huán)是最早最原始的循環(huán)遍歷語(yǔ)句，for 內(nèi)部定義一個(gè)變量，按照條件進(jìn)行循環(huán)遍歷，通常是數(shù)組的長(zhǎng)度，當(dāng)超過(guò)長(zhǎng)度時(shí)就停止循環(huán)，一般遍歷的都是數(shù)組或類(lèi)數(shù)組。遍歷對(duì)象時(shí)，由于對(duì)象沒(méi)有長(zhǎng)度，所以使用 Object.keys() 獲取對(duì)象的所有屬性，以數(shù)組形式返回。

for / in主要是用來(lái)遍歷對(duì)象上的可枚舉屬性，包括原型對(duì)象上的屬性，按任意順序進(jìn)行遍歷，遍歷對(duì)象時(shí)獲取到的是屬性的鍵值，遍歷的是數(shù)組，數(shù)組的下標(biāo)當(dāng)做鍵值。

for / of用于遍歷可迭代對(duì)象的數(shù)據(jù)，包括 Array、Map、Set、String、TypedArray、arguments 對(duì)象等等。

for await...of用于遍歷異步可迭代對(duì)象，該語(yǔ)句只能在一個(gè)async function 內(nèi)部使用。

forEach 是 for 的加升級(jí)版，使用更簡(jiǎn)單，攜帶參數(shù)更多，但本質(zhì)還是數(shù)組的循環(huán)，每個(gè)元素都執(zhí)行一次回調(diào)，不會(huì)改變?cè)瓟?shù)組。

map是給原數(shù)組每個(gè)元素都執(zhí)行一次回調(diào)，返回一個(gè)新數(shù)組，不會(huì)改變?cè)瓟?shù)組。

2、功能差異

forEach、map 不支持跳出循環(huán)，其他不支持。

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

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

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

如果是一個(gè)數(shù)組映射成另一個(gè)數(shù)組，使用 map 最合適。

3、性能差異

在測(cè)試環(huán)境、測(cè)試數(shù)據(jù)條件一致的情況下，性能排序?yàn)椋?/p>

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

for 因?yàn)闆](méi)有額外的函數(shù)調(diào)用和上下文，所以性能是最快的。

for ... of 具有 iterator 接口的數(shù)據(jù)結(jié)構(gòu)，可以使用它來(lái)迭代成員，直接讀取鍵值。

forEach 是 for 的語(yǔ)法糖，還有許多的參數(shù)和上下文，因此會(huì)慢一些。

map 因?yàn)樗祷氐氖且粋€(gè)等長(zhǎng)的全新數(shù)組，數(shù)組創(chuàng)建和賦值產(chǎn)生的性能開(kāi)銷(xiāo)較大。

for...in 性能最差，因?yàn)樾枰信e對(duì)象的所有屬性，有轉(zhuǎn)化過(guò)程，開(kāi)銷(xiāo)比較大。

三、for 的使用

在項(xiàng)目開(kāi)發(fā)中，我們應(yīng)該根據(jù)實(shí)際需求，去選擇一個(gè)合適的 for 遍歷。以下是一些使用建議：

• 如果需要把數(shù)據(jù)映射成另外一個(gè)數(shù)組，如變成對(duì)應(yīng)布爾值，推薦使用 map ，不會(huì)修改原數(shù)組，使用語(yǔ)法簡(jiǎn)單。
• 數(shù)組遍歷時(shí)，可以使用 for 、forEach 或 for...of。
• 遍歷的是純對(duì)象時(shí)，推薦使用 for ... in 。
• 如果是需要對(duì)迭代器遍歷，推薦使用 for ... of。
• 如果是在數(shù)組中篩選符合條件的數(shù)組，使用 fillter 。

到此這篇關(guān)于一文帶你搞懂JS中六種For循環(huán)的使用的文章就介紹到這了,更多相關(guān)JS For循環(huán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論