Arrays

The notes for this tutorial do not contain many notes. See the source code for the different array operations.

The person.js source file

 1    /**
 2     * Simple Person class.
 3     * Represents a person with name and age.
 4     */
 5    function Person(name, age) {
 6        this.age = age;
 7        this.name = name;
 8        this.toString = function() {
 9            return this.name + ", " + this.age + " years";
10        };
11    }
12    </code></pre>

Note:

The toString method is necessary to give the instances of the Person class a textual representation (instead of the default “[Object object]” name).

The following source uses various methods of the array instance.

Note: in the example below, only the following array methods will actually change the array object on which they’re invoked:

  • push
  • splice
  • sort

All the other array methods will return a new array as the return value

  1    function how_to_add_item_to_array() {
  2        LIST.push("hello");
  3        // following appears to work in Chrome:
  4        // (alternative to the push methd)
  5        // LIST[LIST.length] = "bla";
  6        // but better use the "official" way with the push method
  7    }
  8
  9
 10    function how_to_remove_item_from_array() {
 11        // Remove item from list using the "splice" string method.
 12        // The splice method takes two arguments:
 13        // 1) start index
 14        // 2) number of items to delete
 15        LIST.splice(3, 1);
 16    }
 17
 18
 19    function how_to_get_sub_range_from_array() {
 20        // Slice:
 21        // slice takes two arguments:
 22        // 1) start index (negative index counts from the end)
 23        // 2) end index (exclusive). If not used, will slice until the end of array
 24        LIST = LIST.slice(3, -1);
 25    }
 26
 27
 28    function how_to_join_items_into_concatenated_string() {
 29        // Joining items into a concatenated string:
 30        alert(LIST.join(" and "));
 31    }
 32
 33
 34    function how_to_find_position_within_array() {
 35        var index = LIST.indexOf(5443);
 36        alert("position is " + index);
 37    }
 38
 39
 40    function how_to_sort_simple_values() {
 41        LIST.sort();
 42    }
 43
 44
 45    function how_to_sort_complex_values() {
 46        LIST.sort(ageSorter);
 47    }
 48
 49
 50    var LIST = [33, 6, 544, 1, 66, 22, 11, 10, 55, 22];
 51
 52
 53    $(document).ready(function() {
 54        ////////////////////////////////////////////////////////////////////////////
 55        // COMMENT OUT THE FOLLOWING GROUPS
 56        // TO TRY THEM OUT
 57        ////////////////////////////////////////////////////////////////////////////
 58
 59        // how_to_add_item_to_array();
 60
 61        // how_to_remove_item_from_array();
 62
 63        // how_to_get_sub_range_from_array();
 64
 65        // how_to_join_items_into_concatenated_string();
 66
 67        // how_to_find_position_within_array();
 68
 69        // how_to_sort_simple_values();
 70
 71        // LIST = [
 72        //     new Person("Jack", 20),
 73        //     new Person("Maggie", 29),
 74        //     new Person("Jose", 27),
 75        //     new Person("John", 39),
 76        //     new Person("Ziggie", 66),
 77        //     new Person("Sally", 29),
 78        //     new Person("Argor", 19)
 79        // ];
 80        // how_to_sort_complex_values();
 81        
 82        displayArray(LIST);
 83    });
 84
 85
 86    function displayArray(list) {
 87        var myListThingie = $('<ul>');
 88        for (var idx=0; idx<list.length; idx++) {
 89            var item = list[idx];
 90            myListThingie.append('<li>' + item + '</li>');
 91        }
 92        var $resultDiv = $('#array-display');
 93        $resultDiv.empty();
 94        $resultDiv.append(myListThingie);
 95    }
 96
 97
 98    function ageSorter(a, b) {
 99        if (a.age < b.age)
100            return -1;
101        else if (a.age > b.age)
102            return 1;
103        else
104            return 0;
105    }