成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

下班前幾分鐘,搞懂這六種 For 循環

開發 前端
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 遍歷。以下是一些使用建議:

  1. 如果需要把數據映射成另外一個數組,如變成對應布爾值,推薦使用 map ,不會修改原數組,使用語法簡單。
  2. 數組遍歷時,可以使用 for 、forEach 或 for...of。
  3. 遍歷的是純對象時,推薦使用 for ... in 。
  4. 如果是需要對迭代器遍歷,推薦使用 for ... of。
  5. 如果是在數組中篩選符合條件的數組,使用 fillter 。
責任編輯:姜華 來源: 今日頭條
相關推薦

2013-07-02 09:58:38

ClojureClojure教程

2016-09-30 15:13:01

Python代碼

2009-12-29 09:01:46

ADSL斷線

2025-06-17 08:25:00

Kubernetes集群容器

2025-01-02 08:21:32

2010-03-01 18:13:22

Python程序

2010-01-06 15:35:06

JSON對象

2010-01-21 09:46:24

C++程序

2010-02-23 14:19:30

Python目錄操作

2024-12-03 15:38:14

2024-11-08 09:37:10

C#組件

2024-04-19 09:37:49

Ollama大語言模型開源

2017-08-03 17:30:26

戴爾IoT設備

2009-11-25 17:22:12

路由器安裝

2010-03-04 10:01:01

Android基本組件

2009-12-21 13:51:54

ADO.NET處理

2020-06-24 08:26:10

編程語言Perl技術

2017-06-26 10:35:58

前端JavaScript繼承方式

2010-01-21 14:51:02

C++函數指針

2010-01-26 14:53:43

C++
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 欧美日韩中文字幕在线 | 久久精品国产一区二区三区 | 成人在线免费电影 | 黄色片视频免费 | 国产精品久久久久久久久久三级 | 天天干天天爱天天操 | 日韩成人 | 久久久久久久久久毛片 | 日本不卡视频在线播放 | 免费成人高清 | 国产免费一区 | 丝袜美腿一区二区三区 | 能看的av| 九九导航 | 日韩一区二区三区在线播放 | 粉嫩粉嫩芽的虎白女18在线视频 | 国内久久| 日韩淫片免费看 | 欧美猛交| 国产精品福利在线观看 | 午夜激情免费 | 国产一级片 | 国产一区精品在线 | 久久综合狠狠综合久久综合88 | 91在线一区 | 最新91在线| 日韩不卡视频在线 | 国产精品永久在线观看 | 一区在线视频 | www久久国产 | 久久精品99 | 国产天天操| 亚洲码欧美码一区二区三区 | 欧美亚洲国产日韩 | 亚洲免费精品 | 亚洲高清视频一区二区 | 视频在线观看一区二区 | 久久69精品久久久久久久电影好 | 精品视频一区二区 | 日韩中文字幕网 | k8久久久一区二区三区 |