1. For loop

For is the most common loop and is used primarily to loop through arrays

Let arr = [1, 2, 3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 2 // 2 3Copy the code

2, Array. The forEach ()

Arr. ForEach (callback(currentValue [, index [, array]])[, thisArg]);

Callback is a function executed for each element in the array, which takes three arguments

  • CurrentValue (current element being processed in array)
  • Index (Index of the current element being processed in the array)
  • Array (array that the forEach() method is operating on)

ThisArg is used as the value of this when the callback is executed.

let arr = [1, 2,  , 3]
let arrCopy1 = []
arr.map((item, index, arr) => {
     arrCopy1.push(item * 2)
})
console.log(arrCopy1)
// [2, 4, 6]
Copy the code
  • ForEach () performs a callback forEach array element
  • Items that have been deleted or not initialized will be skipped (for example on a sparse array)
  • Unlike map() and reduce(), it returns no value and always returns undefind.
  • ForEach () has no way to abort or break out of the forEach() loop other than by throwing an exception.

3, Array. The map ()

Grammar:

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])
Copy the code

Callback is a function that generates a new array element and takes three arguments

  • CurrentValue (current element being processed in array)
  • Index (Index of the current element being processed in the array)
  • Array (the array that the map() method is manipulating)
  • ThisArg is used as the value of this when the callback is executed.
let arr = [1, 2,  , 3]
let arrCopy2 = []
arrCopy2 = arr.map((item, index, arr) => {
     return item * 2
})
console.log(arrCopy2)
// [2, 4, empty, 6]
Copy the code
  • The map method calls the callback function once, in order, for each element in the array.
  • mapGenerates a new array when you do not intend to use the returned arraymapIt’s against design. PleaseforEachorfor-ofAlternative.
  • The map does not modify the array that calls it (although it can change the array when the callback executes).
  • If the array called by map is discrete, the new array will also be discrete, leaving the same index empty

4, Array. Every ()

Syntax: arr.every(callback[, thisArg])

Callback is used to test the function for each element, which can take three arguments

  • Element represents the current value for testing
  • Index represents the index of the current value used for the test
  • Array represents the current array of calls to every
  • ThisArg represents the this value used when executing callback
let arr = [1, 2, , 3]
let boo = arr.every((item) => {
     return item > 0
})
console.log(boo)
// true
Copy the code
  • everyMethod executes once for each element in the arraycallbackFunction until it finds one that will makecallbackReturns the element of Falsy. If one of these elements is found,everyMethod will return immediatelyfalse. Otherwise,callbackReturns for each elementtrue.everyIt will returntrue.callbackCalled only for indexes that have already been assigned a value. Not called for indexes that are deleted or never assigned
  • Every does not change the array
  • Every, like the word “all” in mathematics, returns true when all elements meet the criteria. Because of this, if you pass an empty array, it returns true anyway, okay

5, Array. Some ()

Arr. Some (element[, index[, array]])[, thisArg])

Callback tests the function for each element, taking three arguments

  • Element (the element being processed in the array)
  • Index (Index value of the element being processed in the array)
  • Array (some() called array)

ThisArg this value used when executing callback

    let arr = [1, 2, , 3]
    let boo = arr.some((item) => {
        return item > 2
    })
    console.log(arr)
    console.log(boo)
Copy the code
  • Some () performs a callback function once for each element in the array until a value is found that causes the callback to return a “true” value (which can be converted to a Boolean value of true). If such a value is found, some() will immediately return true. Otherwise, some() returns false. Callback will only be called on indexes that “have a value”, not indexes that have been deleted or never assigned a value
  • Some () is called without changing the array.
  • If you test with an empty array, it returns false in all cases

6, Array. The reduce ()

Arr. reduce(Callback (Accumulator, currentValue[, index[, array]])[, initialValue])

Callback executes a function for each value in the array (except the first value if no initialValue is provided), with four arguments,

  • Accumulator: the accumulated value returned when the callback was last called,
  • CurrentValue: the element being processed in the array,
  • Index: the index of the current element being processed in the array, starting with 0 if initialValue is provided, or 1 if not.
  • Array: array of calls to reduce()
  • InitialValue: The value of the first argument when the callback function is first called. If no initial value is provided, the first element in the array is used. Calling reduce on an empty array with no initial value will report an error
    var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
    var myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
        if (accumulator.indexOf(currentValue) === -1) {
            accumulator.push(currentValue);
        }
        return accumulator
    }, [])

    console.log(myOrderedArray); // [a,b,c,e,d]
Copy the code
  • Reduce performs the callback function for each element in the array in turn, excluding elements in the array that were deleted or never assigned
  • Accumulator and currentValue are two different values when the callback function is first executed: If initialValue is provided when reduce() is called, accumulator is initialValue and currentValue is the first value in the array. If no initialValue is provided, accumulator takes the first value in the array and currentValue takes the second value in the array

Array.reduceright () is similar to array.reduce (), except for traversing from right to left

7, while

A while statement executes a specified piece of code as long as a conditional expression is true, and ends the loop if that expression is not true

Example:

let n = 0;

while (n < 3) {
  n++;
}

console.log(n);
// expected output: 3
Copy the code

Note: Use the break statement to stop the loop until the condition evaluates to true

8, the do… while

do… The while statement creates a loop that executes the specified statement until condition is false. Condition is checked after statement is executed, so the specified statement is executed at least once

Example:

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)
Copy the code

9, for… in

for.. The in loop can be used to iterate through the enumerable property list of an object (including the [[Prototype]] chain)

It is mainly used to traverse objects and obtain property values through the property list

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}
Copy the code

10, for… of

for.. The of loop first requests an iterator object from the object being accessed, and then iterates over all returned values by calling the iterator object’s next() method.

Arrays have a built-in @iterator, so for.. Of can be applied directly to arrays.

let arr = [1, 2, 3]
let it = arr[Symbol.iterator]();
it.next()  // {value: 1, done: false}
it.next()  // {value: 2, done: false}
it.next()  // {value: 3, done: false}
it.next()  // {value: undefined, done: true}
Copy the code

Unlike arrays, ordinary objects don’t have a built-in @iterator, so they can’t auto-complete for.. Of traversal. So don’t use for… Of.

Of course, you can define @@iterator for any object you want to iterate over, for example:

var myObject = { name:'luckfine', age:'18' } Object.defineProperty(myObject,Symbol.iterator,{ enumerable:false, writable:false, configurable:true, value:function(){ var o = this; var index = 0; var ks = Object.keys(o); return { next:function(){ return { value:o[ks[index++]], Done :(index > ks.length)}}}}}) myObject var it = myObject[symbol.iterator]() console.log(it.next()) // {value: "luckfine", done: false} console.log(it.next()) // {value: "18", done: false} console.log(it.next()) // {value: Undefined, done: true} for(var v of myObject){console.log(v)} // luckfine // 18Copy the code