ECMAScript 2015 Array Data Methods

The ECMAScript Array – Part 3

ECMAScript 6

Foreword: In this part of the series, I talk about the ECMAScript array methods that can be used for some minimal data analysis of the values in the array.

By: Chrysanthus Date Published: 14 Jul 2016

Introduction

This is part 3 of my series, The ECMAScript Array. In this part of the series, I talk about the ECMAScript array methods that can be used for some minimal data analysis of the values in the array.

The sort Method
If the values of an array consist of strings, this method will sort them alphabetically. In this case, there will be re-indexing; that is the indexing will change and the new string values will have new indexes beginning from zero. The method returns the sorted array; the original array is also sorted. Read and try the following code:

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

    <script type="text/ECMAScript">

        fruits = new Array("pear", "orange", "strawberry", "lime", "lemon", "avocado", "guava", "banana");

        fruits.sort();

        document.write(fruits);

    </script>

</body>
</html>

The extra HTML code is to produce a web page. The output is:

    avocado,banana,guava,lemon,lime,orange,pear,strawberry

sorted alphabetically. In the code, the returned array has not been assigned to any identifier. The syntax for the sort method is

    arrayObject.sort (comparefn)

The comparefn parameter is optional. If the values of the array are made up of, strings and numbers or only numbers, then you will need the comparefn parameter. comparefn stands for “compare function”. It is a function that will be used to compare the values. However, I will not go into that in this tutorial.

The reverse Method
This method is used to reverse the order of values in an array. The values of the original array are reversed. If you assigned the method expression to an identifier, the original reversed array will be returned to the identifier. The syntax is:

    arrayObject.reverse()

Read and try the following code:

    <script type="text/ECMAScript">

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

        empArr.reverse();

        document.write(empArr);

    </script>

The output is:

    Simon,Paul,Grace,Martin,Susan,Angela,Augustine,Peter,Mary,John

reversed.

The indexOf Method
This method can take as argument the value of an element in the array, and then return the index of the element (value). Read and try the following code:

    <script type="text/ECMAScript">

         empArr = new Array("John", "Mary", "Peter", "Augustine", "Angela", "Susan", "Martin",

"Grace", "Paul", "Simon");

        inter = empArr.indexOf("Grace");

        alert(inter);

    </script>

The return integer (whole number) is 7, for the value “Grace”. The indexOf method is case sensitive, meaning, if the search string is “Grace”, it will look for “Grace” and not “grace”. The syntax of the method is:

    arrayObject.indexOf ( searchElement [ , fromIndex ] )

where the second argument is optional as can be deduced from the square brackets. The first argument, searchElement is for the value in the array to be searched. When the value is seen, the index is returned. If the value is not seen, -1 is returned. If the array has more than one of the same values, the first index is returned.

If you want the search to begin from a particular position in the array, then type the index for the second argument, where you want the search to begin. In the absence of the second argument, zero is assumed for searching the whole array. So, the default value for fromIndex is 0. If this value is greater than or equal to the length of the array, -1 is returned and the array is not searched.

The lastIndexOf Method
The lastIndexOf is the opposite of the indexOf method. If there is more than one element of the same value, then the last index is return. If there is only one element, the index is still returned as with the indexOf method. The syntax is:

    arrayObject.lastIndexOf ( searchElement [ , fromIndex ] )

Here, searchElement has the same meaning as for indexOf. However, the search here is backwards (from highest index to lowest index). If you want the search to begin from a particular position in the array, then type the index for the second argument, where you want the search to begin (and go backwards). In the absence of the second argument, the length minus 1 is assumed as index for searching the whole array. So, the default value for fromIndex here, is length-minus-1. If this value is greater than or equal to the length of the array, the whole array is searched. Read and try the following code:

    <script type="text/ECMAScript">

        fruits = new Array("pear", "orange", "strawberry", "lime", "lemon", "avocado", "lime", "guava", "banana");

        inter = fruits.lastIndexOf ("lime");

        alert(inter);

    </script>

The output is 6, the last index for “lime” which occurs twice.

The concat Method
You can form a new array by appending a number of elements to an existing array, in the order in which the elements are typed. The syntax is:

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

The array is arrayObject. The values to append to the array are item1, item2, item3, etc. The items are all optional as indicated by the square brackets. It is the returned array that has both lists, the original array remains unchanged. Read and try the following code:

    <script type="text/ECMAScript">

        fruits = new Array("AA", "BB", "CC", "DD", "EE", "FF");

        newArr =fruits.concat("GG", "HH", "FF");

        document.write(newArr);

    </script>

The output is:

    AA,BB,CC,DD,EE,FF,GG,HH,II

The join Method
You can join all the values in an array into a string. The syntax is:

    arrayObject.join (separator)

The argument, separator is what will separate the values in the string. It can be a comma, space, hyphen, etc. It is of your choice. Read and try the following code where the separator is a space:

    <script type="text/ECMAScript">

        arr = new Array("United", "Nations", "Educational", "Scientific", "Cultural",

"Organization");

        str = arr.join(' ');

        document.write(str);

    </script>

The output is:

    United Nations Educational Scientific Cultural Organization

In the code, the separator is typed in quotes. So a comma would be typed as ',', a space would be typed as  ' ' and a hyphen would be typed as '-'. The separator argument is optional. In its absence, a comma is assumed. So the comma is the default separator.

That is it for this part of the series.

Chrys

Broad Network

Related Articles

ECMAScript 2015 Array Data Methods

The ECMAScript Array – Part 3

ECMAScript 6

Introduction

Related Links

Comments