JavaScript 配列トラバーサルの 6 つの方法の比較

この記事では、6 つの JS 配列走査メソッド (for、foreach、for in、for of、.each、().each) を比較し、それらの違いを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

6 JS 配列走査メソッド

1. 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

9 個の乗算表:

を走査するために使用されます。

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

2. foreach

ForEach ループでは要素を直接取得でき、インデックス値も取得できます。ただし、forEach にもいくつかの制限があり、ループを終了するためにスキップまたはブレークを続行することはできません。

#三、for in

for(var item in arr|obj){} は配列とオブジェクトの走査に使用できます

配列を走査する場合、 item はインデックス値を表します。 arr は現在のインデックス値に対応する要素を表します arr[item]

オブジェクトをトラバースする場合、item はキー値を表し、arr はキー値に対応する値 obj[item]を表します。オブジェクトのプロパティ、およびオブジェクト自体の列挙可能なすべてのプロパティを走査します。引用プロパティと、オブジェクトがそのコンストラクターから継承するプロパティと同様にプロトタイプ

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"]

4. for of


ES6 for of ステートメントの新しい構文は、反復可能なオブジェクトを反復するループを作成します。 for of ループは、for in および forEach() を置き換え、新しい反復プロトコルをサポートするために ES6 で導入されました。 for of を使用すると、配列、文​​字列、マップ、セットなどの反復可能なデータ構造をトラバースできます。

配列をループする:

[].forEach(function(value,index,array){     
　　　　//do something     
　　});          
 等价于：
 $.each([],function(index,value,array){     
　　　//do something     
　})

配列をループする:

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
}

マップをループする:

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 循环被跳过。

更多编程相关知识，请访问：编程视频！！

以上がJavaScript 配列トラバーサルの 6 つの方法の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。