©2020-2024 ioDraw All rights reserved
JavaScript There are two ways to create arrays in ：
use Array Constructors ：
var arr1 = new Array(); // Create an empty array var arr2 = new Array(20); // Create an 20 An array of items
var arr3 = new Array("lily","lucy","Tom"); // Create an 3 An array of strings
Using array literal representation ：
var arr4 = []; // Create an empty array var arr5 = [20]; // Create an 1 An array of items var arr6 =
["lily","lucy","Tom"]; // Create an 3 An array of strings
Array method has array prototype method , There is also a way out object Methods inherited from objects , Here we only introduce the prototype method of array , Array prototype methods mainly include the following ：
join() push() and pop() shift() and unshift() sort() reverse() concat() slice()
splice() indexOf() and lastIndexOf() （ES5 newly added ） forEach() （ES5 newly added ） map() （ES5 newly added ）
filter() （ES5 newly added ） every() （ES5 newly added ） some() （ES5 newly added ） reduce() and reduceRight() （ES5 newly added ）
The basic functions of each method are described in detail below .
1,join()
join(separator):
Group the elements of an array into a string , with separator Is the separator , If omitted, use the default comma as the separator , This method only receives one parameter ： That is, the separator .
var arr = [1,2,3]; console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3 console.log(arr); // [1, 2, 3]（ The original array does not change ）
adopt join() Method to implement duplicate strings , Just pass in the string and the number of repetitions , Can return the repeated string , The function is as follows ：
function repeatString(str, n) { return new Array(n + 1).join(str); }
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi
2,push() and pop()
push(): Any number of parameters can be received , Add them one by one to the end of the array , And returns the length of the modified array .
pop()： Remove the last item at the end of the array , Reduce the number of arrays length value , The removed item is then returned .
var arr = ["Lily","lucy","Tom"]; var count = arr.push("Jack","Sean");
console.log(count); // 5 console.log(arr); // ["Lily", "lucy", "Tom", "Jack",
"Sean"] var item = arr.pop(); console.log(item); // Sean console.log(arr); //
["Lily", "lucy", "Tom", "Jack"]
3,shift() and unshift()
shift()： Delete the first item of the original array , And returns the value of the deleted element ; If it is empty, the array is returned undefined .
unshift: Add the parameter to the beginning of the original array , And returns the length of the array .
This set of methods is the same as above push() and pop() The method corresponds exactly , One is the beginning of the operation array , One is the end of the operation array .
var arr = ["Lily","lucy","Tom"]; var count = arr.unshift("Jack","Sean");
console.log(count); // 5 console.log(arr); //["Jack", "Sean", "Lily", "lucy",
"Tom"] var item = arr.shift(); console.log(item); // Jack console.log(arr); //
["Sean", "Lily", "lucy", "Tom"]
4,sort()
sort()： Arrange array items in ascending order —— That is, the smallest value is in the front , The largest value is at the bottom .
When sorting ,sort() Method calls the toString() Transformation methods , Then compare the resulting string , To determine how to sort . Even if every item in the array is numeric ,
sort() Method is also a string comparison , Therefore, there will be the following situation ：
var arr1 = ["a", "d", "c", "b"]; console.log(arr1.sort()); // ["a", "b", "c",
"d"] arr2 = [13, 24, 51, 3]; console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51]( Meta array changed )
In order to solve the above problems ,sort() Method can take a comparison function as an argument , So that we can specify which value precedes which value . The comparison function takes two arguments , Returns a negative number if the first parameter should precede the second , Returns if two parameters are equal
0, Returns a positive number if the first argument should follow the second . Here is a simple comparison function ：
function compare(value1, value2) { if (value1 < value2) { return -1; } else if
(value1 > value2) { return 1; } else { return 0; } } arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]
If you need to use the comparison function to generate descending sort results , Just exchange the value returned by the comparison function ：
function compare(value1, value2) { if (value1 < value2) { return 1; } else if
(value1 > value2) { return -1; } else { return 0; } } arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]
5,reverse()
reverse()： Inverts the order of array items .
var arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13]( Original array changed )
6,concat()
concat() ： Add parameters to the original array . This method creates a copy of the current array first , The received parameters are then added to the end of the copy , Finally, the newly constructed array is returned . I didn't give it to you
concat() Method , It just copies the current array and returns a copy .
var arr = [1,3,5,7]; var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13] console.log(arr); // [1, 3, 5,
7]( The original array has not been modified )
From the above test results, we can find that ： Not an array passed in , Add the parameter directly after the array , If you pass in an array , The items in the array are added to the array . But what if you pass in a two-dimensional array ?
var arrCopy2 = arr.concat([9,[11,13]]); console.log(arrCopy2); //[1, 3, 5, 7,
9, Array[2]] console.log(arrCopy2[5]); //[11, 13]
In the above code ,arrCopy2 The fifth item of an array is an array of two items , in other words concat Method can only add every item in the passed in array to the array , If some items in the passed in array are arrays , Then the array item will also be added to the arrCopy2 in .
7,slice()
slice()： Returns a new array of items from the specified starting subscript to the specified ending subscript in the original array .slice() Method can take one or two arguments , That is to return the start and end positions of the item . In the case of only one parameter ,
slice() Method returns all items from the position specified by the parameter to the end of the current array . If there are two parameters , This method returns the item between the start and end positions , But does not include items at the end position .
var arr = [1,3,5,7,9,11]; var arrCopy = arr.slice(1); var arrCopy2 =
arr.slice(1,4); var arrCopy3 = arr.slice(1,-2); var arrCopy4 =
arr.slice(-4,-1); console.log(arr); //[1, 3, 5, 7, 9, 11]( The original array has not changed )
console.log(arrCopy); //[3, 5, 7, 9, 11] console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7] console.log(arrCopy4); //[5, 7, 9]
arrCopy Only one parameter is set , That is, the initial subscript is 1, So the returned array is subscript 1（ Include Subscripts 1） Start to end of array .
arrCopy2 Two parameters are set , Return to initial subscript （ include 1） Start to end subscript （ barring 4） Subarray of .
arrCopy3 Two parameters are set , The ending subscript is negative , When a negative number appears , Adds a negative number to the value of the length of the array （6） To replace the number at that location , So it's from 1 Start to 4（ barring ） Subarray of .
arrCopy4 Both parameters in are negative , So add the length of the array 6 Convert to positive , So it's equivalent to slice(2,5).
8,splice()
splice()： Very powerful array method , It has many uses , It can be deleted , Insert and replace .
delete ： You can delete any number of items , Just specify 2 Parameters ： The location of the first item to delete and the number of items to delete . for example , splice(0,2) The first two items in the array are deleted .
insert ： You can insert any number of items to a specified location , Just provide 3 Parameters ： Starting position ,
0（ Number of items to delete ） And the item to insert . for example ,splice(2,0,4,6) From the position of the current array 2 Start inserting 4 and 6.
replace ： You can insert any number of items to a specified location , And delete any number of items at the same time , Just specify 3
Parameters ： Starting position , The number of items to delete and any number of items to insert . The number of inserted items does not have to be equal to the number of deleted items . for example ,splice (2,1,4,6) The current array position is deleted 2
Item of , And then from the position 2 Start inserting 4 and 6.
splice() Method always returns an array , The array contains items that were removed from the original array , If no items are deleted , Returns an empty array .
var arr = [1,3,5,7,9,11]; var arrRemoved = arr.splice(0,2); console.log(arr);
//[5, 7, 9, 11] console.log(arrRemoved); //[1, 3] var arrRemoved2 =
arr.splice(2,0,4,6); console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // [] var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11] console.log(arrRemoved3); //[7]
9,indexOf() and lastIndexOf()
indexOf()： Receive two parameters ： Items to find and （ Optional ） An index that represents the location of the start of the lookup . among , From the beginning of the array （ position 0） Start backward search .
lastIndexOf： Receive two parameters ： Items to find and （ Optional ） An index that represents the location of the start of the lookup . among , Look forward from the end of the array .
Both methods return the position of the item to be found in the array , Or return if not found 1. When comparing the first parameter with each item in the array , You can use congruent operators .
var arr = [1,3,5,7,7,5,3,1]; console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5 console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2 console.log(arr.indexOf("5")); //-1
10,forEach()
forEach()： Loop through the array , Runs the given function for each item in the array . This method has no return value . All parameters are function type , The default is to pass parameters , The parameters are ： Traversing array contents ; The corresponding array index , Array itself .
var arr = [1, 2, 3, 4, 5]; arr.forEach(function(x, index, a){ console.log(x +
'|' + index + '|' + (a === arr)); }); The output is ： 1|0|true 2|1|true 3|2|true 4|3|true
5|4|true
11,map()
map()： finger “ mapping ”, Runs the given function for each item in the array , Returns an array of the results of each function call .
The following code uses map Method to square each number in the array .
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.map(function(item){ return
item*item; }); console.log(arr2); //[1, 4, 9, 16, 25]
12,filter()
filter()：“ filter ” function , Each item in the array runs the given function , Returns an array that meets the filtering conditions .
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var arr2 = arr.filter(function(x,
index) { return index % 3 === 0 || x >= 8; }); console.log(arr2); //[1, 4, 7,
8, 9, 10]
13,every()
every()： Determine whether each item in the array meets the condition , Only all items satisfy the condition , Will return true.
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.every(function(x) { return x < 10;
}); console.log(arr2); //true var arr3 = arr.every(function(x) { return x < 3;
}); console.log(arr3); // false
14,some()
some()： Determine whether there are items that meet the conditions in the array , As long as one of the conditions is met , Will return true.
var arr = [1, 2, 3, 4, 5]; var arr2 = arr.some(function(x) { return x < 3; });
console.log(arr2); //true var arr3 = arr.some(function(x) { return x < 1; });
console.log(arr3); // false
15,reduce() and reduceRight()
Both methods iterate through all items of the array , Then build a final return value .reduce() Method starts with the first item of the array , Traverse one by one to the end . and
reduceRight() Start with the last item of the array , Traverse forward to the first item .
Both methods receive two parameters ： The sum of a function called on each term （ Optional ） Initial value as the basis of merging .
Pass on to reduce() and reduceRight() Receiver function 4
Parameters ： Previous value , Current value , Index and array objects for items . Any value returned by this function is automatically passed to the next item as the first argument . The first iteration occurs on the second item of the array , So the first parameter is the first item in the array , The second parameter is the second item of the array .
The following code uses reduce() Realize array summation , The array starts with an initial value 10.
var values = [1,2,3,4,5]; var sum = values.reduceRight(function(prev, cur,
index, array){ return prev + cur; },10); console.log(sum); //25
Technology