1. ARRAY:
• An array is a special variable, which can hold
more than one value at a time.
Or
• JavaScript arrays are used to store multiple
values in a single variable.
• There are two ways to work on arrays.
1> var arr=[];
2> var arr= new Array();
2. 1. Eg:
<script>
var cars = ["Saab", "Volvo", "BMW"];
for(a=0; a<cars.length; a++)
document.write(cars[a]+"<br>");
</script>
2. Eg:
<p id="demo"></p>
<script>
var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars[0];
</script>
Note:
An array can hold many values under a single name, and you can
access the values by referring to an index number.
Index no: always start from zero.
• It is the easiest way to create a JavaScript Array.
3. Forin loop
It is a loop for retrieving an array.
It Returns always only keys/index nos.
It is specially use for associative array.
Syntax:
for (variable in array) {... }
Eg:
var a=[1,2,3];
for(key in a ){
d.w(a[key]);
}
5. valueOf()
The valueOf() method is the default behavior for
an array. It returns an array as a string:
Eg:
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple",
"Mango"];
document.getElementById("demo").innerHTML
= fruits.valueOf();
</script>
Note: toString() and valueOf()
6. Join()
• The join() method also joins all array elements
into a string.
• It behaves just like toString(), but you can specify
the separator:
Eg:
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple",
"Mango"];
document.getElementById("demo").innerHTML =
fruits.join(" * ");
</script>
7. pop()
The pop() method removes the last element from an array:
Eg:
<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.pop()
document.getElementById("demo").innerHTML = fruits;
}
</script>
8. push()
The push() method adds a new element to an array (at the
end):
Eg:
<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("Kiwi")
document.getElementById("demo").innerHTML = fruits;
}
</script>
9. shift()
The shift() method removes the first element of an array.
Eg:
<body>
<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.shift();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
10. unshift()
The unshift() method adds a new element to an array (at the
beginning).
Eg:
<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.unshift("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
11. splice()
The splice() method can be used to add new items to an array:
Eg:
<body>
<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, 0, "Lemon", "Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
12. • 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.
13. It can also remove with splice()
<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>
14. sort()
• The sort() method sorts an array alphabetically.
Eg:
<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.sort();
document.getElementById("demo").innerHTML =
fruits;
}
</script>
</body>
15. reverse() method
It is used to sort an array in descending order:
Eg:
<body>
<p>The sort() method sorts an array alphabetically.</p>
<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.sort();
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
16. slice()
The slice() method slices out a piece of an array.
Eg:
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var fruits = ["Banana", "Orange", "Lemon", "Apple",
"Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = citrus;
}
</script>
</body>