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

This article mainly explains "how to use ergodic arrays: for, for-in, forEach, for-of". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use traversal arrays: for, for-in, forEach, for-of".

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 often the best choice, and we'll know why.

For loop [ES1]

The normal for loop in JavaScript is very old, and it already exists in ECMAScript 1. This `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); } // 输出: // 0, 'a' // 1, 'b' // 2, 'c 此循环的优缺点是什么? 它是相当通用的，但可惜的是，当我们要做的是在一个数组上循环时，它也很啰嗦。 如果我们不想从第一个 Array 元素开始循环，它还是很有用的。其他的循环机制都不能让我们这样做。 for-in 循环 [ES1] for-in 循环和 for 循环一样古老--它在ECMAScript 1中也已经存在。这个 for-in 循环记录了arr的键： const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (const key in arr) { console.log(key); } // 输出: // '0' // '1' // '2' // 'prop' for-in 不是循环遍历数组的好选择： 它访问属性键，而不是值。 作为属性键，Array元素的索引是字符串，而不是数字 它访问所有可枚举的属性键(包括自有的和继承的)，而不仅仅是Array元素的属性键。 for-in 访问继承的属性确实有一个用例：循环一个对象的所有可枚举属性。 Array方法.forEach() [ES5] 考虑到 for 和 for-in 都不是特别适合在Array上循环，在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 / / 'cations, 2

This method is really convenient. It allows us to access the indexes of Array elements and Array elements without doing much. The arrow function (introduced in ES6) makes this approach more syntactically elegant.

The main disadvantages of .forEach () are:

You cannot use await in the "body" of this loop.

You can't exit the .forEach () loop early. In the for loop, we can use break.

Exit .forEach ()-- A workaround

If you want to use a loop like .forEach () and leave ahead of time, there is a workaround: .forEach () also loops over all Array elements and stops if its callback returns a true value.

Onst arr = ['red',' green', 'blue']; arr.some ((elem, index) = > {if (index > = 2) {return true; / / break from loop} console.log (elem); / / This callback implicitly returns `undefined `, which / / is a falsy value. Therefore, looping continues. }); / / output: / / 'red' / /' green'

It can be said that this is an abuse of .some (), and I don't know how easy this code is to understand (compared to for-of and break).

For-of loop [ES6]

In ECMAScript 6, the for-of loop is added to the JavaScript.

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

For-of is ideal for iterating through arrays:

It iterates over array elements.

We can use await: and, if necessary, we can easily migrate to for-await-of.

We can use break and continue-- even external scope.

For-of and iterable objects

Another benefit of for-of is that we can loop not only on Arrays, but also on any iterable object-- for example, on Maps.

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'

Iterate over myMap to generate [key, value] pairs, which we deconstruct to directly access the components of each pair.

For-of and array subscript

The array method .iterate () returns an iterable object on the [index, value] pair. If we use for-of and deconstructing this method, we 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' Thank you for reading. The above is the content of "how to use traversal arrays: for, for-in, forEach, for-of". After the study of this article, I believe you have a deeper understanding of how to use traversal arrays: for, for-in, forEach, for-of. The specific use situation still needs to be verified by 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.