Comparaison de 6 méthodes de parcours de tableaux JavaScript

Cet article comparera 6 méthodes de parcours de tableaux JS : for, foreach, for in, for of, .each, ().each, et présentera leurs différences. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

6 méthodes de traversée de tableaux JS

1 pour

Javascript Le pour. boucle, qui sert à parcourir le tableau

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

Neuf-neuf tables de multiplication :

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

Boucle ForEach, nous pouvons obtenir l'élément directement, et nous pouvons également obtenir la valeur de l'index. Mais forEach a également certaines limitations. Il ne peut pas continuer à sauter ou à s'interrompre pour terminer la boucle, car in

for(var item in arr|obj){} peut être utilisé pour parcourir des tableaux et des objets. Lors du parcours de tableaux, item représente la valeur d'index et arr représente l'élément correspondant à la valeur d'index actuelle. arr[item]

for in parcourt généralement les propriétés de l'objet, parcourant toutes les propriétés énumérables de l'objet lui-même et les attributs dont l'objet hérite de son prototype de constructeur <🎜. >

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

Copier après la connexion

4. for of

ES6 La nouvelle syntaxe de l'instruction for of crée une boucle pour parcourir un objet itérable. La boucle for of a été introduite dans ES6 pour remplacer for in et forEach() et prendre en charge le nouveau protocole d'itération. for of vous permet de parcourir des structures de données itérables telles que des tableaux, des chaînes, des cartes, des ensembles, etc.

Boucle sur un tableau :

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

Copier après la connexion

Boucle sur une chaîne :

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
}

Boucler une carte :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!