Manipulation Methods

Functions

Objects

Array Properties and Methods

DOM

Built-in Objects

Using Events in JavaScript

Handling Input and Output

Ajax and JSON

There are various ways to work with the items already contained in an array. The concat() method, for instance, allows you to create a new array based on all of the items in the current array. This method begins by creating a copy of the array and then appending the method arguments to the end and returning the newly constructed array. When no arguments are passed in, concat() simply clones the array and returns it. If one or more arrays are passed in, concat() appends each item in these arrays to the end of the result. If the values are not arrays, they are simply appended to the end of the resulting array.

Consider this example:

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

This code begins with the colors array containing three values. The concat() method is called on colors, passing in the string “yellow” and an array containing “black” and “brown”. The result, stored in colors2, contains “red”, “green”, “blue”, “yellow”, “black”, and “brown”. The original array, colors, remains unchanged.

The next method, slice(), creates an array that contains one or more items already contained in an array. The slice() method may accept one or two arguments: the starting and stopping positions of the items to return. If only one argument is present, the method returns all items between that position and the end of the array. If there are two arguments, the method returns all items between the start position and the end position, not including the item in the end position. Keep in mind that this operation does not affect the original array in any way.

Consider the following:

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow

In this example, the colors array starts out with five items. Calling slice() and passing in 1 yields an array with four items, omitting “red” because the operation began copying from position 1, which contains “green”. The resulting colors2 array contains “green”, “blue”, “yellow”, and “purple”. The colors3 array is constructed by calling slice() and passing in 1 and 4, meaning that the method will begin copying from the item in position 1 and stop copying at the item in position 3. As a result, colors3 contains “green”, “blue”, and “yellow”.

If either the start or end position of slice() is a negative number, then the number is subtracted from the length of the array to determine the appropriate locations. For example, calling slice(-2, -1) on an array with five items is the same as calling slice(3, 4). If the end position is smaller than the start, then an empty array is returned.

Perhaps the most powerful array method is splice(), which can be used in a variety of ways. The main purpose of splice() is to insert items into the middle of an array, but there are three distinct ways of using this method.

They are as follows:

Deletion — Any number of items can be deleted from the array by specifying just two arguments: the position of the first item to delete and the number of items to delete. For example, splice(0, 2) deletes the first two items.
Insertion — Items can be inserted into a specific position by providing three or more arguments: the starting position, 0 (the number of items to delete), and the item to insert. Optionally, you can specify a fourth parameter, fifth parameter, or any number of other parameters to insert. For example, splice(2, 0, “red”, “green”) inserts the strings “red” and “green” into the array at position 2.
Replacement — Items can be inserted into a specific position while simultaneously deleting items, if you specify three arguments: the starting position, the number of items to delete, and any number of items to insert. The number of items to insert doesn’t have to match the number of items to delete. For example, splice(2, 1, “red”, “green”) deletes one item at position 2 and then inserts the strings “red” and “green” into the array at position 2.

The splice() method always returns an array that contains any items that were removed from the array (or an empty array if no items were removed). These three uses are illustrated in the following code:

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); //remove the first item
alert(colors); //green,blue
alert(removed); //red - one item array
removed = colors.splice(1, 0, "yellow", "orange"); //insert two items at position 1
alert(colors); //green,yellow,orange,blue
alert(removed); //empty array
removed = colors.splice(1, 1, "red", "purple"); //insert two values, remove one
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow - one item array

This example begins with the colors array containing three items. When splice is called the first time, it simply removes the first item, leaving colors with the items “green” and “blue”. The second time splice() is called, it inserts two items at position 1, resulting in colors containing “green”, “yellow”, “orange”, and “blue”. No items are removed at this point, so an empty array is returned. The last time splice() is called, it removes one item, beginning in position 1, and inserts “red” and “purple”. After all of this code has been executed, the colors array contains “green”, “red”, “purple”, “orange”, and “blue”.

Examples

Create two arrays and merge them and print the output array.

var arr1 = ['Dog','Cat'];
var arr2 = ['Hen', 'Duck'];
console.log(arr1.concat(arr2));

Create an array of five elements and print an array containing all elements except the first element.

var fruits = ['apple','mango','banana','guava'];
console.log(fruits.slice(1));

Create an array of five elements and print an array containing all elements except the last element.

var fruits = ['apple','mango','banana','guava'];
console.log(fruits.slice(0,3));

Create an array of five elements and remove the third element.

var fruits = ['apple','mango','banana','guava','pineapple'];
fruits.splice(2,1);

Create an array of five elements and remove the fourth and fifth elements.

var fruits = ['apple','mango','banana','guava','pineapple'];
fruits.splice(3,2);

Create an array of five elements and add two more elements after the third element.

var fruits = ['apple','mango','banana','guava','pineapple'];
fruits.splice(4,0,'grapes','watermelon');

Create an array of five elements and replace the fourth and fifth elements with two new elements.

var fruits = ['apple','mango','banana','guava','pineapple'];
fruits.splice(3,2,'grapes','watermelon');