Detailed sample code explaining JavaScript array operation function methods-JS Tutorial-php.cn

Detailed sample code explaining JavaScript array operation function methods

黄舟

Release： 2017-03-16 14:49:18

Original

1323 people have browsed it

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>

Copy after login

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>

Copy after login

list result:

item 1
item 2

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>

Copy after login

Output result:

George,John,Thomas
Thomas
George,John

Copy after login

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>

Copy after login

Output result:

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

Copy after login

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>

Copy after login

Output result:

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

Copy after login

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>

Copy after login

Output result:

George,John,Thomas
Thomas,John,George

Copy after login

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>

Copy after login

Output result:

George,John,Thomas
George
John,Thomas

Copy after login

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>

Copy after login

Output result:

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

Copy after login

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>

Copy after login

Output Result:

John,George,Thomas
George,John,Thomas

Copy after login

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>

Copy after login

Output result:

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

Copy after login

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>

Copy after login

Output result:

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

Copy after login

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>

Copy after login

Output result:

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

Copy after login

(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>

Copy after login

Output result:

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

Copy after login

(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>

Copy after login

Output result:

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

Copy after login

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!