JavaScript Array Methods

JavaScript has many built-in methods that are useful for handling arrays.

Methods that modify the original array are calledmutator (modifier) methods.

returning new values or representations ofmethodsknown asaccessor (Accessors) method.

Convert array to string

toString()Array methods convert the array to a (comma-separated) string of array values.

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();

join()Array methods can also convert all elements of an array to a new string.

The behavior of this method is similar totoString()However, you can also specify a delimiter for the join method.

var fruits = ["Banana", "Apple", "Mango"];
fruits.join("　+　);　　　//　Banana　+　Apple　+　Mango
fruits.join("　/　);　　　//　Banana　/　Apple　/　Mango
fruits.join("　©　");　　//　Banana © Apple © Mango

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

push() method - Add array elements

push()Array methods add one or more new elements to the end of the array.

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

push()The method returns the new array length.

The following code appends three elements to the array. The total variable contains the new length of the array:

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.push("Strawberry", "Lychee", "Guava");

unshift()Array methods add one or more new elements to the beginning of the array.

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

Thisunshift()The function's purpose is: to return the new array length.

The following code adds three elements to the array. The total variable contains the new length of the array:

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.unshift("Strawberry", "Lychee", "Guava");

pop() method - Remove array elements

pop()The function's purpose is to: remove the last element from the end of the array.

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

pop()The method returns the value that has been "popped out":

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

shift()Array methods remove the first element from the array.

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

shift()The method returns the element that has been "shifted out":

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

splice() method - Add and modify the array

splice()The method changes the array by removing existing elements and (or) adding new elements.

var months = ['Jan', 'Mar', 'Apr', 'Jun'];
months.splice(1, 0, &39;Feb');//　adding &39;Feb' at index　1

The first parameter (1) defines the position where new elements should be added (concatenated).

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

The third parameter ('Feb') to define the new elements to be added.

In the following example, we will replace at the4Replace at index1elements:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(4,　1, &39;May');　　　//　replace &39;Jun' with &39;May' at index　4

In the following example, we will delete from the index value3at index1elements:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(3,　1);

In the following example, we will delete from the index value2Start deleting2elements:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(2,　2);

splice()The method returns an array containing the removed elements:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
var arr = months.splice(2,　2);

Notesplice()Do not confuse withslice()Array accessor confusion, the latter is an accessor array that copies a portion of the array.

Modify array elements

By using the assignment operator, we can overwrite any value in the array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

concat() method - Array Concatenation

concat()Array methods are used to merge two or more arrays into a new array.

In the following example, we will create two arrays and combine them into a new array:

var fruits = ["Apple", "Mango", "Banana"];
var numbers = [5,　10,　12,　98,　3];
var arr = fruits.concat(numbers);

concat()The method can use multiple parameters, and you can effectively use a single method to concatenate multiple arrays together.

var num1　= [1,　2,　3];
var num2　= [4,　5,　6];
var num3　= [7,　8,　9];
var nums = num1.concat(num2num3);

slice() method - Array slicing

slice()The array method copies a part of the array to a new array.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
var　extract　=　fruits.slice(1,　3);//　return　Mango,　Apple

The first parameter (1) defines the start position of the extraction.

The second parameter (3) defines the end position of the extraction.

If the second parameter is omitted, then theslice()The method will cut out the rest of the array.

In the following example, we will extract elements without using the second parameter:

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
var　extract　=　fruits.slice(1);//　return　Mango,　Apple,　Orange

In the following example, we will use negative values to extract array elements:

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
var　extract　=　fruits.slice(-3,　-1);//　return　Mango,　Apple

Finding elements in an array

indexOf()The array method returns the first index of the given element that can be found in the array.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Apple');//　returns　2

Note:The index of the first element is 0, the index of the second element is1, and so on.

If the given parameter is a value that does not exist in the array, it will return-1.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Beer');//　returns　-1

lastIndexOf()The array method returns the last index of the given element in the array.

We can test the same example as indexOf(), which contains two 'Apple'.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Apple');//　returns　4

Note:lastIndexOf()It will start searching from the end of the array and return the first index it finds.

If the given parameter is a value that does not exist in the array, it will return-1.

var　fruits　=　['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Beer');//　returns　-1

fill() method

fill()The array method replaces all elements in the array with a static value.

var nums = [1,　2,　3,　4];
nums.fill(17);

All four elements in the array have been replaced with the same value17.

fill()also accepts optional parameters for the start and end points.

from position2to position4Fill 0 (excluding4):

var nums = [1,　2,　3,　4];
nums.fill(0,　2,　4);

Usingfill()One or more elements in the array can be replaced with static values.

Array sorting and array reversal

reverse()The array method can reverse the order of elements in the array.

var nums = [10,　20,　30,　40,　50];
nums.reverse();

Usingreverse()After that, the last element will be the first, and the first element will be the last.

sort()The array method sorts the elements in the array based on the first character of each element. In the case where the first character is the same, it will continue to the next line and compare the second character, and so on.

By default,sort()All uppercase or lowercase string arrays will be sorted in alphabetical order.

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();

Due tosort()Based on the first unicode character, it will sort uppercase elements first, and then lowercase ones.

Let's modify the original array so that one of our strings starts with a lowercase letter.

var months = ['March', 'Jan', 'Feb', 'dec'];
months.sort();

You can usesort()method sorts numbers.

var nums = [5,　1,　2,　7,　3,　6,　4];
nums.sort();

sort()Does not sort the number array by size. Instead, it only checks the first character in the number.

var nums = [5,　1,　2,　17,　13,　6,　34];
nums.sort();

To sort numbers correctly, you can create a comparison function as a parameter.

var nums = [5,　1,　2,　17,　13,　6,　34];
nums.sort(function(a, b) {return a　-　b});

If you need to sort numbers repeatedly, you can create a separate function.

var nums = [5,　1,　2,　17,　13,　6,　34];
nums.sort(sortNumerically);
//　Function to sort numbers by size
var sortNumerically = (a, b) => {
　　return a　-　b;
}

Complete Array Reference

For a complete reference to properties and methods, please visit ourJavaScript Array Reference Manual.

The reference section includes descriptions and examples of all array properties and methods.