User Tools

Site Tools


javascript_arrays

Javascript Arrays

This is an array

//these do the same thing
var cars = ["Saab", "Volvo", "BMW"];

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

var cars = new Array("Saab", "Volvo", "BMW");

Note: Putting a comma after the last element (like “BMW”,) works with some browsers but not all. IE 8 and earlier will fail.

Accessing an array element

alert(cars[0]);

Accessing the whole array

I wonder what this looks like

alert(cars);

Changing the value of an array element

cars[0] = "Mitsubishi";

Adding elements to an array

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits

or

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits

or

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits=fruits.concat("Lemon");     // adds a new element (Lemon) to fruits

Merging arrays

    var hege = ["Cecilie", "Lone"];
    var stale = ["Emil", "Tobias", "Linus"];
    var children = hege.concat(stale);

Arrays can contain anything

even functions and other arrays

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person[3] = Date.now;
person[4] = myFunction;
person[5] = myCars;

Multidimensional arrays

//pls test
var things=[];
things[0]=cars;

Array Functions or What arrays can do

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4

Accessing the Last Array Element

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Looping through an array

//using a for loop
var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";

fLen = fruits.length;
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}

or using forEach

var fruits, text;

fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";

fruits.forEach(myFunction);
function myFunction(value) {
    text += "<li>" + value + "</li>";
}

Arrays are not Hashes

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.

If you use named indexes, JavaScript will redefine the array to a standard object. After that, some array methods and properties will produce incorrect results.

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined

The Difference Between Arrays and Objects

In JavaScript, arrays use numbered indexes.

In JavaScript, objects use named indexes.

Arrays are a special kind of objects, with numbered indexes.

JavaScript does not support associative arrays.

You should use objects when you want the element names to be strings (text).

You should use arrays when you want the element names to be numbers.

Avoid new Array()

The new keyword only complicates the code. It can also produce some unexpected results:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

How to Recognize an Array

//don't do this
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // returns object

//this used to be the solution, but
//ECMAScript 5 is not supported in older browsers.
//Older browsers do not support this
Array.isArray(fruits);     // returns true

//this will work
function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

//this is a lot simpler
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // returns true
javascript_arrays.txt · Last modified: 2018/09/24 16:26 by 119.94.100.2