1. 程式人生 > >JavaScript陣列遍歷:for、foreach、for in、for of、$.each、$().each的區別

JavaScript陣列遍歷:for、foreach、for in、for of、$.each、$().each的區別

一、for

Javascript中的for迴圈,它用來遍歷陣列


var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
    console.log(arr[i])
}
//1,2,3,4

九九乘法表:


for ( var x = 1; x <= 9; x++) {
    var str="";
    for ( var y = 1; y <= x; y++) {
    str+=x + "*" + y + " = " + (x * y)+"  ";         
    }
    console.log(str);
}

二、foreach

forEach迴圈我們可以直接取到元素,同時也可以取到index值。但是forEach也有一些侷限,不能continue跳過或者break終止迴圈


let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, index, arr) {
    console.log('index:'+index+','+'val:'+val) // val是當前元素,index當前元素索引,arr陣列
    console.log(arr)
})
//index:0,val:a
//["a", "b", "c", "d"]0: "a"1: "b"2: "c"3: "d"
//index:1,val:b
//["a", "b", "c", "d"]
//index:2,val:c
//["a", "b", "c", "d"]
//index:3,val:d
//["a", "b", "c", "d"]

三、for in

for(var item in arr|obj){} 可以用於遍歷陣列和物件
遍歷陣列時,item表示索引值, arr表示當前索引值對應的元素 arr[item]
遍歷物件時,item表示key值,arr表示key值對應的value值 obj[item]
for in一般迴圈遍歷的都是物件的屬性,遍歷物件本身的所有可列舉屬性,以及物件從其建構函式原型中繼承的屬性


var obj = {a:1, b:2, c:3};    
for (let item in obj) {
  console.log("obj." + item + " = " + obj[item]);
}
// obj.a = 1
// obj.b = 2
// obj.c = 3
var arr = ['a','b','c'];
for (var item in arr) {
    console.log(item) //0 1 2
    console.log(arr[item]) //a b c
}

四、for of

ES6中新增加的語法 for of 語句建立一個迴圈來迭代可迭代的物件。在 ES6 中引入的 for of 迴圈,以替代 for in 和 forEach() ,並支援新的迭代協議。for of 允許你遍歷 Arrays(陣列), Strings(字串), Maps(對映), Sets(集合)等可迭代的資料結構等。
迴圈一個數組:


let arr = ['A', 'B', 'C']
for (let val of arr) {
    console.log(val) 
}
// A B C

迴圈一個字串:


let iterable = "abc";

for (let value of iterable) {
  console.log(value);
}
// "a"
// "b"
// "c"

迴圈一個Map:


let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);    
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

迴圈一個 Set:


let iterable = new Set([1, 1, 2, 2, 3, 3]);    
for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

迴圈一個擁有enumerable屬性的物件
for of迴圈並不能直接使用在普通的物件上,但如果我們按物件所擁有的屬性進行迴圈,可使用內建的Object.keys()方法:


for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

迴圈一個生成器(generators):


function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

五、jQuery裡面的$.each

$.each(arr|obj, function(k, v))
可以用來遍歷陣列和物件,其中k表示索引值或者key值,v表示value值


var arr = ['a','b','c']
$.each(arr, function(key, val) {
    console.log(key, val);
})
//0 a
//1 b
//2 c

六、jQuery裡面的$().each()

\$().each()在dom處理上面用的較多,主要是用來遍歷DOMList。如果頁面有多個input標籤型別為checkbox,對於這時用\$().each()來處理多個checkbox,例如:


$(“input[name=’checkbox’]”).each(function(i){
if($(this).attr(‘checked’)==true){
//操作程式碼
}

結論:

推薦在迴圈物件屬性的時候使用for in,在遍歷陣列的時候的時候使用for of
for in迴圈出的是key,for of迴圈出的是value;
for of是ES6新引入的特性。修復了ES5的for in的不足;
for of不能迴圈普通的物件,需要通過和Object.keys()搭配使用。

跳出迴圈的方式有如下幾種:
return 函式執行被終止;
break 迴圈被終止;
continue 迴圈被跳過。

來源:https://segmentfault.com/a/1190000017394445