User Tools

Site Tools


js:gen_array

Arrays in Javascript

09.03.2010

CREATE AN ARRAY

1. using new Array()

var myArr = new Array();
var myArr = new Array([size]); // size here is optional myArr.length will return [size]
var myArr = new Array("linux", "freebsd", "netbsd");

2. use the array literal notation (comma separated list of items)

var myArr = ["linux", "freebsd", "netbsd", 10, [2, 3]];

ACCESS AN ARRAY

Arrays are 0 based indices, so their elements can be accessed by using the referencing the index:

var myArr = ["linux", "freebsd", "netbsd", 10, [2, 3]];
// myArr[3] will return 10
// myArr[3] = 12 will modify it from 10 to 12

ADDING ELEMENTS TO AN ARRAY

To add elements at the end of the array:

var myArr = [];
// using myArr[] = "some element" will NOT work
myArr[myArr.length] = "some element"
// OR
myArr.push("some element");

To add elements at the beginning of an array:

myArr.unshift("first element", "second element");
// the example will look now as ["first element", "second element", "some element"]

REMOVING ELEMENTS FROM AN ARRAY

1. using length property (which is writable)

var myArr = ["hello", "joe", "banana"];
myArr.length -= 1; // result ["hello", "joe"]
myArr.length = 0 // empty the array

2. using Array.pop() and Array.shift()

myArr.pop(); // removes the element at the end of the array (and returns it)
myArr.shift(); // removes the element from the beginning of the array (and returns it)

3. using Array.slice(begin, [end]) and Array.splice()

- (begin index, [end index]) means include begin position but not the end position (up to)
- the initial array is not affected using slice

var myArr = [1,2,3,4,5,6,7,8,9,10];
myArr.slice(3,4) // returns [4]
myArr.slice(5,7) // returns [6, 7]

- splice(starting_index, howMany, [elem1, elem2…])
- starting_index cannot be negative (as in slice)
- the initial array is affected using slice; it removes howMany elements starting with starting_index and eventually replace them with [elem1, elem2…]

var myArr = [1,2,3,4,5,6,7,8,9,10];
myArr.splice(0,2) // returns [1,2] and the myArr is now [3, 4, 5, 6, 7, 8, 9, 10]
myArr.splice(0,2,"foo","bar") // returns [3,4] and myArr become ["foo", "bar", 5, 6, 7, 8, 9, 10]
myArr.splice(2,2,"rock") // fewer elements to replace -> returns [5,6] and myArr become now ["foo", "bar", "rock", 7, 8, 9, 10]

ASSOCIATIVE ARRAYS (HASHES)

Or arrays using keys with values. Because arrays are objects, you can add new properties to them.

var myArr = []; // empty array
myArr.new_property = "123"
// OR
myArr["new_property"] = "123"

Warning: myArr.length will NOT return the correct number of elements (for the above example will be 0).

For this kind of arrays, we also cannot use literal notation (brackets) and our custom extensions will get mixed with the key/value pairs. So,for associative arrays is better to use Object object

var myHash = { "name":"John Doe", "age":23 };
myHash.name; // returns "John Doe"
myHash["name"]; // the same

CLONING AN INDEXED ARRAY

We cannot obtain a clone by simply copying a reference to an array, so we need to iterate over each array's element and make a copy or much simpler:

Array.prototype.clone = function() { return [].concat(this); }
var originalArr = [2, 5, 3, 1];
var clonedArr = originalArr.clone();
clonedArr[0] = 9999;
clonedArr[0]; // returns 9999 but originalArr returns 2

Our clone function will not preserve arrays within the array. So…

var originalArr = [ [1,"first"], [2,"second"]];
var clonedArr = originalArr.clone();
originalArr[1][1] = "third";
clonedArr; // returns [[1, "first"], [2, "third"]] the same as originalArr

To also clone these arrays, we can use:

Array.prototype.cloneMulti = function() {
    var myArr = [].concat(this);
    for (var i = 0, len=myArr.length; i < len; i++) {
       if (Object.prototype.toString.apply(myArr[i]) ===[object Array]) {
          myArr[i] = myArr[i].clone();
       }
    }
    return myArr;
}

TRANSFORMING AN ARRAY INTO STRING AND BACK

1. For string into array myString.split([separator[, limit]])

var myString = "one,two,three";
myString.split(); // returns ["one,two,three"]

2. For array into string myArr.join(separator) or myArr.toString()

var myArr = ["one,two,three"];
myArr.toString(); // returns "one,two,three"

js/gen_array.txt · Last modified: 2013/03/16 17:40 (external edit)