Data Types: Arrays And Objects
-
Upload
john-nunemaker -
Category
Technology
-
view
1.844 -
download
0
description
Transcript of Data Types: Arrays And Objects
Data TypesObjects and Arrays
Tuesday, September 8, 2009
objectscollection 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, 2009
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
keys can be strings
var student = {name:'John Doe', age:18};
var student = {'name':'John Doe', 'age':18};
Tuesday, September 8, 2009
liberal formattingvar student = {name:'John Doe', age:18};
var student = { name:'John Doe', age:18};
var student = { name : 'John Doe', age : 18};
Tuesday, September 8, 2009
writing properties
var student = {};student.name = 'John Doe';
Tuesday, September 8, 2009
write as manyas you want
var student = {};student.name = 'John Doe';student.age = 18;student.gpa = 3.7;
Tuesday, September 8, 2009
writing properties(shortcut)
var student = {name:'John Doe'};
Tuesday, September 8, 2009
writing multiple properties
var student = {name:'John Doe', age:18, gpa:3.7};
Tuesday, September 8, 2009
reading properties
var student = {name:'John Doe', age:18};
student.name // "John Doe"student.age // 18
Tuesday, September 8, 2009
reading properties(alternative syntax)
var student = {name:'John Doe', age:18};
student['name'] // "John Doe"student['age'] // 18
Tuesday, September 8, 2009
reading properties that are not set
var student = {name:'John Doe', age:18};
student.foobar // undefined
Tuesday, September 8, 2009
different ways to dothe same thing
var student = {name:'John Doe', age:18};
student.name // "John Doe"student['name'] // "John Doe"
student.age // 18student['age'] // 18
Tuesday, September 8, 2009
methodswe’ll cover them later
Tuesday, September 8, 2009
arraysordered 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();things.length; // 0creates empty array
Tuesday, September 8, 2009
new Arraywith one argument
var things = new Array(5);things.length; // 5
creates array with number of undefined elementsshouldn’t ever need to do this, but be aware
Tuesday, September 8, 2009
new Arraywith 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
summary
Tuesday, September 8, 2009
creating an array(shortcut)
[]
Tuesday, September 8, 2009
much more predictable
Tuesday, September 8, 2009
array methods
Tuesday, September 8, 2009
remember how stringsare zero indexed?
var car = "car";car[0] // ccar[1] // acar[2] // r
Tuesday, September 8, 2009
arrays are too
var car = ['c', 'a', 'r'];car[0] // ccar[1] // acar[2] // r
Tuesday, September 8, 2009
array of numbers
var things = [1,2,3,4,5];
things[0] // 1things[1] // 2things[2] // 3things[3] // 4things[4] // 5things[5] // undefined
Tuesday, September 8, 2009
remember how strings know their length?
var football = "football";football.length // 8
Tuesday, September 8, 2009
arrays do too
var things = [1,2,3,4,5];things.length // 5http://www.w3schools.com/jsref/jsref_length_array.asp
Tuesday, September 8, 2009
remember how strings can get the indexOf stuff?
var football = "football";football.indexOf('f') // 0football.indexOf('o') // 1football.indexOf('foot') // 0football.indexOf('z') // -1
Tuesday, September 8, 2009
arrays can too
var car = ['c','a','r'];car.indexOf('c'); // 0car.indexOf('a'); // 1car.indexOf('r'); // 2car.indexOf('b'); // -1
Tuesday, September 8, 2009
more indexOf examples
var strings = ['aa', 'b', 'ccD'];strings.indexOf('aa') // 0strings.indexOf('ccD') // 2strings.indexOf('ccd') // -1
Tuesday, September 8, 2009
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
concatreturns joined arrays but does not alter them
http://www.w3schools.com/jsref/jsref_concat_array.asp
Tuesday, September 8, 2009
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
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
concat with multi-dimensional
var multi = ['a', 'b', ['z', 'y']];multi.concat([1, 2]) // ['a', 'b', ['z','y'], '1', '2']
Tuesday, September 8, 2009
joinjoins the elements of an array
into a string separated by a delimiter
http://www.w3schools.com/jsref/jsref_join.asp
Tuesday, September 8, 2009
join
var car_letters = ['c', 'a', 'r'];car_letters.join(''); // "car"
Tuesday, September 8, 2009
join with delimiter
var car_letters = ['c', 'a', 'r'];car_letters.join(','); // "c,a,r"
Tuesday, September 8, 2009
delimiter can be any string
var car_letters = ['c', 'a', 'r'];car_letters.join('WIN'); // "cWINaWINr"
Tuesday, September 8, 2009
date example
var date = [9, 8, 2009]date.join('/'); // "9/8/2009"
Tuesday, September 8, 2009
string has the opposite of join called split
var date = "9/8/2009"date.split('/') // [‘9’,‘8’,‘2009’]
Tuesday, September 8, 2009
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
reversereverses the order of an array
http://www.w3schools.com/jsref/jsref_reverse.asp
Tuesday, September 8, 2009
reverse
var car = ['r', 'a', 'c'];car.reverse(); // ['c', 'a', 'r']
Tuesday, September 8, 2009
sortsorts the elements of an array
http://www.w3schools.com/jsref/jsref_sort.asp
Tuesday, September 8, 2009
sorting numbers
var numbers = [5,3,99,77,2];numbers.sort(); // [2,3,5,77,99]
Tuesday, September 8, 2009
sorting strings
var names = ['John', 'Steph', 'Steve', 'Carrie'];names.sort(); // ['Carrie','John','Steph','Steve']
Tuesday, September 8, 2009
upper case before lower case
var letters = ['a', 'B', 'c', 'D'];letters.sort(); // ['B','D','a','c']
Tuesday, September 8, 2009
popremoves and returns the last element of an array
(opposite of shift)
http://www.w3schools.com/jsref/jsref_pop.asp
Tuesday, September 8, 2009
pop
var car = ['c', 'a', 'r'];var last = car.pop();last // 'r'car // ['c','a']
Tuesday, September 8, 2009
pop
var car = ['c', 'a', 'r'];car.pop(); // 'r'car.pop(); // 'a'car.pop(); // 'c'car.pop(); // undefinedcar.length // 0
Tuesday, September 8, 2009
shiftremoves and returns the first element of an array
(opposite of pop)
http://www.w3schools.com/jsref/jsref_shift.asp
Tuesday, September 8, 2009
shift
var car = ['c', 'a', 'r'];var first = car.shift();first // 'c'car // ['a','r']
Tuesday, September 8, 2009
shift
var car = ['c', 'a', 'r'];car.shift(); // 'c'car.shift(); // 'a'car.shift(); // 'r'car.shift(); // undefinedcar.length // 0
Tuesday, September 8, 2009
pushadds 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
push single element
var car = ['c','a','r'];car.push('d'); // 4car // ['c','a','r','d']
Tuesday, September 8, 2009
push multiple elements
var car = ['c','a','r'];car.push('d', 'e', 'd'); // 6car // ['c','a','r','d', 'e', 'd']
Tuesday, September 8, 2009
unshiftadds 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
unshift single element
var car = ['c','a','r'];car.unshift('s'); // 4car // ['s','c','a','r']
Tuesday, September 8, 2009
unshift multiple elements
var car = ['c','a','r'];car.unshift('o', 's'); // 5car // ['o','s','c','a','r']
Tuesday, September 8, 2009
shift/unshift pop/pushend of arraybeginning of array
Tuesday, September 8, 2009
sliceslices elements out of an array without changing array
Tuesday, September 8, 2009
slice parametersarray.slice(starting position, index after last position)
Tuesday, September 8, 2009
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
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
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
spliceadds and removes elements from an array
http://www.w3schools.com/jsref/jsref_splice.asp
Tuesday, September 8, 2009
splice parametersarray.splice(index, how many to remove, elements to add)
index and how many to remove are required
Tuesday, September 8, 2009
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
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
adding an elementto 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
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
replacing elements in an array
var car = ['c', 'a', 'r'];car.splice(0, 1, 'b'); // 'c'car // ['b','a','r']
Tuesday, September 8, 2009
var person = {name:'John Doe'};person.name
Tuesday, September 8, 2009
var person = {name:'John Doe'};person.name'John Doe'
Tuesday, September 8, 2009
var person = {name:'John Doe'};person.name = 'Jane Doe';person.name
Tuesday, September 8, 2009
var person = {name:'John Doe'};person.name = 'Jane Doe';person.name'Jane Doe'
Tuesday, September 8, 2009
var person = {name:'John Doe'};person['name']
Tuesday, September 8, 2009
var person = {name:'John Doe'};person['name']'John Doe'
Tuesday, September 8, 2009
[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, September 8, 2009
var numbers = [1,2,3];numbers.push(4)numbers[1,2,3,4]
Tuesday, September 8, 2009
var numbers = [1,2,3,4];numbers.shift();numbers
Tuesday, September 8, 2009
var numbers = [1,2,3,4];numbers.shift();numbers[2,3,4]
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.unshift(1);numbers
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.unshift(1);numbers [1,2,3,4]
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.pop();numbers
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.pop();numbers [2,3]
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.splice(1, 0, 1);numbers
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.splice(1, 0, 1);numbers[2,1,3,4]
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.splice(0, 1, 1);numbers
Tuesday, September 8, 2009
var numbers = [2,3,4];numbers.splice(0, 1, 1);numbers[1,3,4]
Tuesday, September 8, 2009