Detailed Explanation of JS Array Method

  • 2021-12-09 08:04:08
  • OfStack

Directory 1. Original Array will be modified 1. push (): 2. pop (): 3. shift (): 4. unshift (): 5. splice (): 6. sort (): 7. reverse (): 2. Original Array will not be modified 1. toString (): 2. join (): 3. concat (): 4. slice (): 5. map (): 6. forEach (): 7. filter (): 8. every (): 9. some (): 10. reduce (): Summary

1. The original array will be modified

1. push ():

Add 1 new element to the array (at the end of the array)

The push () method returns the length of the new array


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  

2.pop():

Method deletes the last 1 element from the array

It can receive the return value of pop (), which is the pop-up value "Mango"


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  

3. shift ():

Delete the first array element

You can receive deleted values


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

4. unshift ():

Add a new element to the array (at the beginning)

Returns the length of the new array.


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

5. splice ():

Used to add a new item to an array

The first parameter (2) defines where the new element should be added (splicing).

The second parameter (0) defines how many elements should be deleted.

The remaining parameters ("Lemon", "Kiwi") define the new element to be added.

The splice () method returns an array containing deleted items

You can also set parameters to delete elements in an array


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
//["Banana","Orange","Lemon","Kiwi","Apple","Mango"]
 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
//["Orange", "Apple", "Mango"]

6. sort ():

Sort arrays alphabetically

If you are sorting numbers, you need to pay attention. "25" is greater than "100" because "2" is greater than "1". We correct this problem by a ratio function.

sort () can also sort an array of objects by modifying the comparison function


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); 
 var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});// Ascending order 
points.sort(function(a, b){return b - a});// Descending order 
points.sort((a, b)=>{return b - a});// Arrow function 
 var cars = [
    {type:"Volvo", year:2016},
    {type:"Saab", year:2001},
    {type:"BMW", year:2010}
]
cars.sort(function(a, b){return a.year - b.year});// Comparative years (figures) 
cars.sort(function(a, b){// Compare type (string) 
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

7. reverse ():

Invert the elements in an array


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();  

2. Do not modify the original array

1. toString ():

Converts an array to a comma-separated string of array values.


var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.toString())
//Banana,Orange,Apple,Mango

2.join():

You can combine all array elements into one string.

It behaves like toString (), but it can also specify separators


var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.join(" * "))
//Banana * Orange * Apple * Mango

3.concat():

Create a new array by merging (concatenating) existing arrays. You can connect multiple


var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   //  Connect  myGirls  And  myBoys
 var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   //  Will arr1 , arr2  And  arr3  Connect to 1 Rise 

4. slice ():

Method cuts out a new array with a fragment of the array.


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  
0

5. map ():

Calls 1 supplied function for each element in the array and returns the result as a new array without changing the original array


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  
1

6. forEach ():

Each element in the array executes the provided function without returning a value. Note that it is different from map method


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  
2

7. filter ():

This method is to judge all the elements and return the elements that meet the conditions as a new array. What is written in the function is condition! ! !


let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(value => value >= 3 )
// Or 
let newArr = arr.filter(function(value) {return value >= 3} )
console.log(newArr)
//[3,4,5]

8.every():

This method returns 1 Boolean value by judging all elements. If all elements meet the judgment conditions, it returns true, otherwise it is false


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  
4

9.some():

This method returns 1 Boolean value by judging all elements. If there are elements that meet the judging conditions, true is returned. If all elements do not meet the judging conditions, false is returned


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  
5

10.reduce():

This method is a return function for all element calls, and the return value is the last result. The passed-in value must be of function type


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  
6

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!


Related articles: