Академический Документы
Профессиональный Документы
Культура Документы
Chapter 6:
Copy
2) Creating Arrays ....................................................................................................... 6-3
Evaluation
Copy
©2011 /training/etc Inc. REPRODUCTION OF THESE MATERIALS IS PROHIBITED.
6-1
AJAX - JAVASCRIPT AND XML CHAPTER 6: JAVASCRIPT ARRAYS
Introduction
Evaluation
• An array represents an ordered collection of data, any
element of which can be retrieved by number called its
index.
Copy
Array indices start at 0; therefore an array of 5 elements would
have indices of 0, 1, 2, 3, and 4.
The number of elements in an array can be changed at any
time.
Copy
©2011 /training/etc Inc. REPRODUCTION OF THESE MATERIALS IS PROHIBITED.
6-2
AJAX - JAVASCRIPT AND XML CHAPTER 6: JAVASCRIPT ARRAYS
Creating Arrays
Evaluation
• Since an array is an object (reference data type), creating
one requires use of the new operator and a special
function called a constructor.
Copy
For an array, the name of its constructor is Array.
Evaluation
separated list of values inside a set of square brackets.
var a = ["Mon", "Tue", "Wed", "Thu", "Fri"];
Processing Arrays
Evaluation
• Arrays are typically processed with for loops to step
through the indices of the array.
The example below demonstrates various techniques for
Copy
processing arrays.
simpleArrays.js
1. var longNames = new Array(7);
2. longNames[0] = "Sunday";
3. longNames[1] = "Monday";
4. longNames[2] = "Tuesday";
5. longNames[3] = "Wednesday";
6. longNames[4] = "Thursday";
7. longNames[5] = "Friday";
8. longNames[6] = "Saturday";
9.
10. var shortNames = new Array("Sun", "Mon", "Tue",
11. "Wed", "Thu", "Fri", "Sat");
12.
13. var monthNames = ["Jan", "Feb", "Mar", "Apr", "May",
14. "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
15.
16. var days = "31|28|31|30|31|30|31|31|30|31|30|31";
17. var monthDays = days.split("|");
18.
19. var i;
20. document.writeln("<h1>Days of the week:</h1>");
21. for(i = 0; i < longNames.length; i++){
22. document.write(longNames[i] + " ");
Evaluation
23. }
24.
25. document.writeln("<hr />");
26. for(i = 0; i < shortNames.length; i++){
27. document.write(shortNames[i] + " ");
28. }
29. document.writeln("<hr />");
30.
31.
32.
33.
34.
Copy
document.writeln("<h1>Months of the year:</h1>");
for(i = 0; i < monthNames.length; i++){
}
document.write(monthNames[i] + " has ");
document.writeln(monthDays[i] + " days<br />");
Processing Arrays
Evaluation
• The code from the previous page is referenced in the file
named simpleArrays.html, whose output is shown
below.
Copy
Evaluation
• In addition to the length property of an array, there are
many methods defined for an Array object.
Copy
Methods are different from functions, in that a method is called
on an instance of an object, whereas a function is not.
More details of methods will be discussed in the chapter
covering the object-oriented aspect of JavaScript.
Array Methods
Evaluation
• Given an array x, the defined methods and syntax for x
are listed below.
var someArray = x.concat(arg1, arg2, ...);
Copy
• It returns a new array, someArray, which is the result of
concatenating the arg(s), passed as arguments to the
method, to x.
• If one of the arguments being passed is itself an array, its
elements are concatenated, rather than the array itself.
• The method does not modify the original array x.
Evaluation
lastElement that it is deleting.
Copy
appending.
x.reverse();
Array Methods
Evaluation
• Given an array x, the list of defined methods and syntax
for x are continued below.
Copy
var firstElement = x.shift();
x.sort();
Evaluation
var someArray = x.splice(s, cnt, v1, v2,...);
Copy
arguments are inserted in place of the elements being
removed.
• It returns a new array, someArray, of the deleted elements
(if any were deleted).
Array Methods
Evaluation
• Given an array x, the list of defined methods and syntax
for x are continued below.
Copy
var someString = x.toString();
Evaluation
7. print("<dt>" + txt + "</dt>");
8. print("<dd>x = " + x + "</dd>");
9. print("<dd>y = " + y + "</dd>");
10. }
11. print("<dl>");
12. print("<dt>Explicitly calling toString:</dt>");
Copy
13. print("<dd>" + x.toString() + "</dd>");
14. print("<dt>Implicitly calling toString:</dt>");
15. print("<dd>" + x + "</dd>");
16. print("</dl>");
17.
Array Methods
18.
19.
20.
Evaluation
arrayMethods.js continued
print("<hr />");
print("<dl>");
printArrays("Before:");
Copy
21. print("<dt class='red'>x.concat(y):</dt>");
22. print("<dd>" + x.concat(y) + "</dd>");
23. printArrays("After:");
24. print("</dl>");
25.
26. print("<hr />");
27. print("<dl>");
28. printArrays("Before:");
29. print("<dt class='red'>x.sort():</dt>");
30. print("<dd>" + x.sort() + "</dd>");
31. print("<dt class='red'>y.sort():</dt>");
32. print("<dd>" + y.sort() + "</dd>");
33. printArrays("After:");
34. print("</dl>");
35.
36. print("<hr />");
37. print("<dl>");
38. printArrays("Before:");
39. print("<dt class='red'>");
40. print("x.splice(2, 2, 'P', 'Q', 'R'):")
41. print("</dt>");
42. print("<dd>");
43. print(x.splice(2, 2, "P", "Q", "R"));
44. print("</dd>");
45. printArrays("After:");
46. print("</dl>");
Copy
arrayMethods.css to format the output.
Array Methods
Evaluation
• The output from arrayMethods.html is shown below.
Copy
Evaluation
Copy
©2011 /training/etc Inc. REPRODUCTION OF THESE MATERIALS IS PROHIBITED.
6-10
AJAX - JAVASCRIPT AND XML CHAPTER 6: JAVASCRIPT ARRAYS
Associative Arrays
Evaluation
• Associative arrays are arrays whose element indices are
strings rather than numbers.
One of the benefits of an associative array is the ability to
Copy
retrieve its data without the cost of searching the array.
An associative array can be thought of as a collection of
key/value pairs, where the key is unique within the array.
• The keys act as the indices into the array, and each is
associated with a value.
Copy
for(variable in object)
statement(s);
Associative Arrays
2.
3.
Evaluation
statesAndCapitals.js
1. var states = {
"Alabama" : "Montgomery",
"Alaska" : "Juneau",
Copy
4. .
5. .
6. .
7. "Wisconsin" : "Madison",
8. "Wyoming" : "Cheyenne"
9. };
document.writeln("</tbody>");
document.writeln("</table>");
Associative Arrays
Evaluation
• The output of associativeArray.html is shown
below.
The HTML file relies on formatting found in
Copy
associativeArray.css.
Evaluation
Copy
©2011 /training/etc Inc. REPRODUCTION OF THESE MATERIALS IS PROHIBITED.
6-13
AJAX - JAVASCRIPT AND XML CHAPTER 6: JAVASCRIPT ARRAYS
Associative Arrays
Evaluation
• The example on the previous page accessed the array by
supplying the key as the index to the array.
document.write(states["Maryland"]);
Copy
• Another way is to access the value as a property of the
array, where the property name is the key.
document.write(states.Maryland);
Evaluation
Copy
©2011 /training/etc Inc. REPRODUCTION OF THESE MATERIALS IS PROHIBITED.
6-14