Javascript – Arrays
An Array stores multiple values in a single variable.
The first array’s value is 0.
Print all array values with -> for loop:
<!DOCTYPE html>
<html>
<body>
<script>
var i;
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>
Print all array values with -> while loop:
<!DOCTYPE html>
<html>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}
</script>
</body>
</html>
Statements:
// Regular
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
// Condensed
var myCars=new Array("Saab","Volvo","BMW");
//Literal:
var myCars=["Saab","Volvo","BMW"];
Misc Arrays:
var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW"; var myArray=new Array(); myArray[0]="Andrea"; // string myArray[1]=3; // number myArray[2]=Date.now; // object myArray[3]=myFunction; // function myArray[4]=myCars; // array - yeah! an array inside an array!
Methods and Properties
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
var x=myCars.length // the number of elements in myCars
var y=myCars.indexOf("Volvo") // the index position of "Volvo"
Syntax:
var x=arrayname.property
Complete List of Method and Properties:
constructor // Returns the function that created the Array object's prototype length // Sets or returns the number of elements in an array prototype // Allows you to add properties and methods to an Array object concat() // Joins two or more arrays, and returns a copy of the joined arrays indexOf() // Search the array for an element and returns its position join() // Joins all elements of an array into a string lastIndexOf() // Search the array for an element, starting at the end, and returns its position pop() // Removes the last element of an array, and returns that element push() // Adds new elements to the end of an array, and returns the new length reverse() // Reverses the order of the elements in an array shift() // Removes the first element of an array, and returns that element slice() // Selects a part of an array, and returns the new array sort() // Sorts the elements of an array splice() // Adds or Removes elements from an array toString() // Converts an array to a string, and returns the result unshift() // Adds new elements to the beginning of an array, and returns the new length valueOf() // Returns the primitive value of an array
Create New Methods:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to create an array, call the new ucase() method, and display the result.</p>
<button onclick="myFunction()">Try it</button>
<script>
Array.prototype.myUcase=function()
{
for (i=0;i<this.length;i++)
{
this[i]=this[i].toUpperCase();
}
}
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
The result is: BANANA,ORANGE,APPLE,MANGO
Convert a string to an array:
// ###################################################################
// Convert a String to an Array - removing the commas, spaces, pipe
// ###################################################################
var str="a,b,c,d,e,f";
var n=str.split(",");
alert(n[1]); // result is b! (the array index start at 0)
// Complete List
txt.split(","); // Split on commas -> Great to read databases from a flat txt file!
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
