Js array operations push, pop, shift, unshift and other methods are introduced in detail_javascript skills

There are still many methods for array operations in js. Today I suddenly thought of summarizing them, which can be regarded as reviewing the past and learning the new. However, I will not explain every method, I will just select some of them.

First of all, let’s talk about the push and pop methods. These two methods will only push or pop the array from the end, and operate on the original array. Any changes will affect the operated array. push(args) can push multiple elements at a time and return the updated array length. The pop() function will only pop up the last element at the end each time and return the popped element. If pop() is called on an empty array, it will return undefined. If the parameter is an array, the entire array is pushed into the original array as one element. It will not produce the "splitting phenomenon" similar to when concat merges arrays. Let's look at the example below

Example 1:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))–>5 (only [5,6] will be calculated as one element here, and the updated array length 5 will be returned)
At this time oldArr–>[1,2,3,4,[5,6]]
alert(oldArr.pop())–>[5,6](The last element [5,6] pops here, Instead of 6)
oldArr–>[1,2,3,4]
oldArr.pop()–>4
oldArr.pop()–>3
oldArr .pop()–>2
oldArr.pop()–>1
oldArr.pop()–>undefined (empty array popup)
Now after talking about push and pop, let’s look at unshift and shift
, both methods operate on the head of the array. Others are basically similar to push and pop, but in IE, the unshift method returns undefined

Example 2 :
var oldArr2=[1,2];
oldArr2.unshift(3)–>undefined
At this time oldArr2 is–>[3,1,2]
oldArr2 .shift()–>3
At this time, oldArr2 is [1,2]
Let’s take a look at the more powerful splice, which can be used to add and delete elements at random positions in the array. Its operation is also in the original There are

Modify on the array
splice(start,deleteCnt,args) The start in splice(start,deleteCnt,args) means to start the operation subscript, deleteCnt means to delete starting from the start subscript (including the element) The number of elements, the deletion operation returns the deleted elements. args represents the elements used to replace deleted elements (can have multiple parameters). start and deleteCnt must be numbers. If they are not numbers, try to convert them. If the conversion fails, it will be treated as 0. splice must have at least one start element, otherwise no operation will be performed. The absence of deleteCnt means deleting start and all subsequent elements (under IE, 0 will not be deleted). start can be a negative number, which means starting from the end of the right side of the array. If deleteCnt is negative, no deletion will be performed because it is impossible to delete negative elements.
Now that the explanation is over, let’s take a look at an example. You may be able to understand it better through examples

Example 3:
var oldArr3=[1,2];
oldArr3.splice()–>””(returns an empty string, does not perform any operation, after the operation oldArr3–>[1,2])
oldArr3.splice(“”)–> [1,2]("" failed to convert to a number and returned 0, so delete 1,2, oldArr3–>[] after the operation, but it is a bit disgusting under IE and does not do any operation)
oldArr3.splice(" 1a")–>Same as above
odlArr3.splice(0,2)–>[1,2]("Starting from the element with subscript 0, delete two elements 1,2, so after deletion oldArr3–> [])
oldArr3.splice(0,-1)–>””(Delete -1 elements starting from the 0 subscript, so no operation is done. After the operation, oldArr3–>[1,2] )
oldArr3.splice(1,1)–>2 (Delete 1 element starting from index 1, that is, delete 2, so after deletion, oldArr3–>[1])
oldArr3.splice(1 ,4)–>2 (Delete 4 elements starting from subscript 1, and there is only 1 element starting from 1, so delete 2, so after deletion, oldArr3–>[1])
oldArr3.splice(-1, 0,3)–>””(Delete 0 elements starting from subscript -1, which is element 2, and then add element 3, so after the operation oldArr3–>[1,3,2])
oldArr3.splice (-1,1,3)–>2 (Delete 1 element starting from subscript -1, which is 2 elements, and then add element 3. After the operation, it is oldArr3–>[1,3])
OK Next Let's start with concat. This method is used to connect two or more arrays. The array will not change the original array and will only return a new array. If the parameter is an array during the connection, the elements in the array will be connected. It is relatively simple to start the example directly

Example 4:
var oldArr4=[1,2];
oldArr4.concat(3,4)–>[1,2 ,3,4]
oldArr4.concat(3,4,[5,6])–>[1,2,3,4,5,6](What is added here is [5,6] Element 5 and element 6)
oldArr4.concat(3,[4,[5,6]])–>[1,2,3,4,[5,6]](the innermost layer here The entire elements [5,6] are used to add, not to split)
Let’s talk about the sorting method in the array sort
sort(function) is to sort the original array and will not generate a new array . By default, sort() without parameters converts the elements in the array into strings for comparison. When comparing, the characters are sorted according to the order in the character encoding. Each character has a unique encoding corresponding to it.

Look at the following example
var oldArr5=[3,1,5,7,17] Looking at this general concept, when sorting oldArr5, oldArr5.sort() will follow Sorting the numbers from small to large returns [1,3,5,7,17], but if you look at the result, it actually returns [1,17,3,5,7] because they are converted into strings during comparison. Then compare the strings one by one. If the first character is the same, compare the second character. Otherwise, the comparison result will be returned directly. Because "17"
In addition to the default no parameters, the sort(function) method can also pass in a custom sorting method. In this way, the sorting results can be completely controlled by yourself. You can sort them however you want. Isn’t it great? Ah, hehe. Generally, a custom function comparison function contains two parameters representing the left element and the right element used for comparison. Then a result is returned in a certain way. If the return value is greater than 0, it means that the left and right elements are exchanged. If the return value is less than 0 or equal to 0, it means that the left and right elements will not be exchanged. Now look at the example

Example 5:
Arrange the original array according to the numbers from large to small

Copy code The code is as follows:

var oldArr5=[3,1,5,7,17]; //Initial array
function mySort(left,right) {
if(leftreturn 1;}//If the left element is less than the right element, exchange the two numbers
else{
return -1;}//If the left element is greater than or equal to The elements on the right are not exchanged
}

Of course the above method can be simplified to funaction mySort(left,right){ return right-left;}

Copy code The code is as follows:

//Sort by even numbers first and odd numbers last
var oldArr6=[3,6,7, 18];//Initial array
function mySort2(left,right){
if(left%2==0)return -1;//If the left element is an even number, no exchange is done
if(right %2==0)return 1; //If the right element is an even number, exchange
return 0; //Do not exchange
}

I won’t talk much about the last slice, just use To intercept some elements in the original array and return a new array. The original array will not change. Its operation method is similar to the slice of string

Copy code The code is as follows:

var oldArr7=[1,2,3,4];
oldArr7.slice(0)–>[1,2,3,4 ]
oldArr7.slice(0,2)–>[1,2]
oldArr7.slice(0,0)–>[]
oldArr7.slice(0,-1)–> ;[1,2,3]
oldArr7.slice(-3,-1)–>[2,3]
oldArr4.slice(-1,-3)–[]