What are the main loops in javascript

The main loops of JavaScript are: 1. for loop; 2. "for...in" loop; 3. map method; 4. forEach loop; 5. filter filter loop; 6. Object.keys traversal properties of the object.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In project development, no matter which framework it is based on, data processing is necessary, and processing data is inseparable from various traversal loops. There are many ways to loop through in JavaScript. Here are some common js loops.

1. for loop

The for loop should be the most common and the most used loop traversal method, so its readability and ease of maintenance are relatively poor, but it You can break out of the loop in time.

let arr = [1,2,3,4,5,6,7]for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}// 1,2,3,4,5,6,7

2. for...in

The for...in loop is mainly aimed at traversing objects. When you want to obtain the corresponding key value of the object, use for...in It is still more convenient

//针对对象来说  
//任何对象都继承了Object对象，或者其它对象，继承的类的属性是默认不可遍历的，
//for... in循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。
//结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。
let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}

3. map

The map method passes all members of the array into the parameter function in turn, and then returns the results of each execution into a new array. The loop cannot be stopped in the middle, and all members will always be traversed.

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

The map method accepts a function as a parameter. When this function is called, the map method passes it three parameters: the current member, the current position, and the array itself.

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

4. forEach

The method of using forEach is similar to the method of using map, except that the forEach method does not return a value, it is only used to operate data, and the loop cannot be stopped in the middle. It will always Traverse all members

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

5. Filter filter loop

The filter method is used to filter array members, and the members that meet the conditions form a new array and return it. Its parameter is a function. All array members execute the function in sequence, and the members whose return result is true form a new array and return it. This method does not change the original array.

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

The filter method in the Array class in ECMAScirpt5 is used to remove all "false" type elements (false, null, undefined, 0, NaN or an empty string):

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean is a function that traverses the elements in the array and returns true or false according to the true or false type of the element.

6. Object.keys traverses the properties of the object

Object The parameter of the .keys method is an object and returns an array. The members of this array are all property names of the object itself (not inherited), and only enumerable properties are returned.

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

To determine whether an object is an empty object, you can use Object.keys(obj).length>0

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What are the main loops in javascript. For more information, please follow other related articles on the PHP Chinese website!