wedge

Traditional JS loop methods, while, do while, for similar to other languages, this article does not do too much description, more focus on:

  • Common traversal methods for-in, for-of, Entires, Object. Keys, Object. GetOwnProperty comparison.
  • Array traversal map, forEach, reduce, every, some, fiter method comparison.

Common traversal methods

  • For-in: traverses index groups and object attributes for traversalEnumerable property, including own attributes, attributes inherited from the stereotype

var obj = {"name":"sme"."sex":"female"};Object.defineProperty(obj, "age", {value:"18".enumerable:false});// Add the non-enumerable attribute age
Object.prototype.protoPer1 = function(){console.log("name is sme"); };// Add attributes to a function through the prototype chain
for(var a in obj){
    console.log(a);
}
// Output: name, sex, ProtoPer1
// Note: The age attribute is not enumerable, so there is no output.
Copy the code

  • For-of: Allows traversal of iterable data structures like Arrays, Strings, Maps, Sets, and Arguments Objects. Returns property values, but does not allow traversal of objects

for (const value of strings) { 
  console.log(value);
}
Copy the code

  • ForEach: Iterates through the array, calling each element of the array and passing the element to the callback function.

    You cannot change an array using break, continue, or return statements

var arr = [1.2.3];
arr.forEach(
    function(The value of the index, arr){
        console.log(index)/ / index
        console.log(value)/ / value
        // The following is an error code
        //if(index/2 === 0){
           // continue;
        / /}
    },this)
Copy the code

  • For-in and for-of compare with forEach

  1. for.. Of: applies to iterator/array object/string /map/set, etc. But you cannot iterate over the object because there are no iterator objects.
  2. Unlike forEach(), it responds correctly to break, continue, and return statements
  3. For-of loops do not support normal objects, but if you want to iterate over an Object’s properties, you can use for-in loops or the built-in object.keys () method.

  • Object.getOwnProperty: Returns an ObjectHas its own properties, including enumerable and non-enumerable attributes, excluding attributes inherited from stereotypes.

var obj = {"name":"sme"."sex":"female"};Object.defineProperty(obj, "age", {value:"18".enumerable:false});// Add the non-enumerable attribute age
Object.prototype.protoPer1 = function(){console.log("name is sme"); };// Add attributes to a function through the prototype chain
console.log(Object.getOwnPropertyNames(obj));
// Output: [name, sex, age]
// Note: this is also an array. Properties added to the prototype will not be traversed
Copy the code

  • Keys: Returns an array of objectsEnumerable by itselfThe properties of the

var obj = {"name":"sme"."sex":"female"};Object.defineProperty(obj, "age", {value:"18".enumerable:false});// Add the non-enumerable attribute age
Object.prototype.protoPer1 = function(){console.log("name is sme"); };// Add attributes to a function through the prototype chain
console.log(Object.keys(obj));
// Output: [name, sex]
// Note: attributes added to the prototype will not be traversed
Copy the code

  • Object.entries: Returns a binary array of key-value pairs

Same as above exampleconsole.log(Object.entries(obj)) \\ output [["name"."sme"], ["sex"."female"]]
Copy the code

  • Array.map (): iterates through the array. Unlike forEach, return can be used to return the result without changing the array. Break and contiune do not take effect

var arr = [1.2.3]
var res = arr.map(function(val,index,arr){
    return val*2
})
/ / res = minus [2]
/ / arr = [1, 2, 3]
Copy the code
  • Array.filter (): Traverses the filter array
  • Every (): returns true if all groups are counted
    array.every(function(currentValue,index,arr), thisValue)
Copy the code
  • Some (): Iterates over groups of numbers that are true if they are satisfied
    array.some(function(currentValue,index,arr),thisValue)
Copy the code

  • Array. reduce(function(Total, currentValue, currentIndex, ARR))

    Receiving a function as an accumulator, each value in the array (from left to right) is reduced to a value.

var numbers = [65.44.12.4];
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
// Output: 125
Copy the code

conclusion

  1. ForEach, map, filter, reduce, every, and some all have problems with break and continue because they are in function, but function solves the closure trap problem; To use break and continue, use for, for-in, for-of, while.
  2. For-of is ES6 syntax sugar, try to use for-of;
  3. For looping object properties use: for-in