javascriptjquery-遍歷陣列物件的幾種方式

遍歷陣列是什麼意思

遍歷陣列/物件的幾種方式

常用的方法：

for、for in、for of（es6語法）、forEach、map、filter、$。each、$。map

注：本篇文章demo只涉及遍歷陣列元素

只能遍歷陣列：

for、forEach、map、filter（map和filter會返回一個新陣列）

可以遍歷陣列和非陣列物件：

for in、for of（es6語法-只能遍歷部署了 Iterator 介面的物件）、$。each、$。map

注:

預設遍歷後都不會改變原陣列，除非手動在遍歷內容體中去改變原陣列。

// 宣告幾個需要用到的變數

var arr = ［1， 78， 90， “hello”， 22］， results = ［］；

1、使用for迴圈遍歷

for （var i， len = arr。length； i < len； i++） { console。log（“for=>index=” + i + “/value=” + arr［i］）； }

注：用for迴圈遍歷，使用臨時變數，將長度快取起來，避免重複獲取陣列長度，提高效率

2、使用for in迴圈遍歷

for （var i in arr） { console。log（“for in=>index=” + i + “/value=” + arr［i］）； }

注：據說這個效率是迴圈遍歷中效率最低的

3、使用for of迴圈遍歷［es6語法］

for （let value of arr） { console。log（“for of=>value=” + value）； }

注：效能優於for in，value代表的是屬性值

4、使用forEach遍歷

results = arr。forEach（function （value， index， array） { console。log（“forEach=>” + index + “： ” + value + “/” + array［index］）； return value； }）； console。log（“forEach=>results=” + results）； // =>undefined

其中value引數是必須的，代表當前元素的值。forEach返回值為undefined

5、使用map遍歷

results = arr。map（function （value， index， array） { console。log（“map=>” + index + “： ” + value + “/” + array［index］）； return value + index； }）； console。log（“map=>results=” + results）； // =>1，79，92，hello3，26

（1）：其中value引數是必須的，代表當前元素的值（2）：map返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值，不會改變原陣列，

返回值是什麼就是什麼，如果不做其它處理的新陣列長度和原始陣列長度相等

6、使用filter遍歷

results = arr。filter（function （value， index， array） { console。log（“filter=>” + index + “： ” + value + “/” + array［index］）； return isNaN（value）？ “” ： value； }）； console。log（“filter=>results=” + results）； // =>1，78，90，22

（1）：其中value引數是必須的，代表當前元素的值（2）：使用filter方法建立一個新的陣列，新陣列中的元素是透過檢查指定陣列中符合條件的所有元素，不會改變原陣列，

返回值如果是false型別的即刪除該元素

（3）：jquery的方法filter只是對jQuery物件進行一個過濾，篩選出與指定表示式匹配的元素集合。如：

$（“p”）。filter（“。selected”）； // 保留帶有select類的p元素

7、使用jQuery核心方法$。each遍歷陣列

$。each（arr， function （index， value） { console。log（“$。each=>index=” + index + “/value=” + value）； }）；

注：該方法也可以用來操作jQuery物件，如：

$（“div”）。each（callback）

// 對匹配到的div元素執行相關操作

8、使用jQuery核心方法$。map遍歷陣列

results = $。map（arr， function （value， index） { console。log（“$。each=>index=” + index + “/value=” + value）； return isNaN（value）？ null ： value； // 返回null（刪除陣列中的專案），不能返回“”，只是將對應的陣列元素置為長度為0的字串 }）； console。log（arr + “=======” + results）； // 1，78，90，hello，22=======1，78，90，22

該方法也可以用來操作jQuery物件，如：

$（“p”）。append（ $（“input”）。map（function（）{ return $（this）。val（）； }）。get（）。join（“， ”））；

javascriptjquery-遍歷陣列物件的幾種方式

相關文章