1. 对象
对象和字典一样,可以用来存储键/值对。如果你的数据跟对象一样,你可以用对象来查找你想要的值,而不是使用switch或if/else语句。当你知道你的输入数据在某个范围内时,这种查找方式极为有效。
这是一个简单的反向字母表:
var alpha = {
1:"Z",
2:"Y",
3:"X",
4:"W",
...
24:"C",
25:"B",
26:"A"
};
alpha[2]; // "Y"
alpha[24]; // "C"
var value = 2;
alpha[value]; // "Y"
任务
把switch语句转化为一个叫做lookup的对象
// 定义 phoneticLookup
function phoneticLookup(val) {
var result = "";
var lookup = {
alpha :"Adams",
bravo :"Boston",
charlie:"Chicago",
delta :"Denver",
echo :"Easy",
foxtrot:"Frank"
};
result = lookup[val];
return result;
}
phoneticLookup("echo");
有时检查一个对象属性是否存在是非常有用的,我们可以用.hasOwnProperty(propname)
方法来检查对象是否具有该属性。如果有,返回true
,反之返回false
。
举个栗子:
var myObj = {
top : "hat",
bottom : "pants"
};
myObj.hasOwnProperty("top"); //true
myObj.hasOwnProperty("middle"); //false
任务
修改函数checkObj
检查myObj
是否有checkProp
属性,如果属性存在,返回属性对应的值,如果不存在,返回 "Not Found"
。
attention:如果你需要通过变量来访问对象的属性值,请用中括号操作符,点操作符不支持变量。
var myObj = {
gift : "pony",
pet : "kitten",
bed : "sleigh",
};
function checkObj(checkProp){
if (myObj.hasOwnProperty(checkProp)) {
return myObj[checkProp];
}else{
return "Not Found";
}
}
checkObj("pet"); //kitten
JSON
- JSON对象
JavaScript Object Notation简称JSON,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为他允许数据结构是字符串
、数字
、布尔值
和对象
的任意组合。
举个JSON对象的栗子:
var ourMusic = [
{
"artist" : "Dark Punk",
"title" : "Homework",
"release_year" : 1997,
"formats" : [
"CD",
"Cassette",
"LP"
],
"gold" : true
}
];
//这是一个对象数组,并且对象有各种关于专辑的详细信息。它也有一个嵌套的formats的数组。附加专辑记录可以被添加到数组的最上层
Tips:
数组中有多个JSON对象的时候,对象与对象之间要用逗号
隔开。
任务:
添加一个新专辑到 myMusic
的JSON对象。添加 artist
和 title
字符串,release_year
数字和 formats
字符串数组。
var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
},
{
"artist" : "Taylor swift",
"title" : "Fearless",
"release_year":1996,
"formats":[
"CS",
"9T",
"DP"
]
}
];
- 嵌套的JSON对象
举个栗子:
var ourStorage = {
"desk" : {
"drawer" : "stapler",
},
"cabinet" : {
"top drawer" : {
"folder1" : "a file",
"folder2" : "secrets"
},
"bottom drawer" : "soda"
}
}
ourStorage.cabinet["top drawer"].folder1; //a file
ourStorage.desk.drawer; //stapler
任务:
检索JSON对象myStorage
中嵌套属性glove box
的值。因为属性的名字带有空格,请使用[ ]
操作符来访问属性的值。
var myStorage = {
"car" : {
"inside" : {
"glove box" : "maps",
"passenger seat" : "crumbs"
},
"outside" : {
"trunk" : "jack"
}
}
};
var gloveBoxContents = myStorage.car.inside["glove box"];
访问嵌套数组栗子:
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"
任务:
使用点操作符和中括号操作符来检索变量 myPlants
的第二棵树。
var myPlants = [
{
type: "flowers",
list: [
"rose",
"tulip",
"dandelion"
]
},
{
type: "trees",
list: [
"fir",
"pine",
"birch"
]
}
];
var secondTree = myPlants[1].list[1];
综合练习:
下边有一个JSON对象,代表着你的专辑集。每一张专辑由一个唯一的id标识,并具有多种属性。但并非所有的专辑都有完整的信息。
写一个函数,它有三个参数,id
、prop
、value
。
如果value != ''
而且prop != 'tracks'
,collectionCopy[id][prop]=value;
如果 value !=''
而且prop == 'tracks'
,collectionCopy[id][prop].push(value);
。
如果 value == ''
,delete collectionCopy[id][prop];
。
Remember:函数返回的永远是整个对象。
哩–>
// 初始化变量
var collection = {
2548: {
album: "Slippery When Wet",
artist: "Bon Jovi",
tracks: [
"Let It Rock",
"You Give Love a Bad Name"
]
},
2468: {
album: "1999",
artist: "Prince",
tracks: [
"1999",
"Little Red Corvette"
]
},
1245: {
artist: "Robert Palmer",
tracks: [ ]
},
5439: {
album: "ABBA Gold"
}
};
// 深拷贝 collection,用于测试
var collectionCopy = JSON.parse(JSON.stringify(collection));
function update(id, prop, value) {
if(value && prop != 'tracks'){
collectionCopy[id][prop]=value;
}else if(value && prop == 'tracks'){
collectionCopy[id][prop].push(value);
}else{
delete collectionCopy[id][prop];
}
return collection;
}
update(5439, "artist", "ABBA");
220over
240–使用构造函数来创建对象
构造函数通常使用大写字母开头,以便把自己和其它普通函数区别开。
举个栗子:
var Car = function(){
this.wheels = 4;
this.engines = 1;
this.seats = 1;
};
在构造函数中,this
指向被此构造函数创建出来的对象。所以,当我们在构造函数中写:this.wheels = 4;
这时,它所创建出来的新对象
将带有wheels
属性,并赋值为4
.
你可以认为构造函数描述了它所创建出来的对象。
任务:
让你的MotorBike
构造函数描述一个人具有wheels,engines
和seats
属性的对象,并且为这些属性设置值。
var Car = function() {
this.wheels = 4;
this.engines = 1;
this.seats = 1;
};
var MotorBike = function() {
this.wheels = 4;
this.seats = 6;
this.engines = 1;
};
使用构造函数时,我们通过在它前面使用new 关键字
来对它进行调用,如:
var myCar = new Car();
myCar现在成为了Card 一个实例(instance),它被构造函数描述成下面的样子:
{
wheels : 4,
seats : 1,
engines:1
}
记住:要使用new关键字去调用构造函数。因为只有这样,JavaScript才知道这是要去构造一个新对象,并且把构造函数中的this指向做这个新对象。
现在,当myCar(即Car的一个实例)创建后,它可以像普通对象一样被使用,包括创建、访问、修改它的属性等,就像我们使用其它对象一样。如下:
myCar.turboType = "twin";
我们的myCar
变量现在有了一个turoType
属性了,且值为“twin”
。
在编辑器中,使用Car
这个构造函数去创建一个新的实例,并且把这个实例复制给myCar
。然后给myCar
创建一个nickname
属性,且属性值为一个字符串。
var Car = function(){
this.wheels = 4;
this.engines = 1;
this.seats = 1;
};
var myCar = new Car();
myCar.nickn
ame = "zebra";
我们之前写的构造函数hin好,但是我们不想总是创建相同的对象,哦多卡机呢?
为了解决这个问题,我们要向构造函数中添加参数。像下面这样:
var Car = function(wheels, seats, engines) {
this.wheels = wheels;
this.seats = seats;
this.engines = engines;
};
现在,我们可以在调用构造函数时传入一组参数了。
var myCar = new Car(6,3,1);
这段代码将会使用这一组参数来创建出下面的对象:
{
wheels : 6,
seats :3,
engines :1
}
任务:
改动 Car
的 构造函数 ,使它能够通过使用 参数 来为 wheels 、 seats 、 engines
属性进行赋值。
然后调用你刚刚改写过的 构造函数 ,并传入三个 参数 ,我们就能看到创建的新对象赋值给了 myCar
。
var Car = function(wheels,seats,engines) {
this.wheels = wheels;
this.seats = seats;
this.engines = engines;
};
var myCar = new Car(2,6,3);