- 3 years ago
- Zaid Bin Khalid
- 4064 Views
-
6
In this session, you will learn how to create and manipulate arrays in JavaScript with the help of an example.
What is an Array
The array can store any valid value, numbers, objects, functions, including stings values with other arrays. Doing this will create more complex data structures of a variety of arrays or objects of arrays.
Let’s assume you need or want to store the name of colors in your JavaScript code, and the output will display like this.
var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";
In case if you also need or want to add state or city names of a country in variables. At that time, it is quite hard and annoying to store each of them in a separate variable by using different variables. It is hard and tracks them all will be very difficult that time this problem will be solved by arrays by giving an ordered structure for storing multiple values or a group of values.
Creating an Array
The easiest way to create an array in JavaScript is to enclose a comma-separated by a list of values in square brackets ([]). The basic syntax output will look like this.
var myArray = [element0, element1, ..., elementN];
Example of arrays created by using an array literal syntax.
var colors = ["Red", "Green", "Blue"];
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];
Accessing the Elements of an Array
The number of an index represents the position of an element. Array indexes initiated with zero means that the first value of an array is the store at index 0, not 1. The array of five elements has starting indexes from 0 to 4. The mentioned example will show how to get an individual array element by the index.
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits[0]); // Prints: Apple
document.write(fruits[1]); // Prints: Banana
document.write(fruits[2]); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya
Getting the Length of an Array
The length of an array returns with the length property. The index of any of its elements is less than Array length, which is the total number of elements contained in the array.
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Prints: 5
Looping Through Array Elements
To access each element of an array in sequential order, you can use for loop, as shown.
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// Iterates over array elements
for(var i = 0; i < fruits.length; i++) {
document.write(fruits[i] + "<br>"); // Print array element
}
Adding New Elements to an Array
To add an array a new element at the end of an array, use the push( ) method as shown.
var colors = ["Red", "Green", "Blue"];
colors.push("Yellow");
document.write(colors); // Prints: Red,Green,Blue,Yellow
document.write(colors.length); // Prints: 4
To add at the beginning of an array a new element, use the unshift( ) method as shown.
var colors = ["Red", "Green", "Blue"];
colors.unshift("Yellow");
document.write(colors); // Prints: Yellow,Red,Green,Blue
document.write(colors.length); // Prints: 4
To add multiple elements at once, you can use the push( ) and unshift( ) methods, as shown.
var colors = ["Red", "Green", "Blue"];
colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
document.write(colors); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voilet
document.write(colors.length); // Prints: 7
Removing Elements from an Array
By using the pop( ) method, you can remove the last element from an array. By using this method returns the value that was popped out. As you can see, for example.
var colors = ["Red", "Green", "Blue"];
var last = colors.pop();
document.write(last); // Prints: Blue
document.write(colors.length); // Prints: 2
By using the shift method( ), you can remove the first element from an array. By using this method, value also returns that was pop out. As you can see, for example.
var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
document.write(first); // Prints: Red
document.write(colors.length); // Prints: 2
Creating a String from an Array
When you are working, there may be a situation where you want to create a string by using joining the elements of an array. The join method is used to do that. As shown in the example.
var colors = ["Red", "Green", "Blue"];
document.write(colors.join()); // Prints: Red,Green,Blue
document.write(colors.join("")); // Prints: RedGreenBlue
document.write(colors.join("-")); // Prints: Red-Green-Blue
document.write(colors.join(", ")); // Prints: Red, Green, Blue
Extracting a Portion of an Array
You can use the slice( ) method. This method will extract out a portion of an array but keep the original array. This type of approach has two parameters: start index and an optional end index. As shown in the example:
array.slice(start, end) //Syntax
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
document.write(citrus); //prints: Orange,Lemon
Merging Two or More Arrays
Combine two or more arrays or merge the concat( ) method is used. This type of method returns a new array but does not change the existing arrays. As shown in the example.
var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
// Creating new array by combining pets and wilds arrays
var animals = pets.concat(wilds);
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra
Searching Through an Array
The indexOf( ) and last indexOf( ) is used to find out an array for a specific value. Both methods return an index representing the array element if the value is found. If you don’t find the value, it will show -1 as the returned value. The indexOf( ) the method returns the first saw one, and the last indexOf( ) returns the found the last one.
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.indexOf("Apple")); // Prints: 0
document.write(fruits.indexOf("Banana")); // Prints: 1
document.write(fruits.indexOf("Pineapple")); // Prints: -1
- 3 years ago
- Zaid Bin Khalid
- 4064 Views
-
6