Learning contents: forEach, slice and slice, and the remaining methods of array
Study notes
forEach
Generally, we use the for loop to traverse the array
JS also provides us with a method to traverse the array
forEach() only supports browsers above IE8
The forEach() method requires a function as a parameter; This function is created by us, but not called by us. It is called callback function
Syntax:
arr.forEach(function(){})
If there are several elements in the array, the function will be executed several times. Each time, the browser will pass the traversed elements in the form of arguments. We can define formal parameters to read these contents
The browser will pass three parameters in the callback function; The first parameter is the element currently being traversed, and the second parameter is the index of the element currently being traversed; The third element is the array being traversed
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var arr=["Zhang San","Li Si","Wang Wu","Li Liu"];
arr.forEach(function(value,index,obj){
document.write("value= "+value+"<br>");
document.write("index= "+index+"<br>");
document.write("obj= "+obj+"<br>");
});
</script>
<title></title>
</head>
<body>
</body>
</html>result
slice and splice
slice
slice() is used to return a specific element from an array;
Parameters:
1. The index of the location where the interception starts, including the start index
2. The index of the position where the interception ends, excluding the end index; The second parameter can be omitted without writing. At this time, all elements from the beginning of the index will be intercepted
Indexes can pass negative values. If negative values are passed, they are calculated from back to front
-1 penultimate, 2 penultimate
Syntax:
arr.slice(start，end);
This method does not change the element array, but encapsulates the intercepted elements into a new array and returns them
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var arr=["Zhang San","Li Si","Wang Wu","Li Liu"]; var result=arr.slice(1,3); document.write(result); </script> </head> <body> </body> </html>
result:
splice
splice() can be used to delete a specified element from an array
Using splice() will affect the original array, delete the specified element from the original array, and take the deleted element as the return value
Parameters:
The first index that represents the start position
The second represents the number of deleted items
splice() also has the third and subsequent parameters, which can pass some new elements, which will be automatically inserted in front of the start position index
Syntax:
arr.splice(start,num, "new element added",...);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var arr=["Zhang San","Li Si","Wang Wu","Li Liu"]; var result=arr.splice(1,2,"Zhao Qi","yellow sir"); document.write(result+"<br>"); document.write(arr); </script> </head> <body> </body> </html>
Results:
Remaining methods of array
concat()
concat() can connect two or more arrays and return the new array
This method will not affect the original array
grammar
var arr = ["Zhang San", "Li Si", "Wang Wu", "li Liu"];
var arr1 = ["Xiao Liu", "Xiao Zhao", "Xiao Li"];
var result=arr.concat(arr1);
Examples
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var arr =["Zhang San","Li Si","Wang Wu","Li Liu"]; var arr1=["Xiao Liu","Xiao Zhao","petty thief"]; var result=arr.concat(arr1); document.write(result); </script> </head> <body> </body> </html>
Results
join()
This method can convert the array into a string; This method does not affect the original array, but returns the converted String as the result
In join(), you can specify a string as a parameter. This string will become the connector of the elements in the array. If you do not specify a connector, it will use "," as the connector by default
grammar
var arr = ["Zhang San", "Li Si", "Wang Wu", "li Liu"];
var result=arr.join("-");
document.write(result);
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr =["Zhang San","Li Si","Wang Wu","Li Liu"];
var result=arr.join("-");
document.write(result);
</script>
</head>
<body>
</body>
</html>
result
reverse()
The reverse() method can reverse an array (the front edge goes to the back edge, and the rear edge goes to the front edge); This method will change the original array
Grammar
var arr = ["Zhang San", "Li Si", "Wang Wu", "li Liu"];
arr.reverse();
document.write(arr);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var arr =["Zhang San","Li Si","Wang Wu","Li Liu"]; arr.reverse(); document.write(arr); </script> </head> <body> </body> </html>
Results
sort()
sort() can be used to sort the elements in the array; It will also affect the original array, which will be sorted according to Unicode encoding by default
var arr =["f","a","s","d","e","k"];
arr.sort();
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr =["f","a","s","d","e","k"];
arr.sort();
document.write(arr);
</script>
</head>
<body>
</body>
</html>
Even for arrays of pure numbers, sorting by sort() will be carried out according to Unicode encoding, so wrong results may be obtained when sorting numbers; We can specify the sorting rules ourselves
We can add a callback function in sort() to specify the sorting rules. Two formal parameters need to be defined in the callback function. The browser will use the elements in the array as arguments to call the callback function
Which element to call is uncertain, but it is certain that a must precede b in the array
The browser will determine the sorting of elements according to the return value of the callback function,
If Han Hui a value greater than 0, the element will swap positions
If a value less than 0 is returned, the element position remains unchanged
If a 0 is returned, the two elements are considered equal and the positions are not exchanged
grammar
Ascending order:
var arr1=[5,6,8,2,4,9,1,54,36,15];
arr1.sort(function(a,b){
return a-b;
});
Descending order:
var arr1=[5,6,8,2,4,9,1,54,36,15];
arr1.sort(function(a,b){
return b-a;
});
Ascending instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr1=[5,6,8,2,4,9,1,54,36,15];
arr1.sort(function(a,b){
return a-b;
});
document.write(arr1);
</script>
</head>
<body>
</body>
</html>
result
