17. JavaScript Array Object

Javascript Array Object

What is an Array?
Create an Array
Access an Array
Modify Values in an Array
Examples

The array object is used to store multiple values in a single variable.

What is an Array?

An array is a special variable that can hold more than one value at a time.
Each element in the array has it's own ID so that it can be easily accessed

Create an Array

An array can be defined in three ways.

1.
var myCars=new Array();
//create a new array with no elements
//new Array(n); will create a new array of length n
myCars[0]="saab";
myCars[1]="volvo";
myCars[2]="BMW";

2.
var myCars=new Array("saab","volvo","BMW");
//create a new array with the specified elements

3.
var myCars=["saab","volva","BMW"];
//2 and 3 are functionally equivalent

Access an Array

you can refer to a perticular element in an array by reffering to the name of the array and the index number.
the index number starts at 0.

document.write(myCars[0]);

output: saab

Modufy values in an array

to modify a value in an array, just specify a new value for the element at the given index.

myCars[0]="opel" //overwrite the current value of mycars[0]
document.write(myCars[0]);

output: opel

Examples
how to create an array, assign values to it, and write the values to output.

<html>
<body>
<script type="text/javascript">
var myCars = new Array();
myCars[0] = "saab";
myCars[1] = "volvo";
myCars[2] = "BMW";

for(i=0;i<myCars.length;i++)
{
document.write(myCars[i]+"<br/>");
}
</script>
</body>
</html>

how to use a for...in statement to loop through the elements of an array.

<html>
<body>
<script type="text/javascript">
var x;
var mycars=new Array();
mycars[0]="saab";
mycars[1]="volvo";
mycars[2]="BMW";
for(x in mycars)
{
document.write(mycars[x]+"<br/>");
}
</script>
</body>
</html>

how to join two arrays

<html>
<body>
<script type="text/javascript">
var parants=["jani","tove"];
var children=["cecilie","lone"];
var family=parants.concat(childrenn);
document.write(family);
</script>
</body>
</html>

how to join three arrays

<html>
<body>
<script type="text/javascript">
var parants=["jani","tove"];
var children=["cecilie","lone"];
var brothers=["stale","kai jim","borge"];
var family=parents.concat(brothers,children);
</script>
</body>
</html>

how to join all elements of an array into a string

<html>
<body>
<script type="text/javascript">
var fruites=["Banana","orange","apple","mango"];
document.write(fruits.join()+"<br/>");
document.write(fruite.join("+")+"<br/>");
document.write(fruite.join("and"));
</script>
</body>
</html>

how to remove the last element of an array

<html>
<body>
<script type="text/javascript">
var fruites=["Banana","orange","apple","mango"];
document.write(fruits.pop()+"<br/>");
document.write(fruits+"<br/>");
document.write(fruits.pop()+"<br/>");
document.write(fruits);
</script>
</body>
</html>

how to add new element to the end of an array

<html>
<body>
<script type="text/javascript">
var fruites=["Banana","orange","apple","mango"];
document.write(fruits.push("kiwi")+"<br/>");
document.write(fruits.push("Lemon","pineapple")+"<br/>");
document.write(fruits);
</script>
</body>
</html>

how to reverse the order of the elements in an array

<html>
<body>
<script type="text/javascript">
var fruits=["Banana","orange","apple","mango"];
document.write(fruits.reverse());
</script>
</body>
<//html>

how to remove the first element of an array

<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+"<br/>");
</script>
</body>
</html>

how to use slice to select elements from an array.

<html>
<body>
<script type="text/javascript">
var fruits=["banana","orange","apple","mango"];
document.write(fruits.slice(0,1)+"<br/>");
document.write(fruits.slice(1)+"<br/>");
document.write(fruits.slice(-2)+"<br/>");
document.write(fruits);
</script>
</body>
</html>

how to use sort().
how to sort alphabetically and ascending

<html>
<body>
<script type="text/javascript">
var fruits=["banana","orange","apple","mango"];
document.write(fruits.sort());
</script>
</body>
</html>

how to sort numarically and ascending

<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>

how to sort() numerically and descending.

<html>
<body>
<script type="text/javascript">
function sortnumber(a,b)
{
return b-a;
}
var n=["10","5","40","25","100","1"];
document.write(n.sort(sortnumber));
</script>
</body>
</html>

how to use slice() to add an element to the second position in an array

<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>

how to convert an array to a string

<html>
<body>
<script type="text/javascript">
var fruits=["banana","orange","apple","mango"];
document.write(fruits.toString());
</script>
</body>
</html>

how to add new elements to te begining of an array

<html>
<body>
<script type="text/javascript">
var fruits=["banana","orange","apple","mango"];
document.write(fruits.unshift("kiwi")+"<br/>");
document.write(fruits.unshift("Lemon","pineapple")+"<br/>");
document.write(fruits);
</script>
<p><b>Note:</b> The unshift() method does not work properly in internet explorer, it only returns undefined!</p>
</body>
</html>

1 comment:

suman said...

nice article for beginners.thank you.
python tutorial
java tutorial

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams