Various traversal methods for arrays 1-3

ES5 traversal method

1. The for loop

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

2. ForEach — if the operation is to repair the array directly

   ForEach blocks cannot use break, continue, which throws an exception.

const arr = [1.2.3]
arr.forEach((elem, index, array) = > {
    arr[index] = elem * 2
});
console.log(arr) // [2, 4, 6]
Copy the code

And for loops

• Braek and continue are not supported — an error is reported when used
• ForEach () returns no value and simply calls the func callback forEach element

3. Map returns a new array, each element being the result of the func call

const arr = [1.2.3]
const result = arr.map(function(value) {
    value += 1
    console.log(value) / / 2, 3, 4
    return value
})
console.log(arr, result) // [1, 2, 3] [2, 3, 4]
Copy the code

4. Filter () returns an array of elements that meet the func criteria

const arr = [1.2.3]
const result = arr.filter(function(value) {
    console.log(value) / / 2
    return value == 2
})
console.log(arr, result) // [1, 2, 3] [2]
Copy the code

5. Some () returns a Boolean, judge whether to have qualified element func – just have a meet similar to | |

const arr = [1.2.3]
const result = arr.some(function(value) {
    console.log(value)
    return value == 4
})
console.log(arr, result) // [ 1, 2, 3 ] false
Copy the code

6. Every () returns Boolean that determines that every element satisfies the func condition — every means every, so it needs all elements to satisfy something like &&

const arr = [1.2.3]
const result = arr.every(function(value) {
    console.log(value) / / 1
    return value == 2 // If you do not write "1", you will print "1". If you do not write "1", you will return "undefined"
})
console.log(arr, result) // [ 1, 2, 3 ] false
Copy the code

• Use every to do the same as break, simply saying return false equals break and return true equals continue. If no, return false is returned by default.

• The block of every cannot use break or continue, which will throw an exception.

7. Reduce – Receives a function as an accumulator

• Prev last result

• Cur Current element

• Index Indicates the index of the current element

• Array Indicates the current array

  1. sum

  const arr = [1.2.3]
  const sum = arr.reduce(function(prev, cur, index, array) {
      return prev + cur // Add the current element to the last result
  }, 0); // Set the initial value to 0
  console.log(sum) / / 6
  Copy the code

  2. For maximum

  const arr = [1.2.3]
  const max = arr.reduce(function(prev, cur) {
      return Math.max(prev, cur)
  })
  console.log(max)  / / 3
  Copy the code

  3. Array to heavy

  const arr = [1.2.3.3.4.4]
  const res = arr.reduce(function(prev, cur) {
      prev.indexOf(cur) == -1 && prev.push(cur) // Whether the last result contains the current result, if not, join
      return prev
  }, []); // Pass in an array with an empty initial value
  console.log(res)  / / [1, 2, 3, 4]
  Copy the code

8. For in loop – primarily the original loop that iterates over objects

Although for in can iterate over groups of numbers, it is best not to use for in, which will iterate over custom attributes

const arr = [1.2.3]
arr.name = 'arr'
for (const key in arr) {
    console.log(arr[key]);
}
Copy the code

• It’s better not to use for… Go through the numbers.
• for… There must be no return in the in block, otherwise an exception will be thrown.

ES6 traversal method

1. for of

for (const val of[1.2.3]) {
    console.log(val); / / 1 2 3
}
Copy the code

const arr = [1.2.3]
for (const item of arr) {
    console.log(item) / / 1 2 3
}

for (const item of arr.values()) {
    console.log(item)/ / 1 2 3
}

for (const item of arr.keys()) {
    console.log(item) / / 0 1 2
}

for (const [index, item] of arr.entries()) {
    console.log(index, item)
    / / 0 to 1
    / / 1. 2
    / / 2, 3
}
Copy the code