Common prototype methods of JS array

Array prototype methods mainly include the following ：

• join()
• push() and pop()
• shift() and unshift()
• sort()
• reverse()
• concat()
• slice()
• splice()
• indexOf() and lastIndexOf() 
• forEach()
• map() 
• filter() 
• every() 
• some() 

The basic functions of each method are described in detail below .

1、join()

Group elements of an array into a string , With separator Separator , If omitted, comma is used as separator by default , This method accepts only one parameter ： Delimiter

var arr = [1,2,3,4,5];
console.log(arr.join(",")); // 1,2,3,4,5

2、push() and pop()

push(): Can receive any number of parameters , Add them to the end of the array one by one , And return the length of the modified array . 
pop()： Remove last entry at end of array , Reduce the length value , Then return the removed item .

var arr = [" Zhang San "," Li Si "];
arr.push(" Wang Wu "," Zhao Liu ");
console.log(arr); // [" Zhang San ", " Li Si ", " Wang Wu ", " Zhao Liu "]

var item = arr.pop();
console.log(item); //  Zhao Liu 
console.log(arr); // [" Zhang San ", " Li Si ", " Wang Wu "]

3、unshift() and shift()

unshift(): Add parameters to the beginning of the original array , And returns the length of the array .

shift()： Delete the first item of the original array , And returns the value of the deleted element ; Returns if the array is empty undefined . 

var arr = [" Zhang San "," Li Si "," Wang Wu "];
arr.unshift(" Zhao Liu ");
console.log(arr); // [" Zhang San ", " Li Si ", " Wang Wu ", " Zhao Liu "]
 
var item = arr.shift();
console.log(item); //  Zhao Liu 
console.log(arr); // [" Zhang San ", " Li Si ", " Wang Wu "]

This set of methods is the same as the above push() and pop() The method exactly corresponds to , One is the beginning of the operation array , One is the end of the operation array . 

4、sort()

sort()： Array items in ascending order —— That is, the smallest value is at the front , The largest value is at the bottom .

var arr = [2, 45, 11, 36, 29];
console.log(arr.sort()); // [2, 11, 29, 36, 45]

5、reverse()

reverse()： Reverse the order of array items .

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]

6、concat()

concat() ： Add parameters to the original array . This method will first create a copy of the current array , Then add the received parameters to the end of this copy , Finally, return the newly constructed array .

var arr1 = [1, 3, 5, 7];
var arr2 = [2, 4, 6, 8];
console.log(arr1.concat(arr2); //[1, 3, 5, 7, 2, 3, 6 ,8]

7、slice()

slice()： Returns a new array of items from the specified start subscript to the end subscript in the original array .slice() Methods can take one or two arguments , That is, to return the start and end positions of the item . With only one parameter , slice() Method returns all items from the position specified by the parameter to the end of the current array . If you have two parameters , This method returns the item between the start and end positions —— But it doesn't include the end position .

var arr = [1,3,5,7,9,11];
var arrRes1 = arr.slice(1);
var arrRes2 = arr.slice(1,4);
var arrRes3 = arr.slice(1,-2);
var arrRes4 = arr.slice(-4,-1);
console.log(arrRes1);  // [3, 5, 7, 9, 11]
console.log(arrRes2);  // [3, 5, 7]
console.log(arrRes3);  // [3, 5, 7]
console.log(arrRes4);  // [5, 7, 9]

8、splice()

splice()： Very powerful array method , It has many uses , 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 .
• Insert ： You can insert any number of items... Into a specified location , Just provide 3 Parameters ： The starting position 、 0（ Number of items to delete ） And the item to insert .
• Replace ： You can insert any number of items... Into a specified location , And delete any number of items at the same time , Just specify 3 Parameters ： The starting position 、 The number of items to delete and any number of items to insert . You don't have to insert as many items as you delete .

splice() Method always returns an array , The array contains items that were removed from the original array , If nothing is deleted , Then return an empty array .

var arr = [1,3,5,7,9,11];
var arrRes1 = arr.splice(0,2);
console.log(arr);         // [5, 7, 9, 11]
console.log(arrRes1);     // [1, 3]

var arrRes2 = arr.splice(2,0,4,6);
console.log(arr);         // [5, 7, 4, 6, 9, 11]
console.log(arrRes2);     // []

var arrRes3 = arr.splice(1,1,2,4);
console.log(arr);         // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRes3);     // [7]

9、indexOf() and lastIndexOf()

indexOf()： Receive two parameters ： The items to find and （ Optional ） Index indicating the location of the search start point . among , From the beginning of the array （ Location 0） Start looking backwards . 
lastIndexOf： Receive two parameters ： The items to find and （ Optional ） Index indicating the location of the search start point . among , Start at the end of the array and look forward .

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

Both methods return the position of the item to be found in the array , Or return if you can't find it -1. When comparing the first parameter with each item in the array , Will use congruent operators . 

10、forEach()

forEach()： Loop through the array , Run the given function for each item in the array . This method does not return a value . Parameters are function type , By default, there are parameters , The parameters are ： Traversing the contents of the array ; The corresponding array index , The array itself .

var arr = [1, 2, 3, 4, 5];

arr.forEach(function(i, index){

    console.log(i + '|' + index);

});

//  Output is ：

// 1|0

// 2|1

// 3|2

// 4|3

// 5|4

11、map()

map()： finger “ mapping ”, Run 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 arrRes = arr.map(function(item){
    return item*item;
});
console.log(arrRes ); //[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 filter conditions .

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arrRes = arr.filter(function(i, index) {
    return index % 3 === 0 || i >= 8;
});
console.log(arrRes ); //[1, 4, 7, 8, 9, 10]

13、every()

every()： Determine whether each item in the array satisfies the condition , Only all terms meet the condition , Will return true.

var arr = [1, 2, 3, 4, 5];
var arrRes1 = arr.every(function(i) {
    return i < 10;
});
console.log(arrRes1); // true

var arrRes2 = arr.every(function(i) {
    return i < 3;
});
console.log(arrRes2); // false

14、some()

some()： Determine whether there are items in the array that meet the conditions , As long as one of the conditions is met , It will return true.

var arr = [1, 2, 3, 4, 5];
var arrRes1 = arr.some(function(i) {
    return i < 3;
});
console.log(arrRes1); // true

var arrRes2 = arr.some(function(i) {
    return i < 1;
});
console.log(arrRes2); // false