前言：

對於前端的迴圈遍歷我們知道有

針對js陣列的length，forEach（）、for of（），map（）方法

針對js物件的for/in語句（for/in也能遍歷陣列，但不推薦）

為什麼不推薦，之前文章裡講過：

這篇文章主要介紹了js常見遍歷操作，結合例項形式分析了javascript for迴圈、for of、for each、for in 及map遍歷簡單操作技巧，需要的朋友可以參考下

一、遍歷陣列

1。一般的遍歷陣列方法

length屬性是一個很特別的屬性，看到陣列，大家一定會想到length， 那他具體有什麼特性那？

簡單介紹：

1。陣列是一組資料，length屬性表示這個陣列中的內容的個數。簡稱陣列的長度。2。陣列物件是沒有任何方法的，只有一個唯一的屬性length。3。當設定屬性的時候，表示要修改該陣列的長度。陣列的長度會發生變化。4。當讀取時，會實時返回陣列的當時的長度。

for迴圈實現陣列的遍歷

編輯

原理：

1。透過for 構造下標，根據下標取出具體元素

2。（變數名。length） 可以動態檢測陣列元素的個數

3。arr［i］ 表示的是第幾個，不是計數器，是陣列元素

4。arr。length 表示有幾個 ，是陣列的長度

2，forEach遍歷陣列

forEach（）函式從頭到尾把陣列遍歷一遍。有三個引數分別是：陣列

元素

，元素的

索引

，陣列本身（如果是一個引數就是陣列元素，也就是陣列的值。

遍歷：

編輯

輸出結果：

編輯

由此可見：

1。val代表著陣列中的值，而key代表著相對應陣列的下標

2。方法用於呼叫陣列的每個元素，並將元素傳遞給回撥函式， 沒有返回值

定義：

map方法是透過迴圈的方式一個一個項的處理原來的陣列，並返回新的陣列，同時，不會改變原陣列的值

編輯

輸出結果：

編輯

注意：

1。返回一個新的陣列，但是不改變原陣列

2。map方法有返回值，返回值用變數接收。

forEach（）和map（）的區別

for Each 和map 都是遍歷陣列的方法，用法類似，但是還是有很大區別的

相同點：

1。都是迴圈遍歷陣列中的每一項；

2。在遍歷中執行匿名函式都可以接收三個引數，分別為：遍歷過程的每一項、遍歷序號（索引值）、原陣列；

3。執行的匿名函式中 的this都指向window。

不同點：

map（）： 根據遍歷執行的匿名函式，對於原陣列中的每個值產生一個對應的值，並返回一個新的陣列，存在一個對映關係，並且不會改變原陣列，不會對空陣列進行檢測。

4。for of遍歷陣列：

es6新增加一個for of迴圈 得到的是

元素

編輯

優點：

不同用於

forEach

方法，它可以與

break

、

continue

和

return

配合使用

提供了遍歷所有資料結構的統一操作介面

注意

：for of不能遍歷物件，如果需要遍歷物件，我們一般會使用for in 如下：

二、遍歷物件

1。for。。。in遍歷物件

一般用於遍歷物件 keys表示obj物件的每一個鍵值對的鍵1：遍歷物件

編輯

輸出結果：

編輯

2、遍歷陣列（不適用）

編輯

輸出結果：

編輯

for…in迴圈讀取屬性名，透過屬性名再獲得屬性值

for…in迴圈主要是為遍歷物件而設計的，雖然可以遍歷陣列，但是不提倡這麼使用。

想了解更多精彩內容，快來關注北京千鋒教育