CIS 119 Arrays

Objectives

Create arrays in JavaScript
Use arrays in JavaScript
Create and use a multi-dimensional array in JavaScript
Convert an array into a string
Convert a string into an array

JavaScript arrays

arrays are memory locations that share the same name, but are distinguishable by an index value
arrays can be declared using an Array object constructor or array literal:
- var arr = new Array(); // creates new array with no elements
- var arr = []; // creates new array with no elements
- var arr = new Array(10); // creates new array with 10 elements
- var arr = new Array(5, 1, 3, 4); // creates a new array with 4 elements: 5, 1, 3, 4
- var arr = [5, 1, 3, 4]; // creates a new array with 4 elements: 5, 1, 3, 4
- var arr = ['a', 'b', 'cd', 'f']; // creates a new array with 4 elements: 'a', 'b', 'cd', 'f'
you can add and delete elements from an array:
- arr[7] = 'hello'; // replaces element at index 7, or adds it if it didn't exist
- arr.concat('e', 10); // adds 'e' and 10 to the end of arr
- arr.push(5.37); // adds 5.37 to the end of arr
- x = arr.pop(); // stores last element of arr in x and deletes it from the array
- arr.unshift(5.37); // adds 5.37 to the beginning of arr
- x = arr.shift(); // stores first element of arr in x and deletes it from the array
arrays in JavaScript need not be full; for example, you can have elements at indices 0 and 9, but be missing the intermediate elements
array elements can be different data types
you can use for/in to iterate through arrays
arrays have a number of other useful methods and a useful property
- var len = arr.length; // length returns the "length" of the array
- arr.length = 7; // length can also be used to set the length of the array!!!
- arr.join('+'); // turns all array elements into strings and concatenates them using the provided string argument as a separator; if no argument is given, the default is to use a comma as a separator
- arr.reverse(); // reverses the order of the elements of the array
- arr.sort(); // sorts the elements of the array
- arr.sort(mysort); // sorts the elements of the array using the function mysort to determine the sort order
- arr.toString(); // returns a string representation of the array
- arr.splice(index, number, item1, ..., itemX); // used to delete and insert elements of an array
  - index specifies the index in the array where the insert/delete will begin
  - number specifies how many items should be deleted from the array
  - item1, ..., itemX are the items which will be inserted into the array
- arr.slice(1, 7); // returns elements at indices 1 through 6 of the array
- arr.slice(1); // returns elements at indices 1 through the end of the array
- arr.slice(2, -1); // returns elements at indices 2 through one less than the end of the array
- arr.slice(-4, -1); // returns elements from index 4 before the end of the array through one less than the end of the array

Array-like notation and behavior

JavaScript also uses the array subscript notation as an option for referencing the properties of objects. In this case, the subscripts are strings. This looks and acts like what is called an associative array or a map in other languages. Technically, even though the notation and usage may look like a JavaScript array in some ways, it is not a JavaScript array.

Multi-dimensional arrays in JavaScript

Multidimensional arrays in JavaScript are created by having the elements of an array be arrays themselves. For example, to create a two dimensional array that looks like a Tic-tac-toe board and contains the numbers 1 through 9, do the following:

var board = new Array();
for (var row=0; row<3; row++) {
    board[row] = new Array();
    for (var col=0; col<3; col++) {
        board[row][col] = row * 3 + col + 1;
    }
}

Converting between arrays and strings

string.split(delimiter): tokenizes the string based on the delimiter and returns an array of the tokens
array.join(delimter): returns a string with all of the array elements concatenated, including the delimter between each element

var arr = ["up", "down", "strange", "charm", "bottom", "top"];
// the following displays: up:down:strange:charm:bottom:top
console.log(arr.join(":"))

var bigbang = "Leonard, Sheldon, Penny, Howard, Rajesh, Bernadette, Amy";
var arr2 = bigbang.split(", ");
// the following displays each character name on a separate line
for (var i=0; i<arr2.length; i++) console.log(arr2[i]);

Sending escaped data from a form

For the following code, assume myform is the id of a form on the page, and that f1 and f1 are the ids of input text elements.

function $(id) {
    return document.getElementById(id);
}

window.onload = function() {
    $('myform').onsubmit = function() {
        var str1 = escape($('f1').value);
        var str2 = escape($('f2').value);
        var searchString = "f1=" + str1 + "&f2=" + str2;
        window.location = "receiveGet.html?" + searchString;
        return false;
    };
};

Receiving and unescaping data

For the following code, assume that a search string is being received via a get request, and that result is the id of a div element where we can place the decoded key/value information.

function $(id) {
    return document.getElementById(id);
}

window.onload = function() {
    var out = "";
    var queryString = window.location.search.substring(1);
    if (queryString.length == 0) {
        out += "Error: no fields found";
    } else {
        var fields = queryString.split('&');
        for (var i=0; i<fields.length; i++) {
            var key = fields[i].split('=')[0];
            var value = unescape(fields[i].split('=')[1]);
            out += '<p>Key: ' + key + ', Value: ' + value + '</p>';
        }
        $('result').innerHTML = out;
    }
};