Adding and Removing Elements in ECMAScript 2015 Array

The ECMAScript Array – Part 2

ECMAScript 6

Foreword: In this part of the series, I explain how to add and remove elements in an array using ECMAScript prototype methods.

By: Chrysanthus Date Published: 14 Jul 2016

Introduction

This is part 2 of my series, The ECMAScript Array. In this part of the series, I explain how to add and remove elements in an array using ECMAScript prototype methods.

The shift() Method
This method removes the first element of the array and returns the element, shortening the array by one element. Re-indexing takes place, i.e. index 1 becomes index 0, index 2 becomes index 1, etc. The syntax is:

    arrayObject.shift ()

The method returns the shifted value, or undefined if array is empty.

Read and try the following code that illustrates the use of the shift() method:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <script type="text/ECMAScript">

        arr = new Array("John", "Mary", "Peter", "Augustine", "Angela", "Susan", "Martin", "Grace", "Paul", "Simon");

        val = arr.shift();

        alert(val);
        document.write(arr);

    </script>

</body>
</html>

The extra HTML code is to produce a web page.

The unshift() Method
This method prepends one or more elements to the front of the array. The elements in the incoming argument list are fitted in the order in which they are inputted. The length of the resulting array increases. Re-indexing takes place, i.e. index 0 may become index 1, index 1 may become index 2, etc. The syntax is:

    arrayObject.unshift ( [ item1 [ , item2 [ , … ] ] ] )

where the parameters form the list of elements to be inputted.
The method returns the new number (length) of elements in the array. Read and try the following code:

    <script type="text/ECMAScript">

        tools = new Array("Hammer", "screw driver");

        len = tools.unshift("saw", "pincer");

        document.write(tools);
        alert(len);

    </script>

The pop() Method
This method removes the last element of an array and returns the value, shortening the array by one element. The syntax is:

    arrayObject.pop ()

The method returns the last value of the array. If array is empty, undefined is returned. Read and try the following code:

    <script type="text/ECMAScript">

        arr = new Array("John", "Mary", "Peter", "Augustine", "Angela",

"Susan", "Martin", "Grace", "Paul", "Simon");

        val = arr.pop();

        alert(val);
        document.write(arr);

    </script>

The push() Method
This method adds one or more elements to the end of the array. The length of the array increases. The syntax is:

    arrayObject.push ( [ item1 [ , item2 [ , … ] ] ] )

where the parameters form the list of elements to be added. The function returns the new number (length) of elements in the array. Read and try the following code:

    <script type="text/ECMAScript">

        tools = new Array("saw", "pincer");

        len = tools.push("Hammer", "screw driver");

        document.write(tools);
        alert(len);

    </script>

The slice() Method
This method reads and returns a sequence of elements in the array. The return entity is an array, the slice. The original array remains unchanged. Read and try the following code:

    <script type="text/ECMAScript">

        arr = new Array("AA", "BB", "CC", "DD", "EE", "FF", "GG");
        ret = arr.slice(2, 5);
        document.write(ret); document.write('<br>');
        document.write(arr);

    </script>

Note that the original array remains unchanged. The syntax of the slice() method is:

    arrayObject.slice (start, end)

arrayObject is the original array. The slice method takes two arguments, start and end, and returns an array containing the elements of the original array from start element up to, but not including, end element (or through to the end of the array if end is absent).

The splice() Method
The slice() method only copies the sequence of elements and leaves the original array unchanged. However, the splice() method removes the sequence of elements and can replace the sequence with a longer or shorter new sequence. After removing the sequence, the method can even replace it with nothing. The syntax of the method is:

        arrayObject.splice (start, deleteCount [ , item1 [ , item2 [ , … ] ] ] )

where arrayObject is the original array. start is the index at which the method starts removing elements. deleteCount is the number of elements to be removed. The elements for replacement, if any are typed after that

The method returns an array consisting of the removed elements.

Read and try the following code:

    <script type="text/ECMAScript">

        arr = new Array("AA", "BB", "CC", "DD", "EE", "FF", "GG");
        ret = arr.splice(2, 3, "PP", "QQ");
        document.write(ret); document.write('<br>');
        document.write(arr);

    </script>

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Adding and Removing Elements in ECMAScript 2015 Array

The ECMAScript Array – Part 2

ECMAScript 6

Introduction

Related Links

Comments