Arrays
| The next step up from storing data in simple variables is to store data in arrays. Unlike a simple variable, an array stores multiple values, and each value is given an index number. To access a particular value, you specify not just the array name , but also the index number for the value you want. JavaScript arrays are supported by the array object, and you can see the support for this object in Table 2.3. Chapter 19, "The Math , Number , Boolean , and Array Objects," covers the array object in depth. Table 2.3. The array Object
Let's take a look at an example to see how this works and what makes arrays useful. Here I'll start by creating an array called names , which I will use to store the names of friends . I'll set up that array and make it big enough to store four data items using the statement var names = new Array(4) . Because Array is a type of object and not just a simple variable type, you need to use the new keyword to create an object of the Array type. In JavaScript, you must use the new keyword when explicitly creating objects, such as String or Array objects (but not when declaring plain variables)that will be easy to keep track of, though, because we'll only create objects of a few types: String , Array , Date , and so on. Here's what the code looks like to create our new array: <HTML> <HEAD> <TITLE> Working With Arrays </TITLE> </HEAD> <BODY> <H1>Working With Arrays</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- var names = new Array(4) . . . // --> </SCRIPT> </BODY> </HTML> This creates a new array using the Array object's constructor . A constructor has the same name as the object type itself (like String or Date ), and you use the constructor to create a new object of that type. You can send data to the object's constructor by enclosing that data in parentheses that follow the constructor's name (what data you can send depends on the type of object and what its constructor expects). For example, the code we're using here, new Array(4) , creates an array of four elements using the Array constructor. (We'll see more on constructors in Chapter 20, "The RegExp Object: Working with Regular Expressions.") So that sets up our array; but how do you actually store and retrieve data using this new array? Accessing Array DataTo access the items in an array, you can use an index number. The first item in the names array is names[0] , the second is names[1] , and so on. (The first item in an array is always given the index number 0, which means the last item has the index number equal to the total number of items in the array minus one.) I can treat all these items as simple variables, assigning them values like this: (Listing 02-04.html on the web site)<HTML> <HEAD> <TITLE> Working With Arrays </TITLE> </HEAD> <BODY> <H1>Working With Arrays</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- var names = new Array(4) names[0] = "Frank" names[1] = "Nancy" names[2] = "Dan" names[3] = "Claire" document.write(names[0]) // --> </SCRIPT> </BODY> </HTML> Note also that I've displayed the value in names[0] with document.write at the end of the script. What's useful about arrays is that you have control over the index number in your codefor example, you can refer to items in an array using a variable for the index number, like this: names[variable1] . Your code can change variable1 , and so access all the items in the names array easily. This is especially useful when you have a long set of datayour script can access all the items in that set just by repeatedly adding 1 to variable1 , accessing each data item and working with them all. Repetitive operations like that are what computers excel at (as we'll see in the next chapter where we deal with JavaScript loops , which are all about such repetitive action, executing the same code over and over on a whole set of data items). In JavaScript, you don't have to use index numbers in arrays; you also can use index strings. That means you can store values in an array using strings, not just numbers . Here are some examples: var names = new Array(4) names["first"] = "Frank" names["second"] = "Nancy" names["third"] = "Dan" names["fourth"] = "Claire" document.write(names["first"]) This is useful if you want to store data using names such as "birthday," "address," "phoneNumber," and so on, and access that data using those names rather than index numbers. Arrays that use strings as indices for data like this are also called associative arrays . Here's something else that's good to know:You can initialize the data in an array just by listing it when you create the array using the Array constructor, like this: var values = new Array(1, 2, 3, 4) To use this technique, you must specify more than one array element. You can even create and initialize a new array like this: var values = [1, 2, 3, 4] Determining the Array LengthWe'll see the array object in depth in Chapter 19, but it's worth taking a look at one property of that object here: the length property, which tells you how many items are in an array. Here's an example showing how to use this property: (Listing 02-05.html on the web site) <HTML> <HEAD> <TITLE> Finding the Length of an Array </TITLE> </HEAD> <BODY> <H1>Finding the Length of an Array</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- var names = new Array(4) names[0] = "Frank" names[1] = "Nancy" names[2] = "Dan" names[3] = "Claire" document.write("The names array has " + names.length + " items.") // --> </SCRIPT> </BODY> </HTML> Figure 2.3 shows the results. Figure 2.3. Finding an array's length. We'll see more on arrays in Chapter 19.  |
