Analysis of Common Methods of js Array

Arrays are also object data types and consist of key-value pairs

   var ary = [12,23,34]; one-dimensional array
   /*
     *Structure
     * 0:12
     * 1:23
     * 2:34
     * length: 3
   */
   1. Number as index (attribute name), index increases from 0
   2. There is a length property that stores the length of the array
   ary[0] Get the first item
   ary[ary.length-1]Get the last item

The value of each item in the array can be of any data type

//Multidimensional Array
   var ary  = [
      {
       name:'xxx',
       age:20
  };
  {
       name:'xxx',
       age:20
  }
];

Common methods in arrays

Memory in four dimensions:

• Role of methods
• Parameters of the method

-The return value of the method

• Is the original array changed

push
Role: Add new content to the end of the array
Parameters: What to append (can be one or more)
Return value: length of new array
Old Array Change

     var ary = [12,23,34];
     ary.push(100); =>4  ary: [12,23,34,100]
     ary.push(100,222,{name:'xx',age:200});
     => 10  ary: [12, 23, 34, 100, 100, 222, 0.1, 100, 222,{name: "xx", age: 200}]

pop
Role: Delete the last item of the array
Parameter: None
Return value: the deleted item
Old Array Change

     var ary = [12,23,34];
     ary.pop() =>34 //Delete 34
     ary:[12,23]

shift
Role: Delete the first item of the array
Parameter: None
Return value: the deleted item
Old Array Change

     var ary = [12,23,34];
     ary.shift() =>12 //Delete 12
     ary:[23,34]

unshift
Role: Add new content to the beginning of the array
Parameter: What to add
Return value: The length of the new array
Old Array Change

     var ary = [12,23,34];
     ary.unshift(2,null) =>5 //Increase 2 items by 2, null
     ary:[2,null,12,23,34]

splice
splice-based arrays can be manipulated in many ways: deleting the contents of a specified location, adding content to an array at a specified location, or modifying information at a specified location

`Delete:ary.splice(n,m)`
N stands for deleting m contents from index n, returning the deleted part as a new array, changing the original array.

     var ary=[12,23,34,45,56,67,78,89];
     Ary.splice(2,3) => Delete [34,45,56] //2 means to start after the second number, and 3 means to delete the three numbers after the second number.
     => ary :[12,23,67,78,89]
     Ary.splice(2) =>Delete all numbers after the second [34, 45, 56, 67, 78, 89];
     //If you don't know
    `ary(n, m)`n stands for M digits starting from the nth number and M stands for M digits after the nth number has been deleted.
    If m is not specified, or the number of deletions is greater than the maximum length, they are deleted to the end of the array.

Newly added:ary.splice(n,0,x,...)
Delete zero items from index n (not deleted), and store x or more to be inserted in front of index N in the array

    var ary=[12,23,34,45,56,67,78,89];
    ary.splice(3,0,111,1111,222,222,null); =>0 //Because none of the items were deleted, an empty array was returned
    ary => [12, 23, 34, 111, 1111, 222, 222, null, 45, 56, 67, 78, 89]

Modify:ary.splice(n,m,x,...)
The principle of modification is to delete the original content and replace it with new content.

    var ary=[12,23,34,45,56,67,78,89];
   ary.splice(2,3,8888) //Starting with item 2, delete 3 items and replace them with 888
   ary => [12, 23, 8888, 67, 78, 89]

Demand Expansion

1. How many ways do you have to delete the last item of the array?

2. How many ways do you want to append new content to the end of the array?

    //=>Delete the last item
    ary.pop()
    ary.splice(ary.length-1)
    ary.length--
   //=>Append new content to the end of the array
   ary.push(100)
   ary.splice(ary.length,0,100)
   ary[ary.length]=100

delete ary[ary.length-1] It is not recommended to delete an item from the array with delete. Although the content is gone, the length of the array has not changed.=> ary: [12, 23, 34, 45, empty]

