Scribd
Upload
2 views

Unit_12

The document provides an overview of various JavaScript array methods, including toString(), join(), push(), pop(), shift(), unshift(), concat(), reverse(), toSource(), splice(), and slice(). Each method is described with its syntax and examples demonstrating its functionality. It also mentions how to delete elements from an array and the behavior of the splice method for adding and removing elements.

Uploaded by

Punit Pandey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Unit_12

The document provides an overview of various JavaScript array methods, including toString(), join(), push(), pop(), shift(), unshift(), concat(), reverse(), toSource(), splice(), and slice(). Each method is described with its syntax and examples demonstrating its functionality. It also mentions how to delete elements from an array and the behavior of the splice method for adding and removing elements.

Uploaded by

Punit Pandey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

JavaScript (JS)

BLOCK – 12
JavaScript – Array Methods
Here is a list of the methods of the Array object along with their description.
Array toString() Method
Javascript array toString() method returns a string representing the source code of the
specified array and its elements.
Syntax
array.toString();
Try the following example.
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>toString()</h2>
<p>The toString() method returns an array as a comma separated
string:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>

<html>
<head>
<title>JavaScript Array toString Method</title></head>
<body>
<script type="text/javascript">
var fruits = new Array("orange", "mango", "banana", "sugar");
var str = fruits.toString();
document.write("Returned string is : " + str );
</script>
</body>
</html>
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 1
JavaScript (JS)
Array join() Method
Javascript array join() method joins all the elements of an array into a string.
Syntax
array.join(separator);
Parameter Details
separator − Specifies a string to separate each element of the array. If omitted, the
array elements are separated with a comma.
Try the following example.
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>join()</h2>
<p>It this example we have used " * " as a separator between the
elements:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
//document.write(fruits);
document.getElementById("demo2").innerHTML = fruits.join(", ");
document.getElementById("demo3").innerHTML = fruits.join(" + ");
document.getElementById("demo4").innerHTML = fruits.join(" * ");
</script>
</body></html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 2
JavaScript (JS)
Array push() Method
Javascript array push() method appends the given element(s) in the last of the array
and returns the length of the new array.

Syntax
array.push(element1, ..., elementN);
Parameter Details
element1, ..., elementN: The elements to add to the end of the array.
Try the following example:
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>Push()</h2>
<script type="text/javascript">
var numbers = new Array(1, 4, 9);
var length = numbers.push(10);
document.write("new numbers is : " + numbers );
length = numbers.push(20);
document.write("<br />new numbers is : " + numbers );
</script>
</body></html>

<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>push()</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Grapes");
document.getElementById("demo").innerHTML = fruits;
}
</script></body></html>
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 3
JavaScript (JS)
Array pop() Method
Javascript array pop() method removes the last element from an array and returns that
removed element from the array.

Syntax
array.pop();
Try the following example:
<html><head>
<title>Array Methods</title></head>
<body>
<h2>pop()</h2>
<p id="demo1"></p>
<button onclick="myFunction()">Try it</button>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
}
</script></body></html>

<html><head>
<title>Array Methods</title></head>
<body>
<h2>pop()</h2>
<p id="demo1"></p>
<button onclick="myFunction()">Try it</button>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
var data=fruits.pop();
document.getElementById("demo2").innerHTML = data;}
</script></body></html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 4
JavaScript (JS)
Array shift() Method
Javascript array shift()method removes the first element from an array and returns
that element. Shifting is equivalent to popping, working on the first element instead of
the last.
Syntax
array.shift();
Try the following example.
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>shift()</h2>
<p id="demo1"></p>
<button onclick="myFunction()">Try it</button>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
}
</script>
</body>
</html>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
var data = fruits.shift();
document.getElementById("demo2").innerHTML = data;
}
</script>
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 5
JavaScript (JS)
Array unshift() Method
Javascript array unshift() method adds one or more elements to the beginning of an array
and returns the new length of the array.
Syntax
array.unshift( element1, ..., elementN );
Parameter Details
element1, ..., elementN − The elements to add to the front of the array.
Try the following example.
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>unshift()</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<button onclick="myFunction()">Try it</button>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.length;
function myFunction() {
fruits.unshift("Grapes");
document.getElementById("demo3").innerHTML = fruits;
document.getElementById("demo4").innerHTML = fruits.length;
}
</script>
</body>
</html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 6
JavaScript (JS)
Array concat() Method
Javascript array concat() method returns a new array comprised of this array joined
with two or more arrays.
Syntax
array.concat(value1, value2, ..., valueN);
Try the following example:
<html>
<head>
<title>Array Methods</title></head>
<body>
<script type="text/javascript">
var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric);
document.write("alphaNumeric : " + alphaNumeric );
</script>
</body>
</html>

