JS array method overview and traversal method time statistics

National Day 7 days off, 6 days overtime, bitter 😂.

Because the array processing is a little bit fuzzy, so I’ll summarize it here for you to refer to later. 😜

01,push(value)Add value to the end of the array and return the length of the array.

// Base
let a = [1.2.3.4.5]
let result = a.push(1)
console.log(result)       / / 6
console.log(a)            // [1, 2, 3, 4, 5, 1] The array is changed

// More
a = [1.2.3.4.5]
result = a.push('a'.'b') // Multiple values can be added at once
console.log(result)       / / 7
console.log(a)            // [1, 2, 3, 4, 5, 'a', 'b']
Copy the code

02,unshift()Return the length of the array by adding an element to the beginning of the array.

// Base
let a = [1.2.3.4.5]
let result = a.unshift(1)
console.log(result)           / / 6
console.log(a)                // [1, 1, 2, 3, 4, 5]

// More
result = a.unshift('a'.'b')  // Multiple values can be added at once
console.log(result)           / / 8
console.log(a)                // ['a', 'b', 1, 1, 2, 3, 4, 5]
Copy the code

03,pop()Remove the last element from an array. Return the deleted element.

// Base
let a = [5]
let result = a.pop()
console.log(result)   / / 5
console.log(a)        / / []

// More
result = a.pop()      // Return undefined if the array is empty
console.log(result)   // undefined
console.log(a)        / / []
Copy the code

04,shift()Remove the first element from an array. Return the deleted element.

// Base
let a = [5]
let result = a.shift()
console.log(result)      / / 5
console.log(a)           / / []

// More
result = a.shift()       // Return undefined if the array is empty
console.log(result)      // undefined
console.log(a)           / / []
Copy the code

05,join(value)Concatenate an array with a value to a string (without changing the array)

// Base
let a = [1.2.3.4.5]
let result = a.join(', ')
console.log(result)   / / '1, 2, 3, 4, 5'
console.log(a)        // [1, 2, 3, 4, 5]

// More
let obj = {
  toString() {
    console.log('The toString() method is called! ')
    return 'a'
  },
  toValue() {
    console.log('toValue () method. ')
    return 'b'
  }
}
result = a.join(obj) // When we use an object, we call the toString method of the object itself to convert it to a string. We override toString here to override the toString on the prototype chain
// The toString() method is called!
console.log(result)   // 1a2a3a4a5
console.log(a)        // [1, 2, 3, 4, 5]

// The opposite of join is the split method of the string
console.log('1a2a3a4a5'.split('a')) // [1, 2, 3, 4, 5]
Copy the code

06,reverse()Reverse the array (change the original array)

// Base
let a = [1.2.3.4.5]
let result = a.reverse()
console.log(result)   // [5, 4, 3, 2, 1]
console.log(a)        // [5, 4, 3, 2, 1]

// More
a = [1[2.3], [4.5]]
result = a.reverse()
console.log(result)   // [[4, 5], [2, 3], 1]
console.log(a)        // [[4, 5], [2, 3], 1]
// You can see that the inversion is only based on the first layer of the array, which is a shallow inversion.

// A simple deep inversion, implemented recursively
const deepReverse = (array) = > {
  let temp = array.reverse()
  temp.forEach(v= > {
    if(Object.prototype.toString.call(v) === '[object Array]') {
      deepReverse(v)
    }
  })
  return temp
}
a = [1[2.3], [4.5]]
result = deepReverse(a)
console.log(result)    // [[5, 4], [3, 2], 1]
Copy the code

07,slice(start, end)Return a new array containing the value of index start and the value of index end without end

// Base
let a = [1.2.3.4.5]
let result = a.slice(2.4)
console.log(result)   / / [3, 4]
console.log(a)        // [1, 2, 3, 4, 5]

// More
console.log(a.slice(1))         // [2, 3, 4, 5] has only one argument and is not less than 0
console.log(a.slice(- 1))        / / [5] there is only one parameter and less than zero, from | start | an interception from bottom to the bottom of the array
console.log(a.slice(- 1.1))     // [] Return an empty array
console.log(a.slice(1.- 1))     // [2, 3, 4] cut from the first digit to the last digit without including the last digit
console.log(a.slice(- 1.2 -))    // [] Return an empty array
console.log(a.slice(2 -.- 1))    // [4] Cut the second from the bottom to the first
Copy the code

The euro,splice(index, count, value)Select * from array where index = “index” and insert “value”

// Base
let a = [1.2.3.4.5]
let result = a.splice(1.2.0)
console.log(result)   / / [2, 3]
console.log(a)        // [1, 0, 4, 5]

// More
a = [1.2.3.4.5]
console.log(a.splice(2 -))                   4 / / [5]
console.log(a)                              / / [1, 2, 3]

a = [1.2.3.4.5]
console.log(a.splice(- 1))                   / / [5]
console.log(a)                              / / [1, 2, 3, 4] when parameters for a single and less than zero, will from an array of reciprocal | index | intercept to the bottom of the array

a = [1.2.3.4.5]
console.log(a.splice(0))                    // [1, 2, 3, 4, 5]
console.log(a)                              / / []

a = [1.2.3.4.5]
console.log(a.splice(1))                    // [2, 3, 4, 5]
console.log(a)                              // [1] When the parameter is single and not less than 0, the index bit represented by the current number is cut to the last part of the array

a = [1.2.3.4.5]
console.log(a.splice(- 1.2))                / / [5]
console.log(a)                              // [1, 2, 3, 4] (1, 2, 3, 4) returns only the existing elements

a = [1.2.3.4.5]
console.log(a.splice(0.2.'a'.'b'.'c'))  / / [1, 2]
console.log(a)                              / / / "a", "b", "c", 3, 4, 5] after the interception will value a fill the position of the array to be intercepted, the number of the value is greater than the number of interception, the rest of the elements in the array
Copy the code

09,sort()Sort the elements of an array

// Base
let a = [31.22.27.1.9]
let result = a.sort()
console.log(result)   // [1, 22, 27, 31, 9]
console.log(a)        // [1, 22, 27, 31, 9]

// More
a = ['c'.'ac'.'ab'.'1c'.13.12.'13'.'12'.'3'.'2'.'1b'.'1a'.1.'aa'.'a'.3.'b'.2]
a.sort()
console.log(a) // [1, 12, "12", 13, "13", "1a", "1b", "1c", "2", 2, "3", 3, "a", "aa", "ab", "ac", "b", "c"]
                      // If the value is converted into a string, the value is converted into a string. // If the value is converted into a string, the value is converted into a string.
a = [31.22.27.1.9]
a.sort((a, b) = >{
  return a - b
})
console.log(a)        // [1, 9, 22, 27, 31] The values are arranged in positive order

a = [31.22.27.1.9]
a.sort((a, b) = >{
  return b - a
})
console.log(a)        // [31, 27, 22, 9, 1] In reverse order of value
Copy the code

10,toString()Concatenate the elements of an array into a string using commas (without changing the array)

// Base
let a = [1.2.3.4.5]
let result = a.toString()
console.log(result)   / / 1, 2, 3, 4, 5
console.log(a)        // [1, 2, 3, 4, 5]
Copy the code

11,indexOf(value)If the index is 0, return the first index that matches it. If not, return -1(without changing the array).

// Base
let a = [1.2.3.2.5]
let result = a.indexOf(2)
console.log(result)   / / 1
console.log(a)        // [1, 2, 3, 2, 5]

result = a.indexOf(6)
console.log(result)   // -1
console.log(a)        // [1, 2, 3, 2, 5]
Copy the code

12,lastIndexOf(value)Start with the last index and check whether the array contains a value. If it does, return the first index that matches it. If it does not, return -1(without changing the array).

// Base
let a = [1.2.3.2.5]
let result = a.lastIndexOf(2)
console.log(result)   / / 3
console.log(a)        // [1, 2, 3, 2, 5]

