One, for

The ordinary for loop is the earliest traversal statement

// 遍历数组
let arr = [1,2,3,4,5];
for(let i = 0; i < arr.length; i++){
    console.log(i);   // 索引，数组下标 0 1 2 3 4
    console.log(arr[i]);   // 数组下标所对应的元素 1 2 3 4 5
}
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
console.log(Object.keys(obj))     //通过Object.keys(obj)遍历返回一个数组['name','age','country']
for(let i = 0, keys = Object.keys(obj); i < keys.length; i++){
    console.log(keys[i]);   // 对象的键值 name age country
    console.log(obj[keys[i]]);   // 对象的键对应的值 leo 20 China
}
 
// 遍历字符串
let str = "abcdef";
for(let i = 0; i < str.length; i++){
    console.log(i);   // 索引，字符串的下标 0 1 2 3 4 5
    console.log(str[i]);   // 字符串下标所对应的元素 a b c d e f
}

Two, forEach

forEach is released by the ES5 version. It executes a callback function for each item in the array that contains a valid value in ascending order. Those deleted or uninitialized items will be skipped (such as on a sparse array), which is generally considered to be a normal for loop. Enhanced version of .

// 遍历数组
let arr = [1,2,3,4,5];
arr.forEach(item => {
    console.log(item);   // 直接输出了数组的元素 1 2 3 4 5
});
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
let keys = Object.keys(obj);
keys.forEach(i => {
    console.log(i);   // 对象的键值 name age country
    console.log(obj[i]);   // 对象的键对应的值 leo 20 China
});

Three, map

map is released in ES5 version, and it can return a new array when traversing . The result of the new array is the return value after calling the provided function once for each element in the original array.

let arr = [
    {name:'张三',age:'19'},
    {name:'李四',age:'34'},
    {name:'王五',age:'65'},
];
arr.map((item,index)=>{
    item.sex='男'
})
console.log(arr)
//let arr = [
//    {name:'张三',age:'19',sex:'男'},
//    {name:'李四',age:'34',sex:'男'},
//    {name:'王五',age:'65',sex:'男'},
//];


或


let arr = [
    {name:'张三',age:'19'},
    {name:'李四',age:'34'},
    {name:'王五',age:'65'},
];
var newArr=arr.map((item,index)=>{
    item.sex='男'
    return item
})
console.log(newArr)
//let arr = [
//    {name:'张三',age:'19',sex:'男'},
//    {name:'李四',age:'34',sex:'男'},
//    {name:'王五',age:'65',sex:'男'},
//];


或


let arr = [
    {name:'张三',age:'19'},
    {name:'李四',age:'34'},
    {name:'王五',age:'65'},
];
var newArr=arr.map(item=>Number(item.age))
console.log(newArr)
//let arr = [
//    {name:'张三',age:'19',sex:'男'},
//    {name:'李四',age:'34',sex:'男'},
//    {name:'王五',age:'65',sex:'男'},
//];

let arr = [1,2,3,4,5];
let newArr = arr.map(i => i * i);
console.log(newArr);   // [1, 4, 9, 16, 25]

四、for in

for in is released by the ES5 version, traversing enumerable properties in an object other than Symbol (including enumerable properties on prototype objects) in random order. It is built for iterating over object properties and is not recommended for use with arrays.

// 遍历数组
let arr = [1,2,3,4,5];
for(let i in arr){
    console.log(i);   // 索引，数组下标 0 1 2 3 4
    console.log(arr[i]);   // 数组下标所对应的元素 1 2 3 4 5
}
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
for(let key in obj){
    console.log(key);   // 对象的键 name age country
    console.log(obj[key]);   // 对象的键对应的值 leo 20 China
}
 
// 遍历字符串
let str = "abcdef";
for(let i in str){
    console.log(i);   // 索引，字符串下标 0 1 2 3 4 5
    console.log(str[i]);   // 字符串下标所对应的元素 a b c d e f
}

Five, for of

for of is released by the ES6 version. It creates an iteration loop on iterable objects (including Array, Map, Set, String, TypedArray, arguments objects, etc.), calls custom iteration hooks, and executes statements for the values of each different property . The data used to iterate over the iterable.

// 迭代数组
let arr = [1,2,3,4,5];
for(let item of arr){
    console.log(item);   // 遍历数组元素 1 2 3 4 5
}
 
// 迭代字符串
let str = "abcdef";
for(let item of str) {
    console.log(item);   // 遍历字符串元素 a b c d e f
}
 
// 迭代Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
    console.log(entry);  // 遍历Map中可迭代元素 ["a", 1] ["b", 2] ["c", 3]
}
 
// 迭代Set
let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
for (let value of iterable) {
    console.log(value);   // 遍历Set中可迭代元素 1 2 3 4
}
 
// 迭代arguments类数组对象
function fn(){
  for (let argument of arguments) {
    console.log(argument);
  }
}
fn(1, 2, 3);   // 1 2 3

4. Suggestions for use

1. If you need to map an array into another array according to certain rules, it is recommended to use map.

2. If you need simple traversal, you can use for, forEach or for of.

3. If you need to traverse a pure object, it is recommended to use for in.

4. If you need to traverse the iterator, it is recommended to use for of.

5. If you need to filter out eligible items, you can use filter.

6. If you need to map to a new array according to the rules first, and then filter according to the conditions, you can use a map plus a filter.

Summary of several ways to loop through