Java script arrays

Arrays
Declaring and Allocating Array
Types of Array
Array Methods
TOPICS

Arrays
Array inherits from Object.
Indexes are converted to strings and used as names for
retrieving values.
Not very efficient in most other cases.
The JavaScript Array object is a global object that is used
in the construction of arrays; which are high-level, list-like
objects.
One advantage: No need to provide a length or type
when creating an array.

Normally, arrays allocate a contiguous block of memory of
fixed length. However, in Javascript, arrays are:
Object types with special constructors and accessor
methods.
Which means, a statement like:
var arr = new Array(100000);
does not allocate any memory! In fact, it simply sets the value
of the length property in the array.
When you construct an array, you don't need to declare a
size as they grow automatically.

So, you should use this instead:
var arr = [];
Arrays in Javascript are sparse which means not all
the elements in the array may contain data. In
other words, only the elements that actually contain
data exist in the array. This reduces the amount of
memory used by the array. The values are located
by a key and not by an offset. They're simply a
method of convenience and not intended to be
used for complex numerical analysis.
Arrays in Javascript are not typed so the value of an
element can be an object, string, number, boolean,
function or an array.

Declaring and Allocating Arrays
JavaScript arrays are Array objects.
Creating new objects using the new
operator is known as creating an instance
or instantiating an object
Operator new is known as the dynamic
memory allocation operator

Declare + Initialize Arrays
Only declaration
var arr=[];
Using the conventional Syntax
var arr = [“a” , ”b” , ”c”];
Using the JavaScript Keyword new
var arr = new Array(“1”,”2”,”3”,”4”);
document.write(arr[0]+arr[1]+arr[2]+arr[3]);

Types of Array
Associative Array
Index Array

