1. Accessing Objects Properties with Variables
中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时,这种方式极为有用。
这有一个使用变量来访问属性的例子:
var someProp = "propName";
var myObj = {
propName: "Some Value"
}
myObj[someProp]; // "Some Value"
还有更多:
var myDog = "Hunter";
var dogs = {
Fido: "Mutt",
Hunter: "Doberman",
Snoopie: "Beagle"
}
var breed = dogs[myDog];
console.log(breed)// "Doberman"
提示:当我们通过变量名访问属性的时候,不需要给变量名包裹引号。因为实际上我们使用的是变量的值,而不是变量的名称。
2. Add New Properties to a JavaScript Object
你也可以像更改属性一样给对象添加属性。
看看我们是如何给ourDog添加 "bark"属性:
ourDog.bark = "bow-wow";
或者
ourDog["bark"] = "bow-wow";
3. Delete Properties from a JavaScript Object
我们同样可以删除对象的属性,例如:
delete ourDog.bark;
4. Using Objects for Lookups
对象和字典一样,可以用来存储键/值对。如果你的数据跟对象一样,你可以用对象来查找你想要的值,而不是使用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"
5. Testing Objects for Properties(重要)
有时检查一个对象属性是否存在是非常有用的,我们可以用**.hasOwnProperty(propname)**方法来检查对象是否有该属性。如果有返回true,反之返回 false。
举例
var myObj = {
top: "hat",
bottom: "pants"
};
myObj.hasOwnProperty("top"); // true
myObj.hasOwnProperty("middle"); // false
6. Introducing JavaScript Object Notation JSON
JavaScript Object Notation 简称 JSON,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为它允许 数据结构 是 字符串,数字,布尔值,字符串,和 对象 的任意组合。
这里是一个JSON对象的示例:
var ourMusic = [
{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997,
"formats": [
"CD",
"Cassette",
"LP" ],
"gold": true
}
];
这是一个对象数组,并且对象有各种关于专辑的 详细信息。它也有一个嵌套的 formats 的数组。附加专辑记录可以被添加到数组的最上层。
提示
数组中有多个 JSON 对象的时候,对象与对象之间要用逗号隔开。
7. Accessing Nested Objects in JSON
通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性。
下面是一个嵌套的JSON对象:
var ourStorage = {
"desk": {
"drawer": "stapler"
},
"cabinet": {
"top drawer": {
"folder1": "a file",
"folder2": "secrets"
},
"bottom drawer": "soda"
}
}
ourStorage.cabinet["top drawer"].folder2; // "secrets"
ourStorage.desk.drawer; // "stapler"
8. Accessing Nested Arrays in JSON
正如我们在前面的例子所见,JSON对象可以嵌套对象和数组。与访问嵌套对象一样,用中括号操作符同样可以访问嵌套数组。
下面是如何访问嵌套数组的例子:
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"
9. Record Collection
右边有一个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];。
记住:函数返回的永远是整个对象。
10. Iterate with JavaScript For Loops
一个条件语句只能执行一次代码,而一个循环语句可以多次执行代码。
JavaScript 中最常见的循环就是“for循环”。
for循环中的三个表达式用分号隔开:
for ([初始化]; [条件判断]; [计数器])
初始化语句只会在执行循环开始之前执行一次。它通常用于定义和设置你的循环变量。
条件判断语句会在每一轮循环的开始执行,只要条件判断为 true 就会继续执行循环。当条件为 false的时候,循环将停止执行。这意味着,如果条件在一开始就为 false,这个循环将不会执行。
计数器是在每一轮循环结束时执行,通常用于递增或递减。
在下面的例子中,先初始化i = 0,条件 i < 5 为真,进入第一次循环,执行大括号里的代码,第一次循环结束。递增i的值,条件判断,就这样依次执行下去,直到条件判断为假,整个循环结束。
var ourArray = [];
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}
最终 ourArray 的值为 [0,1,2,3,4].
11. Nesting For Loops
如果你有一个二维数组,可以使用相同的逻辑,先遍历外面的数组,再遍历里面的子数组。下面是一个例子:
var arr = [
[1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
一次输出 arr 中的每个子元素。提示,对于内部循环,我们可以通过 arr[i] 的 .length 来获得子数组的长度,因为 arr[i] 的本身就是一个数组。
12. Iterate with JavaScript While Loops
另一种类型的 JavaScript 循环被称为while循环,因为它规定,当(while)条件为真,循环才会执行,反之不执行。
var ourArray = [];
var i = 0;
while(i < 5) {
ourArray.push(i);
i++;
}
13. Profile Lookup
我们有一个对象数组,里面存储着通讯录。
函数 lookUp 有两个预定义参数:firstName值和prop属性 。
函数将会检查通讯录中是否存在一个与传入的 firstName 相同的联系人。如果存在,那么还需要检查对应的联系人中是否存在 prop属性。
如果它们都存在,函数返回prop属性对应的值。
如果firstName 值不存在,返回 “No such contact”。
如果prop 属性不存在,返回 “No such property”。
14. Generate Random Fractions with JavaScript
计算机的行为只有两种:确定性和随机性。当你一步步地闯关来到这里就是确定行为,当你随意点了个链接就来到这里就是随机行为。
而随机数最适合用来创建这种随机行为。
Math.random()用来生成一个在0(包括0)到1(不包括1)之间的随机小数,因此Math.random()可能返回0但绝不会返回1。
提示
随后的函数都会在return执行前调用,所以我们可以直接返回Math.random()的值。
15. Generate Random Whole Numbers with JavaScript
生成随机小数很棒,但随机数更有用的地方在于生成随机整数。
用 Math.random() 生成一个随机小数。
把这个随机小数乘以 20。
用 Math.floor() 向下取整 获得它最近的整数。
记住 Math.random() 永远不会返回 1。同时因为我们是在用 Math.floor() 向下取整,所以最终我们获得的结果不可能有 20。这确保了我们获得了一个在0到19之间的整数。
把操作连缀起来,代码类似于下面:
Math.floor(Math.random() * 20);
我们先调用 Math.random(),把它的结果乘以20,然后把上一步的结果传给 Math.floor(),最终通过向下取整获得最近的整数。
16. Generate Random Whole Numbers within a Range
我们之前生成的随机数是在0到某个数之间,现在我们要生成的随机数是在两个指定的数之间。
我们需要定义一个最小值和一个最大值。
下面是我们将要使用的方法,仔细看看并尝试理解这行代码到底在干嘛:
Math.floor(Math.random() * (max - min + 1)) + min