<html>
<head>
<title>Array Methods</title></head>
<body>

<script type="text/javascript">
var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];
var name = ["Mohan", "Vikash"];
var alphaNumericName = alpha.concat(numeric,name);
document.write("alphaNumeric : " + alphaNumericName );
</script>

</body>
</html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 7
JavaScript (JS)
Array reverse() Method
Javascript array reverse() method reverses the element of an array. The first array
element becomes the last and the last becomes the first.
Syntax
array.reverse();
Try the following example:
<html>
<head>
<title>Array Methods</title></head>
<body>

<script type="text/javascript">
var num = [0, 1, 2, 3].reverse();
var alpha = ["a", "b", "c"];
var stname = ["Mohan", "Vikash"];
document.write("Reversed array is : " + num );
document.write("<br>Reversed array is : " + alpha.reverse() );
document.write("<br>Reversed array is : " + stname.reverse() );
</script>

</body>
</html>

<html>
<head>
<title>Array Methods</title></head>
<body>

<script type="text/javascript">
var num = [1, 2, 3].reverse();
var alpha = ["a", "b", "c"].reverse();
var stname = ["Mohan", "Vikash"].reverse();
document.write("Reversed array is : " + num.join("") );
document.write("<br>Reversed array is : " + alpha.join(" ") );
document.write("<br>Reversed array is : " + stname.join(" ") );
</script>

</body>
</html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 8
JavaScript (JS)
Array toSource() Method
Javascript array toSource() method returns a string representing the source code of the
array. This method is supported by Mozilla.
Syntax
Its syntax is as follows −
array.toSource();
Try the following example:
<html>
<head>
<title>Array Methods</title></head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var str = arr.toSource();
document.write("Returned string is : " + str );
</script>
</body>
</html>

Deleting Elements
Since JavaScript arrays are objects, elements can be deleted by using the JavaScript
operator delete:
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>JavaScript Array Methods</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var 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>
Output:
The first fruit is: Banana
The first fruit is: undefined

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 9
JavaScript (JS)
Array splice() Method
Javascript array splice() method changes the content of an array, adding new elements
while removing old elements.
Syntax
array.splice(index, howMany, [element1][, ..., elementN]);
Parameter Details
 index − Index at which to start changing the array.
 howMany − An integer indicating the number of old array elements to remove.
If howMany is 0, no elements are removed.
 element1, ..., elementN − The elements to add to the array. If you don't specify
any elements, splice simply removes the elements from the array.
Try the following example:
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>splice()</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.splice(2, 1, "Lemon", "Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

 The first parameter (2) defines the position where new elements should be added
(spliced in).
 The second parameter (0) defines how many elements should be removed.
 The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 10
JavaScript (JS)
Using splice() to Remove Elements
With clever parameter setting, you can use splice() to remove elements without leaving
"holes" in the array:
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>splice()</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.splice(0, 1);
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Example:
<html>
<head>
<title>Array Methods</title></head>
<body>
<script type="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
var removed = arr.splice(2, 0, "water");
document.write("After adding 1: " + arr );
document.write("<br />removed is: " + removed);
removed = arr.splice(3, 1);
document.write("<br />After adding 1: " + arr );
document.write("<br />removed is: " + removed);
</script>
</body>
</html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 11
JavaScript (JS)
Slicing an Array
The slice() method slices out a piece of an array into a new array. This example slices
out a part of an array starting from array element 1 ("Orange"):
<html>
<head>
<title>Array Methods</title></head>
<body>
<h2>slice()</h2>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>

Note: The slice() method creates a new array. It does not remove any elements from the
source array.
This example slices out a part of an array starting from array element 3:
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 12

You might also like