Detailed sample code explaining JavaScript array operation function methods

1. concat() connects two or more arrays

This method will not change the existing array, but will only return a copy of the connected array.
For example:

1 <script type="text/javascript">
2        var arr = [1, 2, 3];
3        var arr1 = [11, 22, 33];
4        document.write(arr.concat(4, 5, arr1));
5 </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 the specified delimiter.

For example:

1 <script type="text/javascript">
2       var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;];
3       var list = &#39;<ul><li>&#39; + arr.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;
4 </script>

list result:

'ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6item 2bed06894275b65c1ab86501b08a632eb< ;li>item 3bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689'

This is by far the fastest method! Using native code (such as join()), regardless of what the system does internally, is usually much faster than non-native. ——James Padolsey, james.padolsey.com

3. pop() Delete and return the last element of the array

The pop() method will delete the last element of the array An element, decrements the array length by 1, and returns the value of the element it deletes.

If the array is already empty, pop() does not change the array and returns an undefined value

For example:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.pop() + "<br/>");
5       document.write(arr);
6 </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:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.push("James") + "<br/>");
5       document.write(arr);
6 </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:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.unshift("James") + "<br/>");
5       document.write(arr);
6 </script>

Output result:

George,John,Thomas
4
James,George,John,Thomas

6 , reverse() reverses the order of elements in the array

For example:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.reverse());
5 </script>

Output result:

George,John,Thomas
Thomas,John,George

7. shift() deletes and returns the first element of the array

For example:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.shift() + "<br/>");
5       document.write(arr);
6 </script>

Output result:

George,John,Thomas
George
John,Thomas

8. slice(start,end) Returns the selected element from an existing array

Please note that this method does not modify the array, but returns a subarray

For example:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.slice(1) + "<br/>"); // 从第一个元素开始截取到 数组结尾
5       document.write(arr);
6 </script>

Output result:

George,John,Thomas
John,Thomas
George,John,Thomas

9, sort() Sorts the elements of an array

Reference to the array. Please note that the array is sorted on the original array and no copy is generated

This method defaults to sorting in the order of character encoding (ASCII)

For example:

1 <script type="text/javascript">
2     var arr = new Array(6);
3     arr[0] = "John";
4     arr[1] = "George";
5     arr[2] = "Thomas";
6     document.write(arr + "<br/>");
7     document.write(arr.sort());
8 </script>

Output Result:

John,George,Thomas
George,John,Thomas

Let’s look at another example:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort());
11 </script>

Output result:

10,5,40,25,1000,1
1,10,1000,25,40,5

We can see that it is not sorted by numerical size as we think. If we want to sort by To sort by numerical size, you need to change the default sorting method and specify the sorting rules yourself.
As follows:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort(function (a, b) {return a - b;}));// 从大到小
11 </script>

Output result:

10,5,40,25,1000,1
1,5,10,25,40,1000

What if you want to sort in descending order?

Change the sorting rule to:

function (a, b) {return b – a;}

That’s OK

10, splice( ) Delete elements and add new elements to the array

The splice() method has different functions from the slice() method. The splice() method will directly modify the array

(1) Delete the array elements in the specified range:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3    arr[0] = "George"; 
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)
12    document.write(arr);
13 </script>

Output result:

George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2) Insert the specified element starting from the specified subscript (the number of elements is not limited):

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 0, "William","JACK"); // 在第三个元素之前插入"William","JACK"
12    document.write(arr);
13 </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 elements (the number of elements is not limited):

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2,3,"William","JACK"); // 删除第三个元素以后的三个数组元素(包含第三个元素)，并用"William","JACK"进行替换
12 document.write(arr);
13 </script>

Output result:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin

The above is the detailed content of Detailed sample code explaining JavaScript array operation function methods. For more information, please follow other related articles on the PHP Chinese website!