Arrays in JQuery

Home » Javascript » JQuery » jQuery Interesting codes » Arrays in JQuery

Posted by 20Fingers2Brains on Tags: Javascript , JQuery , jQuery Interesting codes

The Array object is used to store multiple values in a single variable.
An Array can hold different types of data types in a single array slot, which implies that an array can have a string, a number, or an object in a single slot.

Creating an Array:

An Array object can be created in the following ways:

Using the array Constructor
Using the array literal notation

Using the array Constructor

An empty array is created in cases where you do not know the exact number of elements to be inserted in an array. You can create an empty array by using an array constructor, as shown below:

    var myArray = new Array();

You can also create an array of any given size as shown below:

    var myArray = new Array(size);
    var myArray = new Array(20);

In the preceding code snippet, an array with 20 items is created.

You can also create an array with given elments as shown below:

    var array1 = new Array("Henry", "Fabregas", "Wilshere", "Cazorla", "Ozil");
    var array2 = new Array("IT", "Weekend", "Appraisal", "Escalation", "Resignation");

In the preceding code arrays with given values are created.

Using the array Literal notation
An array can be created by using the array literal notations. Array literal notations are comma-separated list of items enclosed by square brackets.

The syntax to create an empty array by using the array literal notation is shown below:

    var myArray = [];

The following code snippet shows how to create an array with given elements:

    var array1 = ["Ozil", "Cazorla"];
    var array2 = [6, "Cazorla",true];

In the preceding code snippet, an array containing different values, such as number 6, string Cazorla and boolean value true is created.

Methods of Array Object

push:

The push method adds new element as the last element and returns the length of the new array.

Simple Example:

In the above example, we have create a simple array, and added two elements to it. We have also created button on click of which the array elements are shown using paragraph element.

Another Example:

In the above example, we have created an array added elements into it as per user choice and also displayed its size.

pop:

The pop method removes the last element of an array and returns that element. It is opposite to the method push.

Simple Example:

In the preceding example, we have created an array with five elements. We then used pop method to remove last element from an array. The pop method also returned the element removed, we have captured it in a variable and showed on UI.

Another Example:

In the preceding example, we have created an array. On click of pop button we are removing last element from the array and displaying the removed and current array.

concat:

The concat method joins two or more arrays and returns te joined array. The concat method accepts the another array object to concat. In order to concat more than two arrays, pass multiple arrays to concat method comma separated.

In the preceding example, we have shown how to concat two or more arrays using concat method.

join:

The join method joins all elements of an array into a string. This method creates a string representation of an array by joining all its elements using a separator string. If no separator is supplied, i.e. join() without an argument, the array will be joined using comma.

In the preceding example, we have seen how to join array elements by passing different arguments.

reverse:

The reverse method reverses the order of list of elements in an array.

In the preceding example, we have created an array used reverse method and displayed the result.

shift:

The shift method removes the first element from an array and returns the removed element. The combination of push() and shift() creates the method of queue.

In the preceding example, we have used shift method to remove the first element from an array.

slice:

The slice method selects part of an array and returns that selected part as a new array. The slice method takes one parameter which is the index of element to start slicing.

sort:

The sort method sorts the elements of an array. This method takes one parameter, which is a comparing function. If this function is not given, the array is sorted ascending.

In the preceding example, we have used sort method to sort the array elements in both ascending and descending order. In case of descending, If the return value is less than zero, the index of a is before b, and if it is greater than zero it's vice-versa. If the return value is zero, the element's index is equal.

splice:

The splice method adds or removes the elements of an array. The splice takes three parameters:

Index – The starting index.
Length – The number of elements to remove.
Values – The values to be inserted at the index position.

toString:

The toString method converts an array into a string and returns the string.

unshift:

The unshift method adds new elements to an array and returns the new length. The unshift element adds elment to the first position.

Length property of Array object
The length property holds the number of elements in an array. This property is used to determine the amount of items in an array.

Looping through an array

Following are the ways by which we can loop through an array.