Js Array Operation push, pop, shift, unshift and other methods detailed introduction _ javascript skills

Source: Internet
Author: User
In js, there are still a lot of methods for Array Operations. Today, I suddenly want to sum up, which is a warm story. However, I will not explain each method. I just want to explain some of them. If you are interested, you can study many methods for Array Operations in js, today, I suddenly thought of it as a summary. It's just a warm story. However, I will not explain each method. I just choose some of them.

First, let's talk about the push and pop methods. These two methods only press or pop the array from the end, and operate the original array. Any changes will affect the operation of the array. Push (args) can push multiple elements each time and return the updated array length. The pop () function only pops up the last ending element at a time and returns the pop-up element. If you call pop () for the number of empty groups, undefined is returned. If the parameter is an array, the entire array is pushed into the original array as an element. It does not produce a "split phenomenon" similar to the "split phenomenon" generated when concat merges arrays. The following is an example:

Example 1:
Var oldArr = [1, 2, 3];
Alert (oldArr. push (4, [5, 6])-> 5 (here we will only calculate [5, 6] as an element, and return the updated array length of 5)
In this case, oldArr-> [1, 2, 3, 4, [5, 6]
Alert (oldArr. pop ()-> [5, 6] (the last element [5, 6] is displayed here, instead of 6)
In this case, oldArr-> [1, 2, 3, 4]
OldArr. pop ()-> 4
OldArr. pop ()-> 3
OldArr. pop ()-> 2
OldArr. pop ()-> 1
OldArr. pop ()-> undefined (empty array pop-up)
Now let's take a look at unshift and shift after talking about push and pop.
Both methods are performed through the operation on the array header. Other methods are similar to push and pop. However, in IE, The unshift method returns undefined.

Example 2:
Var oldArr2 = [1, 2];
OldArr2.unshift (3)-> undefined
In this case, oldArr2 is-> [3, 1, 2]
OldArr2.shift ()-> 3
In this case, oldArr2 is [1, 2]
Next, let's take a look at the powerful splice, which can be used to add and delete elements at random positions in the array.

Modify on Array
In splice (start, deleteCnt, args), start indicates that the subscript is started, deleteCnt indicates the number of elements to be deleted starting from the start subscript (including this element), and the delete operation returns the deleted element. Args indicates to replace the deleted elements (which can have multiple parameters). start and deleteCnt must be numbers. If the conversion is not a number, the conversion failure is treated as 0. Splice must have at least one start element. Otherwise, no operation is performed. If deleteCnt does not exist, the start and all subsequent elements are deleted (0 for IE ). Start can be a negative number, indicating that the calculation starts from the end of the array on the right. If deleteCnt is a negative number, it is not possible to delete the negative element.
Now let's take a look at the example. The example may be better understood.

Example 3:
Var oldArr3 = [1, 2];
OldArr3.splice ()-> "" (returns an empty string without any operation. After the operation, oldArr3-> [1, 2])
OldArr3.splice ("")-> [1, 2] ("" returns 0 if it fails to be converted to a number. Therefore, delete 1, 2. After the operation, oldArr3-> [], but IE is a bit disgusting, do not perform any operations)
OldArr3.splice ("1a")-> same as above
OdlArr3.splice ()-> [] ("two elements are deleted starting from the element with the subscript 0. Therefore, oldArr3-> [])
OldArr3.splice (0,-1)-> "" (delete-1 element starting from 0 subscript, so no operation is performed. After the operation, oldArr3-> [1, 2])
OldArr3.splice ()-> 2 (delete 1 element from subscript 1, that is, delete 2, so oldArr3-> [1])
OldArr3.splice ()-> 2 (delete four elements from subscript 1, and 1 has only one element, so Delete 2, so oldArr3-> [1])
OldArr3.splice (-, 3)-> "(delete 0 elements from subscript-1, that is, 2, and then add 3 elements. Therefore, oldArr3-> [1, 3, 2])
OldArr3.splice (-, 3)-> 2 (delete one element from the standard-1 (element 2), add element 3, and then oldArr3-> [1, 3])
OK. Next we will talk about concat. This method is used to connect two or more arrays. This array will not change the original array and only return a new array. If the parameter is an array during connection, the element in the array is connected. Because it is relatively simple to start with an example

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] (elements 5 and 6 in [5, 6] are added here)
OldArr4.concat (3, [4, [5, 6])-> [1, 2, 3, 4, [5, 6] (the elements in the innermost layer [5, 6] here are used to add rather than disassemble)
Next we will talk about the sorting method sort in the array.
Sort (function) sorts the original array and does not generate a new array. By default, when sort () does not contain parameters, the elements in the array are converted to strings for comparison. When compared, the characters are sorted in the character encoding order, each character has a unique encoding corresponding to it.

See the following example.
Var oldArr5 = [, 17] according to this general idea, oldArr5.sort () will return [, 17] in ascending order of numbers. however, if you look at the results, [, 7] is not returned because the results are converted into strings during comparison. Then compare strings one by one. If the first character is the same, the second character is compared. Otherwise, the comparison result is directly returned, because "17" <"3", it is conceivable that the sorting result is not the result of the general impression.

In addition to the default no-argument method, the sort (function) method can also be passed in to a custom sorting method, so that the sorting result can be controlled by itself, isn't that refreshing. Generally, a custom function comparison function contains two parameters representing the left and right elements used for comparison. Then, a result is returned in a certain way. If the returned value is greater than 0, the left and right elements are exchanged. If the returned value is less than 0 or equal to 0, the left and right elements are not exchanged. Let's take a look at the example.

Example 5:
Sort the original array in ascending order of numbers

The Code is as follows:


Var oldArr5 = [3, 1, 5, 7, 17]; // initial Array
Function mySort (left, right ){
If (left Return 1;} // If the left element is smaller than the right element, two numbers are exchanged.
Else {
Return-1;} // If the left element is greater than or equal to the right element, no exchange is performed.
}


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

The Code is as follows:


// Sort by the first and last odd numbers of even numbers
Var oldArr6 = [,]; // initial Array
Function mySort2 (left, right ){
If (left % 2 = 0) return-1; // if the left element is an even number, it is not exchanged.
If (right % 2 = 0) return 1; // if the right element is an even number
Return 0; // do not exchange
}


The last slice is not mentioned much. It is only used to capture some elements in the original array and return a new array. The original array will not change, and its operation method is similar to that of the string slice.

The Code is as follows:


Var oldArr7 = [1, 2, 4];
OldArr7.slice (0)-> [1, 2, 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)-[]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.