Vergleich von 6 Methoden der JavaScript-Array-Traversierung

In diesem Artikel werden 6 JS-Array-Traversal-Methoden verglichen: for, foreach, for in, for of every, ().each, und ihre Unterschiede vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. 6 JS-Array-Traversal-Methoden

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

2. Foreach

forEach-Schleife können wir das Element direkt erhalten, und wir können auch den Indexwert erhalten. Aber forEach hat auch einige Einschränkungen. Es kann nicht weiter übersprungen oder unterbrochen werden, um die Schleife und das Objekt zu beenden. Beim Durchlaufen des Arrays stellt item den Indexwert dar, arr stellt das Element dar, das dem aktuellen Indexwert entspricht arr[item]Beim Durchlaufen Das Objekt, item stellt den Schlüsselwert dar, arr stellt den Wert dar, der dem Schlüsselwert entspricht obj[item]

für im Allgemeinen Was die Schleife durchläuft, sind die Eigenschaften des Objekts, wobei alle aufzählbaren Eigenschaften des Objekts selbst durchlaufen werden die Eigenschaften, die das Objekt von seinem Konstruktor-Prototyp erbt. Die for of-Schleife wurde in ES6 eingeführt, um for in und forEach() zu ersetzen und das neue Iterationsprotokoll zu unterstützen. Mit for of können Sie iterierbare Datenstrukturen wie Arrays, Strings, Maps, Sets usw. durchlaufen.

Loop über ein Array:

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

Loop über einen String:

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

Loop über eine Karte:

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

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

Das obige ist der detaillierte Inhalt vonVergleich von 6 Methoden der JavaScript-Array-Traversierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!