Arrays in JS
It is just a set of elements or collection of discrete data elements. Each data in array has index number to identify. Each element in array can contain anything including another array. JavaScript has no any data-type to use with variables. In array each element can be of different data-type. By default array's fist element is know as 0th element.
Creating Array
There are two ways to create an array in JavaScript as
- Using Array Constructor
var quote=new Array(5);
In above example, var means variable and it is used to identify the variable named quote, new keyword is used to allocate the memory dynamically. Array is used for array construction of size 5. We can also fetch the array data at the time of declaration as follows
var quote=new Array(20, 1, 7, 'coxtan', 'college');
In array, if we define the size of array as 5 then we have only 5 spaces to store any data and the same we can request for 5 data. If we request for 6th data then we will face 'undefined' information.
- Using Array Literal
In literal declaration we directly store the values in variable instead of using new and array keywords. We only use square brackets in literal declaration instead of small brackets.
var quote=[550, 5, 'coxtan', 'college'];
In above example, quote variable has 4 values directly stored in quote without having new or array constructors.
var quote=550;
In above example, quote has only one data and it is not array, it is just a simple variable, which has 550 as data.
var quote=['this is string data without array'];
In above example, quote variable has string data. We use single quotes in string.
This example will demonstrate how to access the value using code and display it in alert message and writes on web page:
<html>
<head>
<script language="JavaScript">
function display_quote()
{
var quote= new Array(5)
quote[0]="I like JavaScript.";
quote[1]="I used to like Java.";
quote[2]="JavaScript rules.";
quote[3]="Help! JavaScript Error!";
quote[4]="Just Kidding.";
var x=0;
for (x=0; x<5; x++)
{
alert(quote[x]);
document.write(quote[x]);
document.write('<br>');
}
}
</script>
</head>
<body>
<a href="javascript:display_quote()">Click Here, I dare you!</a>
</body>
</html>
This example will demonstrate how to access the value using prompt box and display it in alert message and writes on web page:
<html>
<head>
<script language="JavaScript">
function display_quote()
{
var quote= new Array(5);
var x=0;
for(x=0; x<5; x++)
{
quote[x] = prompt("Enter value for array ", "Enter here");
}
for (x=0; x<5; x++)
{
alert("1st value = " +quote[x]+ ".");
document.write(quote[x]);
document.write('<br>');
}
}
</script>
</head>
<body>
<a href="javascript:display_quote()">Click Here, I dare you!</a>
</body>
</html>
Multi-Dimensional array has value in the form of matrix. JavaScript doesn't support multi-dimensional array like C and C++ but it support nested array. Nested array is equivalent to multi-dimensional array in some properties but actually it is not multi-dimensional. Nested array has array within any other array.
Using array constructor:
var outer=new Array(3);
outer[0]=new Array(3);
outer[1]=new Array(3);
outer[2]=new Array(3);
Using in literal array
var outer=[ [7, 1, 2], ['a', 'e', 'i'], [5, 4, 3 ] ];
OR
var outer=new Array(3);
outer[0]=[7, 1, 2];
outer[1]=['a', 'e', 'i'];
outer[2]=[5, 4, 3];
Example on multi-dimensional array:
<html>
<head>
<script language="JavaScript">
function display_quote()
{
var quote= new Array(3);
quote[0]=new Array(3);
quote[1]=new Array(3);
quote[2]=new Array(3);
var x=0;
var y=0;
for(x=0; x<3; x++)
{
for(y=0; y<3; y++)
{
quote[x][y] = prompt("Enter value for array ", "Enter here");
}
}
for(x=0; x<3; x++)
{
for(y=0; y<3; y++)
{
alert(quote[x][y]);
}
}
}
</script>
</head>
<body>
<a href="javascript:display_quote()">Click Here, I dare you!</A>
</body>
</html>
Join and Reverse content of Array
Join and Reverse method converts the elements of an array to string and also joins them together into one long string. Join joins the elements in order as written in array from left to right but reverse joins right to left as given in example.
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.join() + "<br />");
document.write(fruits.join("+") + "<br />");
document.write(fruits.join(" and "));
document.write('<br>');
document.write(fruits.reverse());
</script>
</body>
</html>
In above example, a fruit is an array, which has four names; join and reverse method, joins it together.
Sorting in Array
This method sorts the array, which is numerically or alphabetically in ascending or descending order as given in example/
Sorting in ASCII form
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.sort());
</script>
</body>
</html>
Output
Apple,Banana,Mango,Orange
Sorting using function
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b;
}
var n = ["10", "5", "40", "25", "100", "1"];
document.write(n.sort(sortNumber));
</script>
</body>
</html>
Output
1,5,10,25,40,100
Concat Array
This function concatenates another array to the current array. The new array appended at the end as given in example below.
It joins two array
<html>
<body>
<script type="text/javascript">
var parents = ["Jani", "Tove"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(children);
document.write(family);
</script>
</body>
</html>
Output
Jani,Tove,Cecilie,Lone
It joins three array
<html>
<body>
<script type="text/javascript">
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>
</body>
</html>
Output
Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone
Slice and Splice
Slice slices out the selected elements from array. The basic format of slice is
array_name.slice(start_position, number_of_elements_to_select);
Example of Slice
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.slice(0,1) + " (start_from, number_of_element)<br /> ");
document.write(fruits.slice(1) + " (start_from_to_end)<br />");
document.write(fruits.slice(-2) + " (start_from_to_end)<br />");
document.write(fruits.slice(2,-1) + "<br />");
document.write(fruits);
</script>
</body>
</html>
Output
Banana (start_from, number_of_element)
Orange,Apple,Mango (start_from_to_end)
Apple,Mango (start_from_to_end)
Apple
Banana,Orange,Apple,Mango
Splice inserts element in array at the specified location as well as delete the element from array. The basic format of splice is
array_name.splice(start_position, number_of_elements_to_be_deleted, insert_location_as_to_start_position);
Example on Splice
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write("Removed: " + fruits.splice(2,0,"Lemon") + "<br />");
document.write(fruits);
</script>
</body>
</html>
Output
Removed:
Banana,Orange,Lemon,Apple,Mango
Push
It just inserts the element at the end of array as given in example below.
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.push("Kiwi") + "<br />");
document.write(fruits.push("Lemon","Pineapple") + "<br />");
document.write(fruits);
</script>
</body>
</html>
Output
5
7
Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple
Pop
It just deletes the element from end of the array as given in example below.
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.pop() + "<br />");
document.write(fruits + "<br />");
document.write(fruits.pop() + "<br />");
document.write(fruits);
</script>
</body>
</html>
Output
Mango
Banana,Orange,Apple
Apple
Banana,Orange
Reverse
It reverses the elements of any array as given in example below.
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "
document.write(fruits.reverse());
</script>
</body>
</html>
Output
Mango,Apple,
Shift
It removes the first element of the array as given in example below.
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.shift() + "<br />");
document.write(fruits + "<br />");
document.write(fruits.shift() + "<br />");
document.write(fruits);
</script>
</body>
</html>
Output
Banana
Orange,Apple,Mango
Orange
Apple,Mango
HAVE A HAPPY CODING!
great
ReplyDelete