JavaScript Array Methods

The power of JavaScript arrays is hidden in array methods.

Convert an array to a string

JavaScript method toString() Convert an array to a string of array values (comma-separated).

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Result

Banana,Orange,Apple,Mango

Try It Yourself

join() The method can also combine all array elements into a single string.

It behaves like toString(), but you can also specify a delimiter:

Example

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Result

Banana * Orange * Apple * Mango

Try It Yourself

Popping and Pushing

It is very simple to delete elements and add new elements when processing arrays.

Popping and Pushing refer to:

From the arrayPoppingItem, or to add to the arrayPushingItem.

Popping

pop() The method removes the last element from the array:

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Remove the last element ("Mango") from fruits

Try It Yourself

pop() The method returns the value that was "popped":

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x's value is "Mango"

Try It Yourself

Pushing

push() The method (at the end of the array) adds a new element to the array:

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       // Add a new element to fruits

Try It Yourself

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

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   // x's value is 5

Try It Yourself

Shifting elements

Shifting is equivalent to popping, but it deals with the first element instead of the last.

shift() The method removes the first array element and shifts all other elements to a lower index.

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Remove the first element "Banana" from fruits

Try It Yourself

shift() 方法返回被“位移出”的字符串：

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
The method returns the string that has been "displaced out":

Try It Yourself

fruits.unshift("Lemon"); // Add a new element "Lemon" to fruits fruits.shift(); // Returns "Banana"

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
method (at the beginning) adds a new element to the array and "reversely displaces" the old elements:

Try It Yourself

fruits.unshift("Lemon"); // Add a new element "Lemon" to fruits unshift()

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
The method returns the length of the new array.

Try It Yourself

fruits.unshift("Lemon"); // Returns 5

change elementsBy using theirindices

to access array elements:arrayindices (subscripts)

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
Starting with 0. [0] is the first array element, [1] is the second, [2] is the third ...

Try It Yourself

fruits[0] = "Kiwi"; // Change the first element of fruits to "Kiwi" length

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
The property provides an easy way to append new elements to the array:

Try It Yourself

fruits[fruits.length] = "Kiwi"; // Append "Kiwi" to fruits

delete elements delete Since JavaScript arrays are objects, their elements can be accessed using JavaScriptoperator to:

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // Change the first element of fruits to undefined

Try It Yourself

Use delete will leave undefined holes in the array. Please use pop() or shift() instead.

Concatenate arrays

splice() This method can be used to add new items to the array:

Example

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

Try It Yourself

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

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

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

splice() The method returns an array containing the deleted items:

Example

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

Try It Yourself

Use splice() to delete elements

With clever parameter settings, you can use splice() Remove elements without leaving 'holes' in the array:

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // Delete the first element from the fruits array

Try It Yourself

The first parameter (0) defines where the new element should be inserted.Add(be inserted).

The second parameter (1) defines the position where it shouldDelete multipleelements.

The remaining parameters are omitted. No new elements will be added.

Merge (connect) arrays

concat() The method creates a new array by merging (connecting) existing arrays:

Example (merging two arrays)

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // Connect myGirls and myBoys

Try It Yourself

concat() The method does not change the existing array. It always returns a new array.

concat() The method can use any number of array parameters:

Example (merging three arrays)

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // Connect arr1, arr2 and arr3 together

Try It Yourself

concat() The method can also take values as parameters:

Example (merging an array with values)

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

Try It Yourself

Trim the array

slice() The method creates a new array using a segment of the array.

In this example, it cuts out a segment of the array starting from array element 1 ("Orange"):

Example

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

Try It Yourself

slice() The method creates a new array. It does not remove any elements from the source array.

In this example, it cuts out a segment of the array starting from array element 3 ("Apple"):

Example

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

Try It Yourself

slice() It can accept two parameters, such as (1, 3).

This method selects elements from the start parameter to the end parameter (excluding).

Example

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

Try It Yourself

If the end parameter is omitted, for example in the first example, then slice() It will cut out the remaining part of the array.

Example

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

Try It Yourself

Automatic toString()

If you need the original value, JavaScript will automatically convert the array to a string. The following two examples will produce the same result:

Example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Try It Yourself

Example

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

Try It Yourself

All JavaScript objects have toString() Methods.

Array Sorting

We will learn about array sorting in the next chapter ~.

Find the Maximum and Minimum Values in an Array

There are no built-in functions in JavaScript arrays to find the highest and lowest values.

You will learn how to solve this problem in the next chapter of this tutorial.

Complete Array Reference Manual

For a complete reference manual, please visit our full JavaScript Array Reference Manual.

This reference manual includes descriptions and examples of all array properties and methods.