Array methods commonly used in javascript

-1 preamble

• This document counts the common methods of arrays, and some parameters may be incomplete. Please go to mdn to view

0. delete Delete array elements

• a. Grammar:delete arr[2]
• b. Describe the content of deleting an item of the array, or set the content of an item to empty,
• c. return value
• d. The characteristics change the original array, and the length does not change

 var arr = [1,6,8,9,6]
 delete arr[3]
 console.log(arr)   //  [1, 6, 8, empty, 6]
 console.log(arr[3])  //  undefined

1. Adding push array elements

• a. Grammararr.push(1,2,5)
• b. Describes appending one or more elements to the end of the array
• c. Return the length of the array after adding elements
• d. The characteristics change the original array, and the length changes

2. pop deletes the end element of the array

• a. Grammararr.pop()
• b. Describe the deletion of an element at the end of the array
• c. The element whose return value is deleted
• d. The characteristics change the original array, and the length changes

3. Add elements to the front of the unshift array

• a. Grammararr.unshift(1,2,3)
• b. Describe adding one or more elements to the front of the array
• c. Return the length of the array after adding elements
• d. The characteristics change the original array, and the length changes

4. shift deletes the first element of the array

• a. Grammararr.shift()
• b. Describe the deletion of the first element of the array
• c. The element whose return value is deleted
• d. The characteristics change the original array, and the length changes

5. Interception of splice array elements

• a. Grammararr.splice(索引位置,[截取个数],[追加的新元素])
• b. Describe the intercepted array elements.
• ​ The first parameter: start intercepting from the index position, including the index
• ​ The second parameter: the number of interceptions, optional, ---- do not write to intercept all elements at the current index and beyond
• ​ The third parameter: replace and append the intercepted element with a new element
• c. The return value is an array, and the elements in the array are intercepted
• d. Features Change the original array and return a new array

var arr = [1,5,6,6,9,7,8,25,4]
var newArr = arr.splice(2) arr = [1,5]   newArr = [6,6,9,7,8,25,4]

var newArr = arr.splice(2,3) arr = [1,5,7,8,25,4]   newArr = [6,6,9]

var newArr = arr.splice(2,3,'aa',5,'6','bb') arr = [1,5,'aa',5,'6','bb',7,8,25,4]   newArr = [6,6,9]

6. reverse The reverse of the array elements

• a. Grammararr.reverse()
• b. Describe the inverted array
• c. The array after the return value is reversed === arr
• d. Features change the original array

var arr = [1,5,6,9]
var newArr =  arr.reverse()
 console.log(arr === newArr)  //true
 console.log(arr)     [9,6,5,1]
 console.log(newArr)   [9,6,5,1]

7. sort the sorting of array elements

• a. Grammar arr.sort(function(a,b){return a-b})// ascending order
• a. Grammar arr.sort(function(a,b){return b-a})// descending order
• b. Describe the optional parameters for array sorting, if not passed, sort in ascending order of character codes
• c. The array after the return value is reversed === arr
• d. Features change the original array

  var arr = [1,2,3,5,'6',8,7,'22',23,45]
  var newArr = arr.sort()
 console.log(arr === newArr)  //true
 console.log(arr)       [1, 2, "22", 23, 3, 45, 5, "6", 7, 8,]
 console.log(newArr)   [1, 2, "22", 23, 3, 45, 5, "6", 7, 8,]

 arr.sort(function(a,b){
    
    return a-b})  // 升序
 console.log(arr)    [1, 2, 3, 5, "6", 7, 8, "22", 23, 45]
 console.log(newArr)    [1, 2, 3, 5, "6", 7, 8, "22", 23, 45]

  arr.sort(function(a,b){
    
    return b-a})  // 降序
   console.log(arr)          [45, 23, "22", 8, 7, "6", 5, 3, 2, 1]
   console.log(newArr)        [45, 23, "22", 8, 7, "6", 5, 3, 2, 1]

8. Splicing of concat arrays

• a. Grammar:arr.concat(arr1,arr2,arr3)
• b. Description: Array splicing, splicing multiple arrays into one array
• c. Return value: a spliced ​​new array
• d. Features: do not change the original array

 var arr = [1,2,3]
 var arr1 = [25,36,78]
 var arr2 = [25,78,1,45]
 var newArr = arr.concat(arr1,arr2)
console.log(arr)        [1, 2, 3]
console.log(newArr)     [1, 2, 3, 25, 36, 78, 25, 78, 1, 45]
console.log('newArr===arr1',newArr===arr1) // false

9. join The splicing of array elements

• a. Grammar:arr.join('分隔符')
• b. Description: Concatenate the elements in the array into a string with a certain separator. The separator is as follows
• c. Return value: string
• d. Features: do not change the original array
• e. case

    var arr = [1,2,3]

  var newArr = arr.join()
  console.log(newArr)  // 1,2,3

    var newArr = arr.join('')
  console.log(newArr)  // 123

     var newArr = arr.join('aa')
  console.log(newArr)  // 1aa2aa3

10. Split string cutting

• a. Grammar:str.split('分隔符')
• b. Description: Convert a string to an array with a certain delimiter
• c. Return value: return the cut array

  
 var str = '465a76a986a6769'

 var arr = str.split()
 console.log(arr)           //  ["465a76a986a6769"]
 var arr = str.split('')  
 console.log(arr)           //  ["4", "6", "5", "a", "7", "6", "a", "9", "8", "6", "a", "6", "7", "6", "9"]
 var arr = str.split('6')
 console.log(arr)          //   ["4", "5a7", "a98", "a", "7", "9"]
 var arr = str.split('a')
 console.log(arr)          //   ["465", "76", "986", "6769"]

11. IndexOf array element search

