Broad Network


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

Related Links

ECMAScript Basics
ECMAScript Operators
Expressions in ECMAScript
Statements in ECMAScript
Custom Objects in ECMAScript
Functions in ECMAScript
ECMAScript Date Object
The ECMAScript String Object
ECMAScript String Regular Expressions
ECMAScript Template Literal
The ECMAScript Array
ECMAScript Sets and Maps
ECMAScript Number
Scopes in ECMAScript
Mastering the ECMAScript (JavaScript) eval Function
Sending Email with ECMAScript
ECMAScript Insecurities and Prevention
Advanced Course
Advanced ECMAScript Regular Expressions
Promise in ECMAScript 2015
Generator in ECMAScript 2015
ECMAScript Module
More Related Links
Node Mailsend
EMySQL API
Node.js Web Development Course
Major in Website Design
Low Level Programming - Writing ECMAScript Module
ECMAScript Course

BACK NEXT

Comments

Become the Writer's Follower
Send the Writer a Message