0
Data Types
                              Objects and Arrays




Tuesday, September 8, 2009
objects
                             collection of properties and methods




Tuesday, September 8, 2009
creating a new object


                             new Object()




Tuesday, September 8, 2009
creating a new object
                             (shortcut)

                                {}




Tuesday, September 8...
different ways to do
                                the same thing
           var student = new Object();
           stud...
keys can be strings

    var student = {name:'John Doe', age:18};

    var student = {'name':'John Doe', 'age':18};




Tu...
liberal formatting
           var student = {name:'John Doe', age:18};

           var student = {
              name:'Joh...
writing properties

                             var student = {};
                             student.name = 'John Doe';...
write as many
                                as you want
                             var student = {};
                 ...
writing properties
                                 (shortcut)
                         var student = {name:'John Doe'};

...
writing multiple
                               properties
  var student = {name:'John Doe', age:18, gpa:3.7};




Tuesday...
reading properties

           var student = {name:'John Doe', age:18};

           student.name           // "John Doe"
 ...
reading properties
                             (alternative syntax)
          var student = {name:'John Doe', age:18};

 ...
reading properties
                              that are not set
           var student = {name:'John Doe', age:18};

   ...
different ways to do
                                the same thing
           var student = {name:'John Doe', age:18};

 ...
methods
                             we’ll cover them later




Tuesday, September 8, 2009
arrays
                             ordered collection of values




Tuesday, September 8, 2009
creating an array


                                 new Array();




Tuesday, September 8, 2009
new Array
                             with no arguments

                              var things = new Array();
        ...
new Array
                             with one argument
              var things = new Array(5);
              things.len...
new Array
               with multiple arguments
                             var things = new Array(1,2,3);
             ...
summary




Tuesday, September 8, 2009
creating an array
                                (shortcut)

                                    []




Tuesday, Septembe...
much more predictable




Tuesday, September 8, 2009
array methods



Tuesday, September 8, 2009
remember how strings
                     are zero indexed?
                             var car =   "car";
              ...
arrays are too

                             var car =   ['c', 'a', 'r'];
                             car[0] //   c
     ...
array of numbers
                             var things = [1,2,3,4,5];

                             things[0]   //   1
 ...
remember how strings
                     know their length?
                             var football = "football";
     ...
arrays do too

                             var things = [1,2,3,4,5];
                             things.length // 5
    ...
remember how strings can
          get the indexOf stuff?
                             var football = "football";
        ...
arrays can too
                             var car = ['c','a','r'];
                             car.indexOf('c'); // 0
 ...
more indexOf
                              examples
                       var strings = ['aa', 'b',   'ccD'];
           ...
arrays can be
                             multi-dimensional
                    var multi = ['a', 'b', ['z', 'y']];
     ...
concat
                             returns joined arrays but does not alter them
                                 http://...
concat of a and b
                              var a = [1,2];
                              var b = [3,4];

             ...
concat of b and a
                              var a = [1,2];
                              var b = [3,4];

             ...
concat with
                             multi-dimensional
 var multi = ['a', 'b', ['z', 'y']];
 multi.concat([1, 2]) // [...
join
                                 joins the elements of an array
                             into a string separated ...
join

                  var car_letters = ['c', 'a', 'r'];
                  car_letters.join(''); // "car"




Tuesday, S...
join with delimiter

                    var car_letters = ['c', 'a', 'r'];
                    car_letters.join(','); // ...
delimiter can be any string

           var car_letters = ['c', 'a', 'r'];
           car_letters.join('WIN'); // "cWINaWI...
date example

                             var date = [9, 8, 2009]
                             date.join('/'); // "9/8/20...
string has the opposite
                      of join called split
                    var date = "9/8/2009"
             ...
split/join allow for
              switching back and forth

    var date = "9/8/2009";
    var date_array = date.split('/...
reverse
                               reverses the order of an array
                             http://www.w3schools.co...
reverse

                       var car = ['r', 'a', 'c'];
                       car.reverse(); // ['c', 'a', 'r']




Tu...
sort
                             sorts the elements of an array
                             http://www.w3schools.com/jsr...
sorting numbers

                         var numbers = [5,3,99,77,2];
                         numbers.sort(); // [2,3,5,...
sorting strings

        var names = ['John', 'Steph', 'Steve', 'Carrie'];
        names.sort(); // ['Carrie','John','Step...
upper case before
                                lower case

                 var letters = ['a', 'B', 'c', 'D'];
       ...
pop
                        removes and returns the last element of an array
                                      (opposi...
pop

                             var car = ['c', 'a', 'r'];
                             var last = car.pop();
          ...
pop
                             var car = ['c', 'a', 'r'];
                             car.pop(); // 'r'
               ...
shift
                       removes and returns the first element of an array
                                      (oppos...
shift

                             var car = ['c', 'a', 'r'];
                             var first = car.shift();
     ...
shift
                             var car = ['c',   'a', 'r'];
                             car.shift(); //   'c'
       ...
push
                             adds one or more elements to the end of
                               an array and retu...
push single element

                              var car = ['c','a','r'];
                              car.push('d'); /...
push multiple elements

                      var car = ['c','a','r'];
                      car.push('d', 'e', 'd'); // 6...
unshift
                     adds one or more elements to the beginning of the
                     array and returns the ...
unshift single element

                             var car = ['c','a','r'];
                             car.unshift('s'...
unshift multiple
                                 elements
                             var car = ['c','a','r'];
         ...
shift/unshift               pop/push
                  beginning of array    end of array




Tuesday, September 8, 2009
slice
                  slices elements out of an array without changing array




Tuesday, September 8, 2009
slice parameters
               array.slice(starting position, index after last position)




Tuesday, September 8, 2009
slice with one argument

                             var numbers = [1,2,3,4];
                             numbers.slice(...
slice with two
                                     arguments
                             var numbers = [1,2,3,4];
      ...
slice with negative
                              second argument
                             var numbers = [1,2,3,4];
  ...
splice
                             adds and removes elements from an array
                                 http://www.w3...
splice parameters
                array.splice(index, how many to remove, elements to add)


                    index and...
removing an element
                           from an array
                             var letters = ['a', 'c', 'd'];
 ...
removing multiple
                  elements from an array
                   var letters = ['a', 'c', 'd'];
             ...
adding an element
                                to an array

        var letters = ['a', 'c', 'd'];
        letters.spli...
adding multiple
                         elements to an array
                  var letters = ['a', 'c', 'd'];
           ...
replacing elements
                                 in an array
                             var car = ['c', 'a', 'r'];
  ...
var person = {name:'John Doe'};
                             person.name




Tuesday, September 8, 2009
var person = {name:'John Doe'};
                             person.name
                             'John Doe'




Tuesd...
var person = {name:'John Doe'};
                             person.name = 'Jane Doe';
                             person...
var person = {name:'John Doe'};
                             person.name = 'Jane Doe';
                             person...
var person = {name:'John Doe'};
                             person['name']




Tuesday, September 8, 2009
var person = {name:'John Doe'};
                             person['name']
                             'John Doe'




Tu...
[12, 23, 36].length




Tuesday, September 8, 2009
[12, 23, 36].length

                                     3




Tuesday, September 8, 2009
[12, 23, 36].indexOf(12)




Tuesday, September 8, 2009
[12, 23, 36].indexOf(12)

                                        0




Tuesday, September 8, 2009
[12, 23, 36].indexOf(35)




Tuesday, September 8, 2009
[12, 23, 36].indexOf(35)

                                        -1




Tuesday, September 8, 2009
['b','a','t'].join('')




Tuesday, September 8, 2009
['b','a','t'].join('')

                                     'bat'




Tuesday, September 8, 2009
'9/8/2009'.split('/')




Tuesday, September 8, 2009
'9/8/2009'.split('/')
                              ['9', '8', '2009']




Tuesday, September 8, 2009
var numbers = [1,2,3];
                             numbers.push(4)
                             numbers




Tuesday, Sept...
var numbers = [1,2,3];
                             numbers.push(4)
                             numbers
                 ...
var numbers = [1,2,3,4];
                             numbers.shift();
                             numbers




Tuesday, S...
var numbers = [1,2,3,4];
                             numbers.shift();
                             numbers
              ...
var numbers = [2,3,4];
                             numbers.unshift(1);
                             numbers




Tuesday, ...
var numbers = [2,3,4];
                             numbers.unshift(1);
                             numbers
             ...
var numbers = [2,3,4];
                             numbers.pop();
                             numbers




Tuesday, Septe...
var numbers = [2,3,4];
                             numbers.pop();
                             numbers
                  ...
var numbers = [2,3,4];
                             numbers.splice(1, 0, 1);
                             numbers




Tues...
var numbers = [2,3,4];
                             numbers.splice(1, 0, 1);
                             numbers
        ...
var numbers = [2,3,4];
                             numbers.splice(0, 1, 1);
                             numbers




Tues...
var numbers = [2,3,4];
                             numbers.splice(0, 1, 1);
                             numbers
        ...
Upcoming SlideShare
Loading in...5
×

Data Types: Arrays And Objects

1,246

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,246
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×