• a. Grammar:arr.indexOf('内容')
• b. Description: Used to find the index of an item in the array,
• c. Return value: If the searched content does not exist in the array, it returns -1, and there is an index found at the beginning of the return order

  
 var arr = [1,6,8,9,6]

var newArr = arr.indexOf(3)   //  -1
 console.log(newArr)
 var newArr = arr.indexOf(6)
 console.log(newArr)       //  1

13. lastIndexOf array element lookup

• a. Grammar:arr.lastIndexOf('内容')
• b. Description: Used to find the index of an item in the array,
• c. Return value: If the searched content does not exist in the array, it will return -1, if it exists, return the index found in reverse order

  
 var arr = [1,6,8,9,6]

var newArr = arr.indexOf(3)   //  -1
 console.log(newArr)
 var newArr = arr.indexOf(6)
 console.log(newArr)       //  4

13. Finding the elements of the includes array

• a. Grammar:arr.includes('内容')
• b. Description: Determine whether the content exists in the array
• c. Return value: If the searched content does not exist in the array, it returns false, and if it exists, it returns true

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

var a  = arr.includes(6)   // false
var a  = arr.includes(2)   // true

14. Interception of slice array

• a. Grammar:const newArr = arr.slice([start],[end])
• b. Parameters: start start index end end index
• b. Description: Intercept the array elements from a certain position, return a new array after interception, do not change the original array, and do not include the end index
• c. Return value: new array after interception

const arr = [1,2,3]
const newArr = arr.slice(1,2)
console.log('aa1',newArr) // aa1 [ 2 ]
console.log('aa2',arr) // aa2 [ 1, 2, 3 ]

16. isArray Determines whether it is an array

• a. Grammar:Array.isArray(arr)
• b. Description: Determine whether the incoming object is an array
• c. Return value: false true

var arr = [1,2,3]
console.log(Array.isArray(arr))  // true
var arr = {
    
    name:123}
console.log(Array.isArray(arr))  // false

16. toString

• a. Grammar:arr.toString()
• b. Description: Convert an array to a string
• c. Return value: converted string

let arr = [1, 2, 3, 4, 5];
  let str = arr.toString()
  console.log(str)// 1,2,3,4,5

17. Flattening of flat arrays

• Array Flattening
• Recursively traverse the array according to a specified depth, and combine all elements and elements in the traversed subarray into a new array and return.
• returns the new array without changing the original array

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // 默认depth 为1

const arr2 = [0, 1,undefined,null,'', 2, [[[3, 4]]]];// 全局属性 Infinity 是一个数值，表示无穷大。
console.log('Infinity',Infinity) // Infinity
console.log('Infinity typeof',typeof Infinity) // number
// Infinity 展开任意深度
console.log(arr2.flat(Infinity)); // [ 0, undefined, null, '', 2, 3, 4 ]

const arr = new Array(2) // // flat会移除数组中的空项
arr[0] = 'aaaa'
console.log(arr.flat()) // [ 'aaaa' ]

18. Array creates an array instance

• array constructor

      const arr = new Array(10)
      console.log('arr',arr) // 创建了一个数组长度为10的数组
      console.log(arr[0] === null) // false
      console.log(arr[0] === undefined) // undefined
      console.log('1111', typeof arr[0]) // undefined
      const arr1 = new Array(10,20,30) // 创建一个数组 [10,20,30]
  

19. fill Array filling

• array padding
• Fills all elements in an array from the start index to the end index with a fixed value, excluding the end index
• grammar:arr.fill(value,[start],[end])
• Parameters: value: filled value start: start index position end: end index position

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]

20. from Convert class array to standard array

• Converts an array-like to a standard array
• Creates a new, shallow copy of an Array instance of an Array-like or Iterable

const set = new Set(['foo', 'bar', 'baz', 'foo']);

console.log(Array.from(set)) // [ 'foo', 'bar', 'baz' ]


function f() {
    
    
    return Array.from(arguments);
}
  console.log(  f(1, 2, 3)) // [ 1, 2, 3 ]

21 traversal of fouEach array

• iterate over the array
• grammar:arr.forEach((ele,[index],[arr]) =>{})
• Parameters: ele: each element index: array index arr array itself

const arr = [1,2,3]

arr.forEach((ele,index,arr) =>{
    
    })

22. Map array traversal and mapping

• array map
• Traverse the original array and return a new array, the new array element is the return value of each traversal callback function,
• Returns a new array without changing the original array
• grammar:arr.map((ele,[index],[arr]) =>{ return ele})
• Parameters: ele: each element of the array index array element index arr array itself

const arr = [1,2,3]

const newArr = arr.map((ele,index,arr) =>{
    
    
     return 1
})
console.log('11',newArr) // 11 [ 1, 1, 1 ]

23. Traverse and filter the filter array

• array filtering

• Traverse the original array and return a new array, the element of the new array is the item when the callback function returns true during traversal

• Returns a new array without changing the original array

const arr = [1,2,3]

const newArr = arr.filter((ele,index,arr) =>{
    
    
     return ele > 1
})
console.log('11',newArr) // 11 [ 2, 3 ]

24. reduce

• The return value of each callback can be passed as a parameter to the next callback
• Sequentially execute a reducer function provided by you for each element in the array . Each run of the reducer will pass in the calculation results of the previous elements as parameters, and finally aggregate the results into a single return value.
• grammar:const total = arr.reduce((pre,cur,index,arr) =>{return pre + cur},initValue)
• Parameters: initValue: initial value pre: last return value cur current array element

const arr = [1,2,3]

const total = arr.reduce((pre,cur,index,arr) =>{
    
    
   return pre + cur
},0)
console.log('aa',total) // 6