Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
|
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()
|
| The methods are listed in the order they appear in this tutorial page |
JavaScript Array length
The length feature tells you how many items are in an array.
JavaScript Array toString()
The JavaScript function toString() changes an array into a string with its values separated by commas.
JavaScript Array join()
The join() method combines all the items in an array into a single string.
It works similarly to the toString() method, but it also lets you choose a separator.
Popping and Pushing
When you use arrays, it's simple to delete or insert new elements.
This is what popping and pushing is:
Removing things from a list, or adding things to a list.
JavaScript Array pop()
The pop() method takes away the final item in an array.
The pop() function gives back the value that was removed.
JavaScript Array push()
The push() function is used to put a new thing at the end of a list or collection.
The push() function provides the length of the updated array:
Shifting Elements
Shifting is like popping, but it deals with the first item, not the last.
JavaScript Array shift()
The shift() function takes out the very first item in an array and moves all the rest of the items to positions with lower index values.
The shift() function gives you the value that was removed from the beginning.
JavaScript Array unshift()
The unshift() method inserts a new element at the start of an array and moves existing elements to make room for it.
The unshift() function gives you the length of the updated array.
Changing Elements
You can get to the items in an array by using their unique index numbers.
Array indexes start with 0:
[0] is the first array element
[1] is the second
[2] is the third ...
JavaScript Array length
The length property is a simple way to add a new item to an array.
JavaScript Array delete()
Warning !
JavaScript lets you remove elements from an array using the delete operator.
When you use the delete keyword, it creates undefined gaps in the array.
Use pop() or shift() instead.
Merging (Concatenating) Arrays
The concat() function makes a fresh array by joining together or combining already existing arrays.
The concat() method leaves existing arrays unchanged. It always returns a new array.
The concat() method can combine multiple arrays, and you can give it as many arrays as you want.
The concat() method can combine strings together as input.
Flattening an Array
Flattening an array means making it simpler by reducing its layers or dimensions.
The flat() function makes a fresh array by joining elements from sub-arrays together to a certain level.
Splicing and Slicing Arrays
The splice() function inserts fresh elements into an array.
The slice() method takes a part from an array.
JavaScript Array splice()
You can use the splice() method to put new things into an array.
The number "2" is the first part of the instruction, indicating where you want to insert new elements (add them) into a list or sequence.
The number 0 in the second parameter tells us how many items should be taken away.
The remaining settings, "Lemon" and "Kiwi," specify the new elements that should be included as additions.
The splice() function gives you back an array containing the items that were removed.
Using splice() to Remove Elements
You can use the splice() function with specific settings to delete items from an array without creating empty spaces in it.
The number "0" in the first parameter tells us where to insert new items (like putting them in a specific place). We call this "adding" the new items.
The number 1 in the second parameter tells us how many things we need to take out.
The rest of the parameters are omitted. No new elements will be added.
JavaScript Array slice()
The slice() method cuts a portion from an array and puts it into a new array.
Note :
The slice() method forms a new array.
The slice() method keeps the original array unchanged.
This example takes a piece of a list, starting from the third item, which is "Apple."
You can use the slice() method with two values, just like this: slice(1, 3).
The method chooses elements starting from the position given by the start argument and goes up to, but doesn't include, the position given by the end argument.
If you don't provide the 'end' value, as shown in the initial examples, the slice() method will cut out the remaining part of the array.
Automatic toString()
In JavaScript, when you need a basic value, an array turns into a list of values separated by commas.
When you attempt to display an array, this situation typically arises.
These two examples will produce the same result:
Note :
All JavaScript objects have a toString() method.
Finding Max and Min Values in an Array
JavaScript arrays do not have ready-made functions to discover their maximum or minimum values.
In the upcoming chapter of this tutorial, you'll discover the solution to this issue.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property returns the length of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>
<p>The toString() method changes an array into a string with commas between each element.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>
<p>The join() method joins array elements into a string.</p>
<p>In this example, we've used "*" to separate the elements:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>
<p>The pop() method removes the last element from an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>
<p>The pop() method returns the value that was "popped out":</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>
<p>The push() method appends a new element to an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>
<p>The push() method returns the new array length:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() function takes out the initial item from a list (and moves the rest of the items to the left).</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The unshift() Method</h2>
<p>The unshift() method adds new elements to the beginning of an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The unshift() Method</h2>
<p>The unshift() method returns the length of the new array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>Array elements are accessed using their index number:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property helps add new things to a list without needing the push() method.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>
<p>Deleting elements leaves undefined holes in an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "The first fruit is: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML = "The first fruit is: " + fruits[0];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>
<p>The concat() method merges (concatenates) arrays:</p>
<p id="demo"></p>
<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>
<p>The concat() method merges (concatenates) arrays:</p>
<p id="demo"></p>
<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];
const myChildren = array1.concat(array2, array3);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>
<p>The concat() method can merge string values to arrays:</p>
<p id="demo"></p>
<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter");
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>
<p id="demo"></p>
<script>
const myArr = [
[1, 2],
[3, 4],
[5, 6]
];
const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>
<p>The splice() method adds new elements to an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>
<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array: <br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array: <br> " + fruits;
document.getElementById("demo3").innerHTML = "Removed Items: <br> " + removed;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>
<p>The splice() methods can be used to remove array elements:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + " <br> <br> " + citrus;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 3 ("Apple")</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + " <br> <br> " + citrus;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>When you use the slice() method with two values, it picks out elements from an array starting from the first value and ending just before the second value.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
document.getElementById("demo").innerHTML = fruits + " <br> <br> " + citrus;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + " <br> <br> " + citrus;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>When you need a single value, JavaScript changes a list of items into a string with commas between them.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery