|
|
|
|
|
|
|
Author Rank :
|
|
|
Page Views :
|
1106
|
|
Downloads :
|
0
|
|
Rating :
|
Rate it
|
|
Level :
|
Beginner
|
|
|
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
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", "Orange", "Apple", "Mango"];
document.write(fruits.reverse());
</script>
</body>
</html>
Output
Mango,Apple,Orange,Banana
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!
|
|
Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post
Here.
|
|
|
|
|
Login
to add your contents and source code to this article
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional
consulting company, our consultants are well-known experts in .NET and many of them
are MVPs, authors, and trainers. We specialize in Microsoft .NET development and
utilize Agile Development and Extreme Programming practices to provide fast pace
quick turnaround results. Our software development model is a mix of Agile Development,
traditional SDLC, and Waterfall models.
|
|
Click here to learn more about C# Consulting. |
|
|
|
|
|
|
|
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon.
Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees.
As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
|
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
|
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
|
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
|
|
|
|
|
|
|
|
|
|
|
|
|