Associative Array
//Associative array example
var person ={ firstName: "Frayosh", Lastname:"Wadia“ };
document.write(""+person["firstName"]+
“ ”+person["Lastname"] );
Javascript associative array is a type of array which
stores data using name value pairs
The array data can be accessed by specifying the key rather
than the index
Output : Frayosh Wadia

Indexing Array
//Indexing Array
<script>
var ary = ["A", "B" , "C" , "D" , "E","F"];
document.write(“<br>"+ary[4]);
<script>
Output : E

USING LOOP
//Using Loop and iterating the array
<script>
var arr=new Array(“1”,”2”,”3”,”4”);
for(i=0;i<ary.length;i++)
{
document.write(ary[i]);
}
</script>
Output : 1234

Array Methods
 Concat
 Join
 Push
 Pop
 Unshift
 Shift
 Sort
 Reverse
 Slice
 Splice
 IndexOf
 LastIndexOf
 Length

CONCAT
Javascript array concat() method returns a new
array comprised of this array joined with two or
more arrays.
Syntax:
The syntax of concat() method is as follows −
array.concat(value1, value2, ..., valueN);
Return Value:
Returns the length of the array.

//Array method Concat
<script>
var a=new Array("Hello");
var b=new Array("World");
document.write("<br>"+a.concat(b));
</script>
Output :Hello,World

Join
Javascript array join() method joins all the elements
of an array into a string.
Syntax
Its syntax is as follows −
array.join(separator);
Parameter Details
separator − Specifies a string to separate each
element of the array.
Return Value
Returns a string after joining all the array elements.

//Array Method: Join
<script>
var c=new Array(6,7,8,9);
document.write("<br>"+c.join("/"));
</script>
Output : 6/7/8/9

PUSH
Javascript array push() method appends the given
element(s) in the last of the array and returns the
length of the new array.
Syntax
array.push(element1, ..., elementN);
Parameter Details
element1, ..., elementN: The elements to add to the
end of the array.
Return Value
Returns the length of the new array.

// Array Method Push
<script>
var d=new Array("Frayosh","Lalit","Sameer");
d.push("Muzzamil");
document.write("<br>"+d);
</script>
Output :Frayosh,Lalit,Sameer,Muzzamil

POP
Javascript array pop() method removes
the last element from an array and returns
that element.
Syntax
array.pop();
Return Value
Returns the removed element from the array.

// Array method pop
<script>
var e=new Array(1,2,3,4);
e.pop();
document.write("<br>"+e);
</script>
Output :1,2,3

UNSHIFT
Javascript array unshift() method adds one or
more elements to the beginning of an array and
returns the new length of the array.
Syntax
array.unshift( element1, ..., elementN );
Parameter Details
element1, ..., elementN − The elements to add to
the front of the array.
Return Value
Returns the length of the new array.

// Array method: Unshift
<script>
var f=new Array("Frayosh","Lalit","Sameer");
f.unshift("Muzzamil");
document.write("<br>"+f);
</script>
Output :Muzzamil,Frayosh,Lalit,Sameer

SHIFT
Javascript array shift()method removes the first
element from an array and returns that
element.
Syntax
array.shift();
Return Value
Returns the removed single value of the array.

// Array Method: Shift
<script>
var g=new Array(1,2,3,4);
g.shift();
document.write("<br>"+g);
</script>
Output : 2,3,4

SORT
Javascript array sort() method sorts the elements of
an array.
Syntax
array.sort();
Return Value
Returns a sorted array.

//Array Method:Sort
<script>
var h=new
Array("Frayosh","Lalit","Sameer","Muzzamil");
h.sort();
document.write("<br>"+h);
</script>
Output : Frayosh,Lalit,Muzzamil,Sameer

REVERSE
Javascript array reverse() method reverses the
element of an array. The first array element
becomes the last and the last becomes the first.
Syntax
array.reverse();
Return Value
Returns the reversed single value of the array.

// Array method: Reverse
<script>
var i=new Array(4,7,2,1);
document.write("<br>"+i.reverse());
</script>
Output :1,2,7,4

SLICE
Javascript array slice() method extracts a section of an
array and returns a new array.
Syntax
array.slice( begin ,end);
Parameter Details
begin − Zero-based index at which to begin extraction
end − Zero-based index at which to end extraction.
Return Value
Returns the extracted array based on the passed parameters.

//Array Method: Slice
<script>
var k=new Array("A","B","C","D","E");
document.write("<br>"+j.slice(1,4));
<script>
Output :B,C,D

//Array Method:Slice
<script>
var j=new Array("A","B","C","D","E");
document.write("<br>"+j.slice(2));
<script>
Output : C,D,E

Javascript array splice() method changes the content of an array,
adding new elements while removing old elements.
Syntax
array.splice(index, howMany, [element1][, ..., elementN]);
Parameter Details
index − Index at which to start changing the array.
howMany − An integer indicating the number of old array elements
to remove.
element1, ..., elementN − The elements to add to the array.
Return Value
Returns the extracted array based on the passed parameters.
Splice

Remove Values
//Splice method used for removing elements
j.splice(2,2);
document.write("<br>"+j);
Output :A,B,E

//Array method :Splice
var l=new Array("A","B","C","D","E");
j.splice(2,0,"S","H");
document.write("<br>"+j);
Add Values
Output : A,B,S,H,C,D,E

ADD & REMOVE
//Splice method used for adding and removing
elements
j.splice(2,2,"S","H");
document.write(“<br>"+j);
Output : A,B,S,H,E

IndexOf
Javascript array indexOf() method returns the first index at
which a given element can be found in the array, or -1 if it is
not present.
Syntax
array.indexOf(searchElement, fromIndex);
Parameter Details
searchElement − Element to locate in the array.
fromIndex − The index at which to begin the search.
Defaults to 0, i.e. the whole array will be searched.
Return Value
Returns the index of the found element.

// Array Method: IndexOf
<script>
var ar=new Array("A","B","C","D","E","F","G");
document.write("<br>"+ar.indexOf("F"));
</script>
Output :5

Javascript array lastIndexOf() method returns the last index at
which a given element can be found in the array, or -1 if it is not
present. The array is searched backwards, starting at fromIndex.
Syntax
array.lastIndexOf(searchElement, fromIndex);
Parameter Details
searchElement − Element to locate in the array.
fromIndex − The index at which to start searching backwards.
Defaults to the array's length, i.e., the whole array will be
searched.
Return Value
Returns the index of the found element from the last.
LastIndexOf

// Array method :Last Index Of
<script>
var index = [8, 5, 8, 130, 44,8,16,15];
document.write("<br>"+ index.lastIndexOf(8,6));
</script>
Output :5

LENGTH
Javascript array length property returns an unsigned,
32-bit integer that specifies the number of elements
in an array.
Syntax
array.length
Return Value
Returns the length of the array

// Array length returning the length of the
array
<script>
var ar=new Array("A","B","C","D","E","F","G");
document.write("<br>"+ar.length);
</script>
Output :7

Adding Elements
Javascript allows you to declare and empty array and add values later on
Eg. var cities=[];
cities[0]="Delhi";
cities[1]="Mumbai";
cities[2]="Chennai";
cities[3]="Bangalore";
or
You can simply add values during declaration
Eg. var cities=[“Delhi",“Mumbai",“Chennai",“Bangalore"];
or
Create an Array instance(new) and add values
Eg. var cities=new Array(“Delhi”,”Mumbai”,”Chennai”,”Bangalore”);

Deleting Elements
delete array[number]
Removes the element, but leaves a hole in the numbering.
Returns Boolean value
array.splice(number, 1)
Removes the element and renumbers all the following
elements. Returns the deleted value.

Deleting Elements
//deleting Elements using delete
var cities=["Delhi","Mumbai","Chennai","Bangalore"];
delete cities[1];
document.write("<br>Array after using delete :"+ cities);
document.write("<br>Displaying element at 1st position:"+cities[1]);
Output
Array after using delete :Delhi,,Chennai,Bangalore
Displaying element at 1st position:undefined

//deleting using splice
<script>
var cities=["Delhi","Mumbai","Chennai","Bangalore"];
document.write("<br>Deleted Element:"+cities.splice(1,1));
document.write("<br>Array after using splice:"+ cities);
document.write("<br>Displaying element at 1st position:"+
cities[1]);
</script>
Output
Deleted Element:Mumbai
Array after using splice:Delhi,Chennai,Bangalore
Displaying element at 1st position:Chennai

Java script arrays

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Java script arrays (20)

Recently uploaded (20)

Java script arrays