result = a.lastIndexOf(6)
console.log(result)   // -1
console.log(a)        // [1, 2, 3, 2, 5]
Copy the code

13,concat(value)Concatenate arrays and/or values into a new array (without changing the original array)

// Base
let a = [1.2], b = [3.4], c = 5
let result = a.concat(b, c)
console.log(result)   // [1, 2, 3, 4, 5]
console.log(a)        / / [1, 2]

// More
b = [3[4]]
result = a.concat(b, c)
console.log(result)   // [1, 2, 3, [4], 5] concat cannot level nested arrays
console.log(a)        / / [1, 2]
Copy the code

14,fill(value, start, end)Fill the array with the given value, starting with the index start and ending with the index end.

// Base
let a = [1.2.3.4.5]
let result = a.fill(0.2.3)
console.log(result)             // [1, 2, 0, 4, 5]
console.log(a)                  // [1, 2, 0, 4, 5]

// More
a = [1.2.3.4.5]
console.log(a.fill(1))          // If the [1, 1, 1, 1, 1] parameter is one, overwrite the parameter to each item in the array
a = [1.2.3.4.5]
console.log(a.fill(1.2))       // [1, 2, 1, 1, 1, 1] If there is only start, the array is populated from index start to the end of the array
a = [1.2.3.4.5]
console.log(a.fill(1.2 -))      / / [1, 2, 3, 1, 1] is only the start and the negative, from the bottom | start | place began to fill the array to the bottom
Copy the code

15,flat()Change a two-dimensional array to a one-dimensional array (without changing the original array)

// Base
let a = [1.2.3[4.5]]
let result = a.flat()
console.log(result)   // [1, 2, 3, 4, 5]
console.log(a)        // [1, 2, 3, [4, 5]]

let a = [1.2.3[4.5[6.7[8.9]]]]
let result = a.flat()
console.log(result)   / / [1, 2, 3, 4, 5, [6, 7, [8, 9]]] obviously can only be the second layer nested array "flattening"
console.log(a)        // [1, 2, 3, [4, 5, [6, 7, [8, 9]]]]
Copy the code

16,flatMap()Equivalent to the combination of map and flat (without changing the array)

// Base
let a = [1.2.3.4.5]
let result = a.flatMap((currentValue) = >{
  return [currentValue, currentValue * 2]})console.log(result)   // [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
console.log(a)        // [1, 2, 3, 4, 5]
Copy the code

17,copyWithin(target, start, end)Copy the index of the array from start to end (without end) to the index at the beginning of target.

// Base
let a = [1.2.3.4.5]
let result = a.copyWithin(0.3.5)  
console.log(result)                 // [4, 5, 3, 4, 5]
console.log(a)                      // [4, 5, 3, 4, 5] [4, 5, 3, 4, 5] [4, 5, 3, 4, 5] [4, 5, 3, 4, 5] [4, 5, 3, 4, 5] [4, 5, 3, 4, 5] [4, 5, 3, 4, 5

// More
a = [1.2.3.4.5]
console.log(a.copyWithin(2))        // If [1, 2, 1, 2, 3] has only one parameter, start defaults to 0, and end defaults to the array length -1
Copy the code

18,entries()Return a new Array iterator for… Of traversal (without changing the array)

// Base
let a = [1.2.3.4.5]
let result = a.entries()
console.log(result.next())   // {value: [0, 1], done: false} The first element in the value array is the index, and the second element is the value corresponding to the index. console.log(result.next())// {value: [4, 5], done: false}
console.log(result.next())   // {value: undefined, done: true}
console.log(result)          // Array Iterator {}
console.log(a)               // [1, 2, 3, 4, 5]

result = a.entries()
for(let value of result) {
  console.log(value)
}
/ / [0, 1]
/ / [1, 2]
/ / [2, 3]
/ / [3, 4]
/ / [4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
result = a.entries()
for(let v of result) { }
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // Run it for three times, and the time for three times is 518ms 515ms 530ms
Copy the code

19,keys()Return a new Array iterator for… Of traversal (without changing the array)

let a = [1.2.3.4.5]
let result = a.keys()
console.log(result.next())   // {value: 0, done: false} Value indicates the index. console.log(result.next())// {value: 3, done: false}
console.log(result.next())   // {value: 4, done: false}
console.log(result)          // Array Iterator {}
console.log(a)               // [1, 2, 3, 4, 5]

result = a.keys()
for(let value of result) {
  console.log(value)
}
/ / 0
/ / 1
/ / 2
/ / 3
/ / 4

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
result = a.keys()
for(let v of result) { }
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // Run three times, three times the time of 223ms 262ms 300ms
Copy the code

20,values()Return a new iterator (without changing the array)

let a = [1.2.3.4.5]
let result = a.values()
console.log(result.next())   // {value: 1, done: false} Value indicates the index. console.log(result.next())// {value: 4, done: false}
console.log(result.next())   // {value: 5, done: false}
console.log(result)          // Array Iterator {}
console.log(a)               // [1, 2, 3, 4, 5]

result = a.values()
for(let value of result) {
  console.log(value)
}
/ / 1
/ / 2
/ / 3
/ / 4
/ / 5

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
result = a.values()
for(let v of result) { }
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // Run it for three times. The time for three times is 254ms 270ms 273ms
Copy the code

21,forEach()Walk through the array (without changing the array)

let a = [1.2.3.4.5]
let result = a.forEach((v, i) = >{
  console.log(v, i)  
  / / 1 0
  1 / / 2
  2 / / 3
  / 3/4
  / / 5 4
})
console.log(result)   // undefined
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.forEach(v= >{})
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // Run three times, three times of time 182ms 188ms 180ms
Copy the code

22,every(fn)Determine whether all elements in the array satisfy the conditions in the fn function (without changing the array)

let a = [1.2.3.4.5]
let result = a.every((currentValue) = >{
  return currentValue > 0
})
console.log(result)   // True Obviously all elements are greater than 0

result = a.every((currentValue) = >{
  return currentValue > 1
})
console.log(result)   // false 1 is not greater than 1
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.every(v= > v > - 1 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // Run it for three times, and the time for three times is 176ms 200ms 186ms

dateStart = Date.now()
a.every(v= > v > 8 )
dateEnd = Date.now()
console.log(dateEnd - dateStart) // 0ms 0ms 0ms does not exceed 1ms. It can be seen that every stops immediately when the condition that is not met is recognized
Copy the code

23,filter(fn)Return the set of arrays that satisfy the conditions in the fn function (without changing the original array)

let a = [1.2.3.4.5]
let result = a.filter((currentValue) = >{
  return currentValue > 4
})
console.log(result)   // [5] Only 5 satisfies the condition
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.filter(v= > v > - 1 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // Run for three times, and the number of times taken for three times is 584ms 660ms 552ms When all the values meet the conditions

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.filter(v= > v < 0 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 200ms 194ms 183ms forEach is only close at this time. This is also related to the fact that forEach itself only has traversal function and does not execute any other logic
Copy the code

24,find(fn)Return the first value in the array that matches the condition in the fn function.

let a = [1.2.3.4.5]
let result = a.find((currentValue) = >{
  return currentValue > 3
})
console.log(result)   / / 4
console.log(a)        // [1, 2, 3, 4, 5]

let result = a.find((currentValue) = >{
  return currentValue > 5
})
console.log(result)   // undefined
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.find(v= > v < 0 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // In the case of 185ms, 197ms, 203ms, the efficiency is equal to that of forEach

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.find(v= > v > 10 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 0ms 0ms 0ms is less than 1ms. When the first value that satisfies the condition is matched, the loop is stopped immediately, which is the same as every
Copy the code

25,findIndex(fn)Return the first index in the array that matches the condition in the fn function.

let a = [1.2.3.4.5]
let result = a.findIndex((currentValue) = >{
  return currentValue > 3
})
console.log(result)   / / 3
console.log(a)        // [1, 2, 3, 4, 5]

let result = a.findIndex((currentValue) = >{
  return currentValue > 5
})
console.log(result)   // -1
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.findIndex(v= > v < 0 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 185ms 183ms 187ms

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.findIndex(v= > v > 10 )
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // 0ms 0ms 0ms
Copy the code

26,includes()Returns a Boolean value indicating whether an array contains the given value (without changing the array)

let a = [1.2.3.4.5]
let result = a.includes(2)
console.log(result)   // true
console.log(a)        // [1, 2, 3, 4, 5]

result = a.includes(6)
console.log(result)   // false
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.includes(10)
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 0ms 0ms 0ms

a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.includes(10000000- 1)
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 22ms 18ms 27ms good performance
Copy the code

27,map(fn)Form a new array of the values returned by fn (without changing the original array)

let a = [1.2.3.4.5]
let result = a.map((v, i) = >{
  return 9
})
console.log(result)   // [9, 9, 9, 9, 9]
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.map(v= >1)
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 2158ms 2007ms 2079ms It takes much time
Copy the code

28,reduce()Accumulator (without changing the original array)

let a = [1.2.3.4.5]
let result = a.reduce((accumulator, currentValue, currentIndex, array) = >{
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue
  // 5 1 0 [1, 2, 3, 4, 5] Accumulator is the first element in the accumulator array
  // 6 2 1 [1, 2, 3, 4, 5] The value of the second accumulator is 5 plus the first value in array A, which is the value returned on the first loop
  // 8 3 2 [1, 2, 3, 4, 5] Ibid
  // 11 4 3 [1, 2, 3, 4, 5] Ibid
  // 15 5 4 [1, 2, 3, 4, 5] Ibid
}, 5)
console.log(result)   // 20 is the final cumulative sum
console.log(a)        // [1, 2, 3, 4, 5]

// If there is no initial value, the initial value of accumulator is the first element in the array, and currentValue is the second element in the array
result = a.reduce((accumulator, currentValue, currentIndex, array) = >{
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue
  // 1, 2, 3, 4, 5
  // 3 3 2 [1, 2, 3, 4, 5]
  // 6 4 3 [1, 2, 3, 4, 5]
  // 10 5 4 [1, 2, 3, 4, 5]
})
console.log(result)   // 15 is the final cumulative sum
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.reduce((accumulator, currentValue, currentIndex, array) = >{
  return accumulator + currentValue
})
let dateEnd = Date.now()
console.log(dateEnd - dateStart) // 200ms 258ms 257ms efficiency is not much different from forEach, and more than a cumulative function than forEach
Copy the code

29,reduceRight()Just like the reduce function, the accumulation starts at the end of the array (without changing the original array)

A little...Copy the code

30,some(fn)Check whether the array contains values that satisfy the fn condition (without changing the array)

let a = [1.2.3.4.5]
let result = a.some((v) = >{
  return v > 2
})
console.log(result)   // true
console.log(a)        // [1, 2, 3, 4, 5]

result = a.some((v) = >{
  return v > 6
})
console.log(result)   // false
console.log(a)        // [1, 2, 3, 4, 5]

// Time
a = []
for(let i = 0; i < 10000000; i++) {
  a.push(i)
}
let dateStart = Date.now()
a.some(v= >{
  return v < 0
})
let dateEnd = Date.now()
console.log(dateEnd - dateStart)  // The efficiency of forEach is equal to that of forEach
Copy the code

31,toLocaleString()Convert each element of the array to its own toLocaleString().Concatenation (without changing the array)

let a = [1.new Date(), 'a', {m: 1}]
let result = a.toLocaleString()
console.log(result)   // '1,2018/10/3 PM 9:23:59,a,[object object]'
console.log(a)        // [1, Wed Oct 03 2018 21:23:59 GMT+0800 (CST), "a", {m: 1}]
Copy the code

32,[@@iterator]()Array iterator methods (without changing the array)

Makes arrays available nativelyfor. Of is traversedCopy the code