for

One of the simplest loop traversal methods, and one of the most frequently used, can be optimized

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

// 1 2 3 4 5 6
Copy the code

Optimization: Use temporary variables to cache the length of the array and avoid fetching the array length repeatedly. The optimization effect is more obvious when the array is large

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

// 1 2 3 4 5 6
Copy the code

The for… The in…

This loop also uses a lot of people, but is the least efficient (the output key is the array index)

Var arr = [' me ', 'is',' who ', 'I' and 'in', 'o') for (var key in arr) {the console. The log (key)} / / 0, 1, 2, 3, 4, 5Copy the code

The for… Of… (ES6)

While performing better than for… The in… But it’s still not as good as a regular for loop.

Var arr = [' me ', 'is',' who ', 'I' and 'in', 'o') for (var key of arr) {the console. The log (key)} / / I am who I amCopy the code

forEach

The first parameter is the element in the array, the second parameter is the index of the element in the array, and the third parameter is its own array traversal method. Although it is used more frequently, the performance is still slightly lower than that of a normal loop

var arr = [1, 2, 3, 4, 5, 6]
arr.forEach(function (item, idnex, array) {
    console.log(item)     // 1 2 3 4 5 6
    console.log(array)    // [1, 2, 3, 4, 5, 6]
})
Copy the code

map

Iterating through each element and returning the corresponding element (the processed element can be returned) (map mapping) returns a new array with the same length as the old array

var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(function (item, idnex) {
    return item * item
})

console.log(newArr)    // [1, 4, 9, 16, 25, 36]
Copy the code

filter

Iterates through the array, filtering out the elements that match the criteria and returning a new array

Var arr = [{id: 1, name: 'I ', done: true}, {id: 2, name:' I ', done: true}, {id: 3, name: 'I ', done: true}, {id: 3, name:' I ', false } ] var newArr = arr.filter(function (item, index) { return item.done }) console.log(newArr) // [{ id: 1, name: Done: true},{id: 2, id: 1, done: true}]Copy the code

some

Iterating over the array returns true as long as more than one element satisfies the condition, false otherwise

Var arr = [{id: 1, name: 'I ', done: true}, {id: 2, name:' I ', done: true}, {id: 3, name: 'I ', done: true}, {id: 3, name:' I ', false } ] var bool = arr.some(function (item, index) { return item.done }) console.log(bool) // trueCopy the code

every

Returns true if each element satisfies the condition, and false otherwise

Var arr = [{id: 1, name: 'I ', done: true}, {id: 2, name:' I ', done: true}, {id: 3, name: 'I ', done: true}, {id: 3, name:' I ', false } ] var bool = arr.every(function (item, index) { return item.done }) console.log(bool) // falseCopy the code

Find (ES6)

Returns the first element that matches the condition, or undefined if there is none

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]

var num = arr.find(function (item, index) {
        return item === 3
})

console.log(num)   //  3
Copy the code

FindIndex (ES6)

Iterating through the array returns the index of the first element that meets the criteria, or -1 if there is none

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]

var num = arr.findIndex(function (item) {
        return item === 3
})

console.log(num)   //  4
Copy the code