The difference between for, for..in, forEach, for..of, and map traversal

1. for loop

**
The for loop is one of the first loops we learn, and it is also the most commonly used loop by beginners. It is often used to loop arrays and strings. Since objects do not have a length property, a for loop cannot be used to iterate over objects. You can use break to end the loop

for loop

for(let i=0;i<arr.length;i++){
    
    
	console.log(arr[i])
}

2. for...in loop

The original intention of for...in was to traverse objects. It can also be used to traverse arrays. However, it is not the subscripts of the array that are looped, but the properties of the array. When using for...in loop, it returns all the objects that can be accessed through the object. It not only traverses the properties of array itself, but also traverses all enumerable properties on the array prototype chain. You can break in advance
, for example:

Array.prototype.fatherName = "Father";
const arr = [1, 2, 3];
arr.name = "Hello world";
let index;
for(index in arr) {
    
    
    console.log("arr[" + index + "] = " + arr[index]);
}

Output result:
Insert image description here

3、for…of

The for...of loop is a newly added loop method in Es6. It is similar to the for in loop and is also a variant of the ordinary for loop. You can use the for of loop to easily traverse arrays or other traversable objects, such as strings, Objects etc. The for...of loop traverses the object by traversing the key value of the object, so it is not recommended to use for of to traverse the object. You can break in advance
, for example:

const obj = {
    
     "name": "Clark", "surname": "Kent", "age": "36" };
// 使用 for of 循环遍历对象中的所有属性
for (let value in obj) {
    
    
    console.log(value + ',')
}

Output result:
Insert image description here

4. forEach loop

forEach is simply powerful. No matter what kind of array or collection it is, you can use forEach to handle it. You cannot use break and other statements to jump out of the traversal until all elements are passed to the calling function, but you can use to throw an exception to terminate the loop early. For example
:

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(e) {
    
    
    console.log(e);
})

Once break is added, the program will report an error.
Insert image description here
Using return in forEach will not report an error, but rerutn will not take effect
. For example:

let arr = [1, 2, 3, 4];

function find(array, num) {
    
    
    array.forEach((self, index) => {
    
    
        if (self === num) {
    
    
            return index;
        };
    });
};
let index = find(arr, 2);
console.log(index);

Running result:
Insert image description here
index is undefined, which proves that the find function does not return data. Therefore, using return in forEach will not report an error, but rerutn will not take effect. forEach can only start traversing from index 0 by default.

5. Map traversal

The map() method returns a new array. The elements in the array are the values of the original array elements after calling the function.

(1) Note:

	map（）不会对空数组进行检测
    map()不会改变原始数组

For example:

const num = [1, 2, 3];
const newNum = num.map((ele, index) => {
    
    
    return ele + 3
})
console.log(newNum, num);

operation result:
Insert image description here

(2) Return value

As shown above, its return value is a new array, and the elements in the array are the values of the original array elements after calling the function.