Shulou(Shulou.com)06/03 Report--

This article mainly explains "what are the ways to cycle through the array in JS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways to loop through the array in JS".

This article compares and summarizes four ways to traverse an array:

For loop:

For (let index=0; index

< someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环： for (const key in someArray) { console.log(key); } 数组方法 .forEach()： someArray.forEach((elem, index) =>

{console.log (elem, index);})

For-of loop:

For (const elem of someArray) {console.log (elem);}

For-of is usually the best choice. We'll understand why.

For loop [ES1]

The for loop in JavaScript is very old, and it already exists in ECMAScript 1. The for loop records the index and value of each element of the arr:

Const arr = ['averse,' baked,'c']; arr.prop = 'property value'; for (let index=0; index)

< arr.length; index++) { const elem = arr[index]; console.log(index, elem); } // Output: // 0, 'a' // 1, 'b' // 2, 'c' for 循环的优缺点是什么? 它用途广泛，但是当我们要遍历数组时也很麻烦。 如果我们不想从第一个数组元素开始循环时它仍然很有用，用其他的循环机制很难做到这一点。 for-in循环 [ES1] for-in 循环与 for 循环一样古老，同样在 ECMAScript 1中就存在了。下面的代码用 for-in 循环输出 arr 的 key： const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (const key in arr) { console.log(key); } // Output: // '0' // '1' // '2' // 'prop' for-in 不是循环遍历数组的好方法： 它访问的是属性键，而不是值。 作为属性键，数组元素的索引是字符串，而不是数字。 它访问的是所有可枚举的属性键(自己的和继承的)，而不仅仅是 Array 元素的那些。 for-in 访问继承属性的实际用途是：遍历对象的所有可枚举属性。 数组方法.forEach()[ES5] 鉴于 for 和 for-in 都不特别适合在数组上循环，因此在 ECMAScript 5 中引入了一个辅助方法：Array.prototype.forEach()： const arr = ['a', 'b', 'c']; arr.prop = 'property value'; arr.forEach((elem, index) =>

{console.log (elem, index);}); / / Output: / / 'asides, 0 / /' baked, 1 / / 'cased, 2

This approach is really convenient: it allows us to access array elements and indexes without having to do a lot of operations. If you use the arrow function (introduced in ES6), the syntax will be more elegant.

The main disadvantages of .forEach () are:

You cannot use await in its loop body.

You cannot exit the .forEach () loop ahead of time. You can use break in the for loop.

The solution to aborting .forEach ()

If you want to stop a loop like .forEach (), there is a solution: .forEach () also iterates over all array elements and stops when its callback returns true.

Const arr = ['red',' green', 'blue']; arr.some ((elem, index) = > {if (index > = 2) {return true; / / abort loop} console.log (elem); / / this callback implicitly returns `undefined', which / / is a false value. Therefore, the cycle continues. }); / / Output: / / 'red' / /' green'

It can be said that this is an abuse of .some (), and it is not easy to understand this code compared to for-of and break.

For-of cycle [ES6] for-of

Loops are supported in ECMAScript 6:

Const arr = ['averse,' baked,'c']; arr.prop = 'property value'; for (const elem of arr) {console.log (elem);} / / Output: / /' a' / /'b' / /'c'

For-of is very effective when iterating through an array:

Used to traverse array elements.

You can use await and easily migrate to for-await-of if necessary.

You can even use break and continue for external scopes.

For-of and iterable objects

For-of can traverse not only arrays, but also iterable objects, such as Map:

Const myMap = new Map () .set (false, 'no') .set (true,' yes'); for (const [key, value] of myMap) {console.log (key, value);} / Output: / / false, 'no' / / true,' yes'

Traversing the myMap generates [key, value] pairs, which can be deconstructed to access each pair of data directly.

For-of and array index

The array method. Index,value () returns an iterating [array] pair. If you use for-of and use this method to deconstruct, you can easily access the array index:

Const arr = ['chocolate',' vanilla', 'strawberry']; for (const [index, elem] of arr.entries ()) {console.log (index, elem);} / / Output: / / 0,' chocolate' / / 1, 'vanilla' / / 2,' strawberry'

Summary

The availability of for-of loops is better than for,for-in and .forEach ().

In general, the performance differences between the four loop mechanisms should be irrelevant. If you want to do something with a lot of computation, it's better to switch to WebAssembly.

Thank you for your reading, the above is the content of "what is the way to cycle through the array in JS". After the study of this article, I believe you have a deeper understanding of what is the way to cycle through the array in JS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.