Summary of all loop traversal methods in JS

This time I will bring you a summary of all loop traversal methods in JS. What are the precautions for loop traversal summary in JS. The following is a practical case, let's take a look.

1. for loop

let arr = [1,2,3];
for (let i=0; i<arr.length><p style="text-align: left;">The for loop is the most commonly used loop tool in JS and is often used for loop traversal of arrays. </p>
<p style="text-align: left;"><span style="color: #ff0000"><strong>2. for in loop</strong></span></p>
<pre class="brush:php;toolbar:false">let obj = {name:'zhou',age:'**'}
for(let i in obj){
 console.log(i,obj[i])
}
// name zhou
// age **

The for in loop is mainly used to traverse ordinary objects, i represents the key value of the object, obj[i ] represents the corresponding value. When using it to traverse the array, the same effect can be achieved in most cases, but you should not do this. This is risky, because i is output in string form. Instead of the numeric subscript required by the array, this means that in some cases, string operations will occur, resulting in data errors, such as: '52' 1 = '521' instead of the 53 we need.

In addition, when the for in loop not only traverses its own properties, it will also find the prototype, so it is best to add a judgment in the loop body, just use obj[i].hasOwnProperty(i), so as to avoid Too many unnecessary attributes are traversed.

3. While loop

Similarly traverse the cars array, first use the for loop method

let cars=["BMW","Volvo","Saab","Ford"];
let i=0;
for (;cars[i];)
{
console.log(cars[i])
i++;
};
// BMW
// Volvo
// Saab
// Ford

and then the while loop Method

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
console.log(cars[i] + "<br>")
i++;
};

We found that they can achieve the same effect. In fact, their underlying processing is the same, but the for loop can put the definition, conditional judgment, and self-increment and self-decrement operations. Executing within a condition makes the code look more convenient, that's all.

4. do while loop

let i = 3;
do{
 console.log(i)
 i--;
}
while(i>0)
// 3
// 2
// 1

The do while loop is a variant of the while loop. It first performs an operation and then proceeds. If the condition is true, the operation will continue. If it is false, the loop will end.

5. Array forEach loop

let arr = [1,2,3];
arr.forEach(function(i,index){
 console.log(i,index)
})
// 1 0
// 2 1
// 3 2

forEach loop, loops through each element in the array and takes action, there is no return value, you don’t need to know Array length, it has three parameters, only the first one is required, representing the value under the current subscript.

Also please note that the forEach loop cannot be stopped before all elements are called. It does not have a break statement. If you must stop, you can try a try catch statement, which is to throw out when you want to force an exit. An error is caught by catch, and then returned in catch, so that the loop can be terminated. If you often use this method, it is best to customize such a forEach function in your library.

6. Array map() method

let arr = [1,2,3];
let tt = arr.map(function(i){
 console.log(i)
 return i*2;
})
// [2,4,6]

map() method returns a new array, and the elements in the array are the original array elements. The value after function processing.
Note: The map and forEach methods can only be used to traverse arrays, not ordinary objects.

7. Array filter() method

let arr = [1,2,3];
let tt = arr.filter(function(i){
 return i>1;
})
// [2,3]

The filter method is a built-in method of the Array object. It will return the filtered elements without changing the original array.

8. Array some() method

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// true

some() method is used to detect whether the elements in the array meet the specified conditions (the function provides ), returns a boolean value without changing the original array.

9. Array every() method

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// 检测数组中元素是否都大于1
// false

every() method is used to detect whether all elements of the array meet the specified conditions (through the function Provided), returns a boolean value, and does not change the original array.

10. Array reduce() method

let arr = [1,2,3];
let ad = arr.reduce(function(i,j){
 return i+j;
})
// 6

reduce() method receives a function as an accumulator, each value in the array ( from left to right), and finally calculates to a single value.

11. Array reduceRight() method

let arr = [1,2,3];
let ad = arr.reduceRight(function(i,j){
 return i+j;
})
// 6

reduceRight() method has the same function as reduce(), it is from an array Start counting forward from the end of .

12. for of loop

let arr = ['name','age'];
for(let i of arr){
 console.log(i)
}
// name
// age

for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS反射与依赖注入使用案例分析

如何使用js统计页面标签数量

The above is the detailed content of Summary of all loop traversal methods in JS. For more information, please follow other related articles on the PHP Chinese website!