1. concat() joins two or more arrays
This method does not change the existing array, but only returns a copy of the array being joined.
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = [1, 2, 3];
var arr1 = [11, 22, 33];
document.write(arr.concat(4, 5, arr1));
</script>
Output result:
1,2,3,4,5,11,22,33
2. Join()
Put all elements of the array into a string. Elements are separated by specified delimiters.
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = ['item 1', 'item 2', 'item 3'];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
</script>
List results:
'<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>'
This is the fastest way to date! Using native code (such as join()), no matter what is done inside the system, it is usually much faster than non-native. ―James Padolsey, james.padolsey.com
3. pop() deletes and returns the last element of the array
The pop() method will delete the last element of the array, reduce the length of the array by 1, and return the value of the element it deletes.
If the array is already empty, pop() does not change the array and returns the undefined value
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = ["George", "John", "Thomas"];
document.write(arr + "<br/>");
document.write(arr.pop() + "<br/>");
document.write(arr);
</script>
Output result:
George, John, Thomas
Thomas
George, John
4. push() adds one or more elements to the end of the array and returns the new length
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = ["George", "John", "Thomas"];
document.write(arr + "<br/>");
document.write(arr.push("James") + "<br/>");
document.write(arr);
</script>
Output result:
George, John, Thomas
4
George, John, Thomas, James
5. unshift() adds one or more elements to the beginning of the array and returns the new length
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = ["George", "John", "Thomas"];
document.write(arr + "<br/>");
document.write(arr.unshift("James") + "<br/>");
document.write(arr);
</script>
Output result:
George, John, Thomas
4
James George John Thomas
6. reverse() reverse() reverse the order of elements in the array
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = ["George", "John", "Thomas"];
document.write(arr + "<br/>");
document.write(arr.reverse());
</script>
Output result:
George, John, Thomas
Thomas, John, George
7. shift() deletes and returns the first element of the array
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = ["George", "John", "Thomas"];
document.write(arr + "<br/>");
document.write(arr.shift() + "<br/>");
document.write(arr);
</script>
Output result:
George, John, Thomas
George
John Thomas
8. slice(start,end) returns the selected element from an existing array
Note that this method does not modify the array, but returns a subarray
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = ["George", "John", "Thomas"];
document.write(arr + "<br/>");
document.write(arr.slice(1) + "<br/>"); // Start from the first element to the end of the array
document.write(arr);
</script>
Output result:
George, John, Thomas
John Thomas
George, John, Thomas
9. sort() sorts the elements of the array
Reference to the array. Please note that the array is sorted on the original array and does not generate a copy
By default, this method is sorted in the order of character encoding (ASCII).
For example:
The code copy is as follows:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "John";
arr[1] = "George";
arr[2] = "Thomas";
document.write(arr + "<br/>");
document.write(arr.sort());
</script>
Output result:
John George Thomas
George, John, Thomas
Let’s take a look at another example:
The code copy is as follows:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = 10
arr[1] = 5
arr[2] = 40
arr[3] = 25
arr[4] = 1000
arr[5] = 1
document.write(arr + "<br/>");
document.write(arr.sort());
</script>
Output result:
10,5,40,25,1000,1
1,10,1000,25,40,5
We can see that we do not sort by number size as we think. If we want to sort by number size, we need to change the default sorting method and specify the sorting rules yourself.
as follows:
The code copy is as follows:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = 10
arr[1] = 5
arr[2] = 40
arr[3] = 25
arr[4] = 1000
arr[5] = 1
document.write(arr + "<br/>");
document.write(arr.sort(function (a, b) {return a - b;}));// From large to small
</script>
Output result:
10,5,40,25,1000,1
1,5,10,25,40,1000
What if you want to sort it in descending order?
Change the sorting rule to:
function (a, b) {return b - a;}
It's OK
10. splice() deletes elements and adds new elements to the array
The function of the splice() method is different from the slice() method. The splice() method will directly modify the array.
(1) Delete the array elements of the specified range:
The code copy is as follows:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr + "<br/>");
arr.splice(2, 3); // Delete the three array elements after the third element (including the third element)
document.write(arr);
</script>
Output result:
George, John, Thomas, James, Adrew, Martin
George, John, Martin
(2) Insert the specified element from the specified subscript (the number of elements is unlimited):
The code copy is as follows:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr + "<br/>");
arr.splice(2, 0, "William","JACK"); // Insert "William","JACK" before the third element
document.write(arr);
</script>
Output result:
George, John, Thomas, James, Adrew, Martin
George, John, William, JACK, Thomas, James, Adrew, Martin
(3) Delete the array elements in the specified range and replace them with the specified element (the number of elements is unlimited):
The code copy is as follows:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr + "<br/>");
arr.splice(2,3,"William","JACK"); // Delete the three array elements (including the third element) after the third element and replace them with "William", "JACK"
document.write(arr);
</script>
Output result:
George, John, Thomas, James, Adrew, Martin
George, John, William, JACK, Martin