首頁 > web前端 > js教程 > 深入講解js數組循環和迭代

深入講解js數組循環和迭代

迷茫
發布: 2017-03-26 17:12:22
原創
1506 人瀏覽過

一.第一個方法是for()迴圈 

1

for( varindex = 0; index < array.length; i ++){}

登入後複製

  這種方法很常見,各個語言都有,這裡就不再贅述

二.es5新增加的迭代方法(every,filter,forEach,map,some)

  這些方法都接收兩個參數,1)在每一項上可運行的函數(傳入的函數接受三個參數:a. 數組項的值;b. 該項在數組中的位置; c. 陣列本身);2)(可選)運行該函數的作用域-影響this的值。

  語法:以forEach為例,其他類似

1

array.forEach(callback [, thisArg])

登入後複製

1

nums = [3, 2, 3, 4

登入後複製

1) every()方法:

  測試數組中所有元素是否都通過指定函數的測試,若有一項傳回false即傳回false;

  every方法為元素的每個元素執行一次callback函數(不包括透過某些方法刪除或未定義的項,值定義為undefined的項除外),直到找到一個使callback回傳false(可轉換為false的值),跳出迭代並傳回false。否則(所有元素均傳回true)傳回true。

  every方法遍歷到的元素為第一次呼叫callback那一個的值,之後新增的值不會被存取。

1

2

3

4

5

6

7

function isBigEnough(elemen) { 

return (element >= 10);

}

var passed = [12, 5, 8, 130, 44].every(isBigEnough);

// passed is false

passed = [12, 54, 18, 130, 44].every(isBigEnough);

// passed is true

登入後複製

1

2

3

4

5

6

7

8

9

10

var a = [1, 2, 3,, 4].every (function(value){

console.log(value)   return value      

})//1,2,3,4console.log(a)

//true

a = [1, 2, 3, undefined,4].every (function(value){

console.log(value)   return value      

})

//1,2,3,undefind

console.log(a)

//false

登入後複製

2)filter()方法:

  使用指定的函數測試所有的元素,建立並傳回一個包含所有通過測試的元素的新陣列

  filter為數組中的每個元素調用一次callback(不包括透過某些方法刪除或未定義的項,值定義為undefined的項除外),並利用所有callback返回true或等價於true的元素建立一個新數組,未通過callback測試的元素會被跳過,不會包含在新數組裡。

1

2

3

4

5

var a = [1, 2, 3, 7,4].filter(function(value){  

    return value > 4     

})

console.log(a)

//[7]

登入後複製

3)forEach()方法:

  forEach按升序為數組中含有相知的每一項執行一次callback函數(不包括透過某些方法刪除或未定義的項,值定義為undefined的項除外)

  forEach遍歷的範圍在第一次呼叫callback 前就會確定。呼叫forEach後加入陣列中的項目不會被 callback 存取。如果已經存在的值被改變,則傳遞給 callback  的值是 forEach遍歷到他們那一刻的值。已刪除的項目不會遍歷到。如果已存取的元素在迭代時被刪除了(例如使用 shift()) ,之後的元素將被跳過 。總是回傳undefined,不能鍊式呼叫。

  沒有辦法中止或跳出 forEach 循環,除了拋出一個例外。如果你需要這樣,使用forEach()方法是錯誤的,你可以用一個簡單的循環作為替代

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

function logArrayElements(element, index, array) {

    console.log("a[" + index + "] = " + element);

}

 

// 注意索引2被跳过了,因为在数组的这个位置没有项

[2, 5, ,9].forEach(logArrayElements);

 

// a[0] = 2

// a[1] = 5

// a[3] = 9

 

[2, 5,"" ,9].forEach(logArrayElements);

// a[0] = 2

// a[1] = 5

// a[2] =

// a[3] = 9

 

[2, 5, undefined ,9].forEach(logArrayElements);

// a[0] = 2

// a[1] = 5

// a[2] = undefined

// a[3] = 9

 

 

let xxx;

// undefined

 

[2, 5, xxx ,9].forEach(logArrayElements);

// a[0] = 2

// a[1] = 5

// a[2] = undefined

// a[3] = 9

登入後複製

  如果數組在迭代時被修改了,則其他元素會被跳過。

下面的範例輸出"one", "two", "four"。當到達包含值"two"的項時,整個數組的第一個項被移除了,這導致所有剩餘的項上移一個位置。因為元素 "four"現在在數組更前的位置,"three"會被跳過。 forEach()不會在迭代之前建立陣列的副本。


1

2

3

4

5

6

var words = ["one", "two", "three", "four"];

words.forEach(function(word) {

  console.log(word);  if (word === "two") {

    words.shift();

  }

});// one// two// four

登入後複製

4) map()方法:

  為陣列每一項(不包含透過某些方法刪除或未定義的項,值定義為undefined的項除外)執行一個指定函數,傳回一個新數組,每個元素都是回呼函數的結果

  使用map 方法處理數組時,數組元素的範圍是在callback 方法第一次呼叫之前就已經確定了。在map 方法執行的過程中:原數組中新增加的元素將不會被callback 存取;若已經存在的元素被改變或刪除了,則它們的傳遞到callback 的值是map 方法遍歷到它們的那一時刻的值;而被刪除的元素將不會被存取。

1

var numbers = [1, 4, 9];var roots = numbers.map(Math.sqrt);/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

登入後複製

5)some()方法:

  測試數組中某些元素是否通過指定函數的測試,若有一項返回true即返回true

  some為數組中的每一個元素執行一次callback函數,直到找到一個使得callback 傳回一個「真值」(即可轉換為布林值true 的值),停止迭代並傳回true;否則(所有元素均為false),傳回false 。

1

2

3

4

5

6

7

var a = [1, 2, 3, 7,4].some (function(value){   return value > 8       })

console.log(a)//false

a = [1, 2, 3, 9,4].some (function(value){  

return value > 8     

 })

console.log(a)

//true

登入後複製

以上是深入講解js數組循環和迭代的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板