slice
Role: In an array, find parts of it by condition
Parameters: n, m, from index n, find index m, but not M. (find m-n number from n to back)
Return: Store the lookup in a new array
The original array will not change

var ary=[12,23,34,45,56,67,78,89,90];
ary.slice(2,7)
(5) [34, 45, 56, 67, 78]
ary [12, 23, 34, 45, 56, 67, 78, 89]
ary()and ary(0) //All take the entire data, like a shallow copy-implementation clone of the array, the same as the original array content, but not the same heap memory space, the two arrays are not equally independent
ary(-3,-1) //From the third last to last item, take -3+ (-1) from the end
ary(2) //If you don't write m, find the end of the array

concat
Role: To achieve splicing of multiple arrays (or values)
Parameter: Array or value
Return: A new stitched array
The original array is unchanged

   var ary1=[12,23];
   var ary2=[100,200];
   var ary3=[1000,2000];
   ary1.concat(ary1,'Front end',ary3)
   =>ary1.concat(ary1,'Front end',ary3)
  (7) [12, 23, 12, 23, "Front end", 1000, 2000]
  => [].concat(ary2,ary1,'Front end',ary3) //Empty arrays can be used as the beginning of stitching, and the order of stitching can be arranged in parentheses. Empty arrays do not occupy the position of content.
  (7) [100, 200, 12, 23, "Front end", 1000, 2000] 

toString
Role: Convert an array to a string
Parameter: None
Return: A comma-separated string for each item in the array
The original array is unchanged

   var ary=[12,23];
   ary.toString =>"12,23"

join
What it does: Like toString, it converts an array to a string, but we can set it to a string, between each item
Parameter: None
Return: A comma-separated string for each item in the array
The original array is unchanged

   var ary=[12,23,34,45];
   ary.join =>"12,23,34,45"
   ary.join('+') => "12,23,34,45"
   eval(ary.join('+')) =>114
   join-based implementation of each summation function in the array.
   1. Based on join, use + as the delimiter, first change the array to a string that adds each item
   2. Based on eval, the string is converted to a js expression and the result is the sum of each item in the array

reverse
Role: Sort arrays upside down
Parameter: None
Return: New array after arrangement
Original Array Change

   var ary=[12,23,45];
   ary.reverse()
   [45,23,12]

sort
Role: Array sorting
Parameter: None/Function
Return: New array after arrangement
Original Array Change

   var ary=[12,23,67,78,45];
   ary.sort() => [12,23,45,67,78]
   //=>sort can only process numbers within 10 to sort without passing parameters

   var ary=[18,1,2,34,5,56]
   ary.sort => [1, 18, 2, 34, 5, 56] //Not in the order we expected
   //=>In real projects, based on sort ordering, we need to pass parameters
   var ary=[18,1,2,34,5,56];
   ary.sort(function (a,b){
    return a-b; //=>Ascending
    return b-a; //=>Descending
})

//For example: var ary=[18,1,2,34,5,56]
undefined
//Pass-through
ary.sort(function(a,b){
return a-b; //Ascending order
})
(6) [1, 2, 5, 18, 34, 56]
ary.sort(function(a,b){
return b-a;  //Descending order
})
(6) [56, 34, 18, 5, 2, 1]

indexOf/lastIndexOf
The two methods are incompatible with the lower version of IE browser (ie6~8)
Role: Detects the first or last unknown index of the current value in the array
Parameter: Value to detect
Return: Index
Invariant original array

   var ary=[18,1,2,34,5,56]
   ary.indexOf(34)  //34 with index 3
   3
   ary.indexOf(100)  //No 100, so index is -1
   -1
//Based on indexOf detection, an index greater than 0 is returned if there is one item in the array, and -1 is returned if there is no such item

//=>Detect if an item is in the array
if(ary.indexOf(100)>-1){
   //=>ARY contains 100
}

In addition to the above methods, arrays contain a number of commonly used methods:
(Array.prototype)

• every
• filter
• find
• forEach
• includes
• keys
• map
• reduce/reduceRight
• some

...