Comparison of 6 methods of JavaScript array traversal

This article will compare 6 JS array traversal methods: for, foreach, for in, for of, . each, ().each, and introduce their differences. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

6 JS array traversal methods

1. for

In Javascript The for loop, which is used to traverse the array

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

Nine-nine multiplication tables:

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 loop we can get the element directly, and we can also get the index value. But forEach also has some limitations. It cannot continue to skip or break to terminate the loop.

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

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

三, for in

for(var item in arr|obj){} can be used to traverse arrays and objects
When traversing an array, item represents the index value, and arr represents the element corresponding to the current index value. arr[item]
When traversing an object, item represents the key value, and arr represents the value corresponding to the key value. obj[item]
for in generally loops through the properties of the object, and traverses all the enumerable properties of the object itself. Citation properties, as well as properties that an object inherits from its constructor prototype

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 }

4. for of

ES6 The new syntax in the for of statement creates a loop to iterate over an iterable object. The for of loop was introduced in ES6 to replace for in and forEach() and support the new iteration protocol. for of allows you to traverse iterable data structures such as Arrays, Strings, Maps, Sets, etc.
Loop through an array:

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

Loop through an array:

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

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

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

The above is the detailed content of Comparison of 6 methods of JavaScript array traversal. For more information, please follow other related articles on the PHP Chinese website!