Data Types: Arrays and Objects

Transcript

1. Data Types Objects and Arrays Tuesday, September 8, 2009
2. objects collection of properties and methods Tuesday, September 8, 2009
3. creating a new object new Object() Tuesday, September 8, 2009
4. creating a new object (shortcut) {} Tuesday, September 8, 2009
5. different ways to do the same thing var student = new Object(); student.name = 'John Doe'; student.age = 18; var student = {name:'John Doe', age:18}; Tuesday, September 8, 2009
6. keys can be strings var student = {name:'John Doe', age:18}; var student = {'name':'John Doe', 'age':18}; Tuesday, September 8, 2009
7. liberal formatting var student = {name:'John Doe', age:18}; var student = { name:'John Doe', age:18 }; var student = { name : 'John Doe', age : 18 }; Tuesday, September 8, 2009
8. writing properties var student = {}; student.name = 'John Doe'; Tuesday, September 8, 2009
9. write as many as you want var student = {}; student.name = 'John Doe'; student.age = 18; student.gpa = 3.7; Tuesday, September 8, 2009
10. writing properties (shortcut) var student = {name:'John Doe'}; Tuesday, September 8, 2009
11. writing multiple properties var student = {name:'John Doe', age:18, gpa:3.7}; Tuesday, September 8, 2009
12. reading properties var student = {name:'John Doe', age:18}; student.name // "John Doe" student.age // 18 Tuesday, September 8, 2009
13. reading properties (alternative syntax) var student = {name:'John Doe', age:18}; student['name'] // "John Doe" student['age'] // 18 Tuesday, September 8, 2009
14. reading properties that are not set var student = {name:'John Doe', age:18}; student.foobar // undefined Tuesday, September 8, 2009
15. different ways to do the same thing var student = {name:'John Doe', age:18}; student.name // "John Doe" student['name'] // "John Doe" student.age // 18 student['age'] // 18 Tuesday, September 8, 2009
16. methods we’ll cover them later Tuesday, September 8, 2009
17. arrays ordered collection of values Tuesday, September 8, 2009
18. creating an array new Array(); Tuesday, September 8, 2009
19. new Array with no arguments var things = new Array(); things.length; // 0 creates empty array Tuesday, September 8, 2009
20. new Array with one argument var things = new Array(5); things.length; // 5 creates array with number of undefined elements shouldn’t ever need to do this, but be aware Tuesday, September 8, 2009
21. new Array with multiple arguments creates array with each argument as element in array var things = new Array(1,2,3); things.length; // 3 Tuesday, September 8, 2009
22. summary Tuesday, September 8, 2009
23. creating an array (shortcut) [] Tuesday, September 8, 2009
24. much more predictable Tuesday, September 8, 2009
25. array methods Tuesday, September 8, 2009
26. remember how strings are zero indexed? var car = "car"; car[0] // c car[1] // a car[2] // r Tuesday, September 8, 2009
27. arrays are too var car = ['c', 'a', 'r']; car[0] // c car[1] // a car[2] // r Tuesday, September 8, 2009
28. array of numbers var things = [1,2,3,4,5]; things[0] // 1 things[1] // 2 things[2] // 3 things[3] // 4 things[4] // 5 things[5] // undefined Tuesday, September 8, 2009
29. remember how strings know their length? var football = "football"; football.length // 8 Tuesday, September 8, 2009
30. arrays do too var things = [1,2,3,4,5]; things.length // 5 http://www.w3schools.com/jsref/jsref_length_array.asp Tuesday, September 8, 2009
31. remember how strings can get the indexOf stuff? var football = "football"; football.indexOf('f') // 0 football.indexOf('o') // 1 football.indexOf('foot') // 0 football.indexOf('z') // -1 Tuesday, September 8, 2009
32. arrays can too var car = ['c','a','r']; car.indexOf('c'); // 0 car.indexOf('a'); // 1 car.indexOf('r'); // 2 car.indexOf('b'); // -1 Tuesday, September 8, 2009
33. more indexOf examples var strings = ['aa', 'b', 'ccD']; strings.indexOf('aa') // 0 strings.indexOf('ccD') // 2 strings.indexOf('ccd') // -1 Tuesday, September 8, 2009
34. arrays can be multi-dimensional var multi = ['a', 'b', ['z', 'y']]; multi[0] // 'a' multi[1] // 'b' multi[2] // ['z', 'y'] multi[2][0] // 'z' multi[2][1] // 'y' multi[2].length // 2 Tuesday, September 8, 2009
35. concat returns joined arrays but does not alter them http://www.w3schools.com/jsref/jsref_concat_array.asp Tuesday, September 8, 2009
36. concat of a and b var a = [1,2]; var b = [3,4]; var c = a.concat(b); // a is still [1,2] // b is still [3,4] // c is now [1,2,3,4] Tuesday, September 8, 2009
37. concat of b and a var a = [1,2]; var b = [3,4]; var c = b.concat(a); // a is still [1,2] // b is still [3,4] // c is now [3,4,1,2] Tuesday, September 8, 2009
38. concat with multi-dimensional var multi = ['a', 'b', ['z', 'y']]; multi.concat([1, 2]) // ['a', 'b', ['z','y'], '1', '2'] Tuesday, September 8, 2009
39. join joins the elements of an array into a string separated by a delimiter http://www.w3schools.com/jsref/jsref_join.asp Tuesday, September 8, 2009
40. join var car_letters = ['c', 'a', 'r']; car_letters.join(''); // "car" Tuesday, September 8, 2009
41. join with delimiter var car_letters = ['c', 'a', 'r']; car_letters.join(','); // "c,a,r" Tuesday, September 8, 2009
42. delimiter can be any string var car_letters = ['c', 'a', 'r']; car_letters.join('WIN'); // "cWINaWINr" Tuesday, September 8, 2009
43. date example var date = [9, 8, 2009] date.join('/'); // "9/8/2009" Tuesday, September 8, 2009
44. string has the opposite of join called split var date = "9/8/2009" date.split('/') // [‘9’,‘8’,‘2009’] Tuesday, September 8, 2009
45. split/join allow for switching back and forth var date = "9/8/2009"; var date_array = date.split('/') // [‘9’,‘8’,‘2009’] var date_string = date_array.join('/'); // “9/8/2009” Tuesday, September 8, 2009
46. reverse reverses the order of an array http://www.w3schools.com/jsref/jsref_reverse.asp Tuesday, September 8, 2009
47. reverse var car = ['r', 'a', 'c']; car.reverse(); // ['c', 'a', 'r'] Tuesday, September 8, 2009
48. sort sorts the elements of an array http://www.w3schools.com/jsref/jsref_sort.asp Tuesday, September 8, 2009
49. sorting numbers var numbers = [5,3,99,77,2]; numbers.sort(); // [2,3,5,77,99] Tuesday, September 8, 2009
50. sorting strings var names = ['John', 'Steph', 'Steve', 'Carrie']; names.sort(); // ['Carrie','John','Steph','Steve'] Tuesday, September 8, 2009
51. upper case before lower case var letters = ['a', 'B', 'c', 'D']; letters.sort(); // ['B','D','a','c'] Tuesday, September 8, 2009
52. pop removes and returns the last element of an array (opposite of shift) http://www.w3schools.com/jsref/jsref_pop.asp Tuesday, September 8, 2009
53. pop var car = ['c', 'a', 'r']; var last = car.pop(); last // 'r' car // ['c','a'] Tuesday, September 8, 2009
54. pop var car = ['c', 'a', 'r']; car.pop(); // 'r' car.pop(); // 'a' car.pop(); // 'c' car.pop(); // undefined car.length // 0 Tuesday, September 8, 2009
55. shift removes and returns the first element of an array (opposite of pop) http://www.w3schools.com/jsref/jsref_shift.asp Tuesday, September 8, 2009
56. shift var car = ['c', 'a', 'r']; var first = car.shift(); first // 'c' car // ['a','r'] Tuesday, September 8, 2009
57. shift var car = ['c', 'a', 'r']; car.shift(); // 'c' car.shift(); // 'a' car.shift(); // 'r' car.shift(); // undefined car.length // 0 Tuesday, September 8, 2009
58. push adds one or more elements to the end of an array and returns the new length (opposite of unshift) http://www.w3schools.com/jsref/jsref_push.asp Tuesday, September 8, 2009
59. push single element var car = ['c','a','r']; car.push('d'); // 4 car // ['c','a','r','d'] Tuesday, September 8, 2009
60. push multiple elements var car = ['c','a','r']; car.push('d', 'e', 'd'); // 6 car // ['c','a','r','d', 'e', 'd'] Tuesday, September 8, 2009
61. unshift adds one or more elements to the beginning of the array and returns the new length (opposite of push) http://www.w3schools.com/jsref/jsref_unshift.asp Tuesday, September 8, 2009
62. unshift single element var car = ['c','a','r']; car.unshift('s'); // 4 car // ['s','c','a','r'] Tuesday, September 8, 2009
63. unshift multiple elements var car = ['c','a','r']; car.unshift('o', 's'); // 5 car // ['o','s','c','a','r'] Tuesday, September 8, 2009
64. shift/unshift pop/push end of array beginning of array Tuesday, September 8, 2009
65. slice slices elements out of an array without changing array Tuesday, September 8, 2009
66. slice parameters array.slice(starting position, index after last position) Tuesday, September 8, 2009
67. slice with one argument var numbers = [1,2,3,4]; numbers.slice(2); // [3, 4] numbers // [1,2,3,4] slices from index to end of array Tuesday, September 8, 2009
68. slice with two arguments slices from beginning index to index before second argument var numbers = [1,2,3,4]; numbers.slice(0, 2); // [1, 2] numbers // [1,2,3,4] Tuesday, September 8, 2009
69. slice with negative second argument var numbers = [1,2,3,4]; numbers.slice(1, -1); // [2, 3] numbers.slice(1, -2); // [2] numbers // [1,2,3,4] negative starts from end and goes backwards Tuesday, September 8, 2009
70. splice adds and removes elements from an array http://www.w3schools.com/jsref/jsref_splice.asp Tuesday, September 8, 2009
71. splice parameters array.splice(index, how many to remove, elements to add) index and how many to remove are required Tuesday, September 8, 2009
72. removing an element from an array var letters = ['a', 'c', 'd']; letters.splice(1, 1); // 'c' letters // ['a','d'] in english: at index 1, remove 1 element Tuesday, September 8, 2009
73. removing multiple elements from an array var letters = ['a', 'c', 'd']; letters.splice(1, 2); // ['c','d'] letters // ['a'] in english: at index 1, remove 2 elements Tuesday, September 8, 2009
74. adding an element to an array var letters = ['a', 'c', 'd']; letters.splice(1, 0, 'b'); // ['a', 'b', 'c', 'd'] in english: at index 1, remove 0 elements, add ‘b’ Tuesday, September 8, 2009
75. adding multiple elements to an array in english: at index 1, remove 0 elements, add ‘b’ and ‘c’ var letters = ['a', 'c', 'd']; letters.splice(1, 0, 'b', 'c'); letters // ['a','b','c','c','d'] Tuesday, September 8, 2009
76. replacing elements in an array var car = ['c', 'a', 'r']; car.splice(0, 1, 'b'); // 'c' car // ['b','a','r'] Tuesday, September 8, 2009
77. var person = {name:'John Doe'}; person.name Tuesday, September 8, 2009
78. var person = {name:'John Doe'}; person.name 'John Doe' Tuesday, September 8, 2009
79. var person = {name:'John Doe'}; person.name = 'Jane Doe'; person.name Tuesday, September 8, 2009
80. var person = {name:'John Doe'}; person.name = 'Jane Doe'; person.name 'Jane Doe' Tuesday, September 8, 2009
81. var person = {name:'John Doe'}; person['name'] Tuesday, September 8, 2009
82. var person = {name:'John Doe'}; person['name'] 'John Doe' Tuesday, September 8, 2009
83. [12, 23, 36].length Tuesday, September 8, 2009
84. [12, 23, 36].length 3 Tuesday, September 8, 2009
85. [12, 23, 36].indexOf(12) Tuesday, September 8, 2009
86. [12, 23, 36].indexOf(12) 0 Tuesday, September 8, 2009
87. [12, 23, 36].indexOf(35) Tuesday, September 8, 2009
88. [12, 23, 36].indexOf(35) -1 Tuesday, September 8, 2009
89. ['b','a','t'].join('') Tuesday, September 8, 2009
90. ['b','a','t'].join('') 'bat' Tuesday, September 8, 2009
91. '9/8/2009'.split('/') Tuesday, September 8, 2009
92. '9/8/2009'.split('/') ['9', '8', '2009'] Tuesday, September 8, 2009
93. var numbers = [1,2,3]; numbers.push(4) numbers Tuesday, September 8, 2009
94. var numbers = [1,2,3]; numbers.push(4) numbers [1,2,3,4] Tuesday, September 8, 2009
95. var numbers = [1,2,3,4]; numbers.shift(); numbers Tuesday, September 8, 2009
96. var numbers = [1,2,3,4]; numbers.shift(); numbers [2,3,4] Tuesday, September 8, 2009
97. var numbers = [2,3,4]; numbers.unshift(1); numbers Tuesday, September 8, 2009
98. var numbers = [2,3,4]; numbers.unshift(1); numbers [1,2,3,4] Tuesday, September 8, 2009
99. var numbers = [2,3,4]; numbers.pop(); numbers Tuesday, September 8, 2009
100. var numbers = [2,3,4]; numbers.pop(); numbers [2,3] Tuesday, September 8, 2009
101. var numbers = [2,3,4]; numbers.splice(1, 0, 1); numbers Tuesday, September 8, 2009
102. var numbers = [2,3,4]; numbers.splice(1, 0, 1); numbers [2,1,3,4] Tuesday, September 8, 2009
103. var numbers = [2,3,4]; numbers.splice(0, 1, 1); numbers Tuesday, September 8, 2009
104. var numbers = [2,3,4]; numbers.splice(0, 1, 1); numbers [1,3,4] Tuesday, September 8, 2009