Data Types: Arrays And Objects

1,566 views

Published on

Introduction to objects and arrays in JavaScript.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,566
On SlideShare
0
From Embeds
0
Number of Embeds
321
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Data Types: Arrays And Objects

  1. 1. Data Types Objects and Arrays Tuesday, September 8, 2009
  2. 2. objects collection of properties and methods Tuesday, September 8, 2009
  3. 3. creating a new object new Object() Tuesday, September 8, 2009
  4. 4. creating a new object (shortcut) {} Tuesday, September 8, 2009
  5. 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. 6. keys can be strings var student = {name:'John Doe', age:18}; var student = {'name':'John Doe', 'age':18}; Tuesday, September 8, 2009
  7. 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. 8. writing properties var student = {}; student.name = 'John Doe'; Tuesday, September 8, 2009
  9. 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. 10. writing properties (shortcut) var student = {name:'John Doe'}; Tuesday, September 8, 2009
  11. 11. writing multiple properties var student = {name:'John Doe', age:18, gpa:3.7}; Tuesday, September 8, 2009
  12. 12. reading properties var student = {name:'John Doe', age:18}; student.name // "John Doe" student.age // 18 Tuesday, September 8, 2009
  13. 13. reading properties (alternative syntax) var student = {name:'John Doe', age:18}; student['name'] // "John Doe" student['age'] // 18 Tuesday, September 8, 2009
  14. 14. reading properties that are not set var student = {name:'John Doe', age:18}; student.foobar // undefined Tuesday, September 8, 2009
  15. 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. 16. methods we’ll cover them later Tuesday, September 8, 2009
  17. 17. arrays ordered collection of values Tuesday, September 8, 2009
  18. 18. creating an array new Array(); Tuesday, September 8, 2009
  19. 19. new Array with no arguments var things = new Array(); things.length; // 0 creates empty array Tuesday, September 8, 2009
  20. 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. 21. new Array with multiple arguments var things = new Array(1,2,3); things.length; // 3 creates array with each argument as element in array Tuesday, September 8, 2009
  22. 22. summary Tuesday, September 8, 2009
  23. 23. creating an array (shortcut) [] Tuesday, September 8, 2009
  24. 24. much more predictable Tuesday, September 8, 2009
  25. 25. array methods Tuesday, September 8, 2009
  26. 26. remember how strings are zero indexed? var car = "car"; car[0] // c car[1] // a car[2] // r Tuesday, September 8, 2009
  27. 27. arrays are too var car = ['c', 'a', 'r']; car[0] // c car[1] // a car[2] // r Tuesday, September 8, 2009
  28. 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. 29. remember how strings know their length? var football = "football"; football.length // 8 Tuesday, September 8, 2009
  30. 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. 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. 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. 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. 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. 35. concat returns joined arrays but does not alter them http://www.w3schools.com/jsref/jsref_concat_array.asp Tuesday, September 8, 2009
  36. 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. 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. 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. 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. 40. join var car_letters = ['c', 'a', 'r']; car_letters.join(''); // "car" Tuesday, September 8, 2009
  41. 41. join with delimiter var car_letters = ['c', 'a', 'r']; car_letters.join(','); // "c,a,r" Tuesday, September 8, 2009
  42. 42. delimiter can be any string var car_letters = ['c', 'a', 'r']; car_letters.join('WIN'); // "cWINaWINr" Tuesday, September 8, 2009
  43. 43. date example var date = [9, 8, 2009] date.join('/'); // "9/8/2009" Tuesday, September 8, 2009
  44. 44. string has the opposite of join called split var date = "9/8/2009" date.split('/') // [‘9’,‘8’,‘2009’] Tuesday, September 8, 2009
  45. 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. 46. reverse reverses the order of an array http://www.w3schools.com/jsref/jsref_reverse.asp Tuesday, September 8, 2009
  47. 47. reverse var car = ['r', 'a', 'c']; car.reverse(); // ['c', 'a', 'r'] Tuesday, September 8, 2009
  48. 48. sort sorts the elements of an array http://www.w3schools.com/jsref/jsref_sort.asp Tuesday, September 8, 2009
  49. 49. sorting numbers var numbers = [5,3,99,77,2]; numbers.sort(); // [2,3,5,77,99] Tuesday, September 8, 2009
  50. 50. sorting strings var names = ['John', 'Steph', 'Steve', 'Carrie']; names.sort(); // ['Carrie','John','Steph','Steve'] Tuesday, September 8, 2009
  51. 51. upper case before lower case var letters = ['a', 'B', 'c', 'D']; letters.sort(); // ['B','D','a','c'] Tuesday, September 8, 2009
  52. 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. 53. pop var car = ['c', 'a', 'r']; var last = car.pop(); last // 'r' car // ['c','a'] Tuesday, September 8, 2009
  54. 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. 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. 56. shift var car = ['c', 'a', 'r']; var first = car.shift(); first // 'c' car // ['a','r'] Tuesday, September 8, 2009
  57. 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. 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. 59. push single element var car = ['c','a','r']; car.push('d'); // 4 car // ['c','a','r','d'] Tuesday, September 8, 2009
  60. 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. 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. 62. unshift single element var car = ['c','a','r']; car.unshift('s'); // 4 car // ['s','c','a','r'] Tuesday, September 8, 2009
  63. 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. 64. shift/unshift pop/push beginning of array end of array Tuesday, September 8, 2009
  65. 65. slice slices elements out of an array without changing array Tuesday, September 8, 2009
  66. 66. slice parameters array.slice(starting position, index after last position) Tuesday, September 8, 2009
  67. 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. 68. slice with two arguments var numbers = [1,2,3,4]; numbers.slice(0, 2); // [1, 2] numbers // [1,2,3,4] slices from beginning index to index before second argument Tuesday, September 8, 2009
  69. 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. 70. splice adds and removes elements from an array http://www.w3schools.com/jsref/jsref_splice.asp Tuesday, September 8, 2009
  71. 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. 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. 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. 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. 75. adding multiple elements to an array var letters = ['a', 'c', 'd']; letters.splice(1, 0, 'b', 'c'); letters // ['a','b','c','c','d'] in english: at index 1, remove 0 elements, add ‘b’ and ‘c’ Tuesday, September 8, 2009
  76. 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. 77. var person = {name:'John Doe'}; person.name Tuesday, September 8, 2009
  78. 78. var person = {name:'John Doe'}; person.name 'John Doe' Tuesday, September 8, 2009
  79. 79. var person = {name:'John Doe'}; person.name = 'Jane Doe'; person.name Tuesday, September 8, 2009
  80. 80. var person = {name:'John Doe'}; person.name = 'Jane Doe'; person.name 'Jane Doe' Tuesday, September 8, 2009
  81. 81. var person = {name:'John Doe'}; person['name'] Tuesday, September 8, 2009
  82. 82. var person = {name:'John Doe'}; person['name'] 'John Doe' Tuesday, September 8, 2009
  83. 83. [12, 23, 36].length Tuesday, September 8, 2009
  84. 84. [12, 23, 36].length 3 Tuesday, September 8, 2009
  85. 85. [12, 23, 36].indexOf(12) Tuesday, September 8, 2009
  86. 86. [12, 23, 36].indexOf(12) 0 Tuesday, September 8, 2009
  87. 87. [12, 23, 36].indexOf(35) Tuesday, September 8, 2009
  88. 88. [12, 23, 36].indexOf(35) -1 Tuesday, September 8, 2009
  89. 89. ['b','a','t'].join('') Tuesday, September 8, 2009
  90. 90. ['b','a','t'].join('') 'bat' Tuesday, September 8, 2009
  91. 91. '9/8/2009'.split('/') Tuesday, September 8, 2009
  92. 92. '9/8/2009'.split('/') ['9', '8', '2009'] Tuesday, September 8, 2009
  93. 93. var numbers = [1,2,3]; numbers.push(4) numbers Tuesday, September 8, 2009
  94. 94. var numbers = [1,2,3]; numbers.push(4) numbers [1,2,3,4] Tuesday, September 8, 2009
  95. 95. var numbers = [1,2,3,4]; numbers.shift(); numbers Tuesday, September 8, 2009
  96. 96. var numbers = [1,2,3,4]; numbers.shift(); numbers [2,3,4] Tuesday, September 8, 2009
  97. 97. var numbers = [2,3,4]; numbers.unshift(1); numbers Tuesday, September 8, 2009
  98. 98. var numbers = [2,3,4]; numbers.unshift(1); numbers [1,2,3,4] Tuesday, September 8, 2009
  99. 99. var numbers = [2,3,4]; numbers.pop(); numbers Tuesday, September 8, 2009
  100. 100. var numbers = [2,3,4]; numbers.pop(); numbers [2,3] Tuesday, September 8, 2009
  101. 101. var numbers = [2,3,4]; numbers.splice(1, 0, 1); numbers Tuesday, September 8, 2009
  102. 102. var numbers = [2,3,4]; numbers.splice(1, 0, 1); numbers [2,1,3,4] Tuesday, September 8, 2009
  103. 103. var numbers = [2,3,4]; numbers.splice(0, 1, 1); numbers Tuesday, September 8, 2009
  104. 104. var numbers = [2,3,4]; numbers.splice(0, 1, 1); numbers [1,3,4] Tuesday, September 8, 2009

×