前台界面(5)--- 对象和随机数

目录

1. 对象 object

1.1. 对象属性

1.1.1. 点操作符(.)

1.1.2. 中括号操作符([])

1.1.3. 更新对象属性

1.1.4. 添加对象属性

1.1.5. 删除对象属性

1.1.6. 键值对对象

1.1.7. 判断属性是否存在hasOwnProperty

1.2. 对象的格式化:JSON

1.2.1. 访问JSON对象的嵌套属性

1.3. 构造函数创建对象

1.3.1. 调用对象构造函数

1.3.2. 带参数的构造函数

2. 随机数

2.1. 随机小数

2.2. 随机整数

2.3. 指定区间的随机数

-----------------------黄金分割线----------------------

 

1. 对象 object 

对象和数组很相似,数组是通过索引来访问和修改数据,对象是通过属性来访问和修改数据的。

这是一个示例对象:

var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water", "Dogs"]
};

对象适合用来存储结构化数据,就和真实世界的对象一模一样,比如一只猫

1.1. 对象属性

有两种方式访问对象属性,一个是点操作符(.),一个是中括号操作符([])。

1.1.1. 点操作符(.)

当你知道属性的名称的时候,使用点操作符。

这是一个使用点操作符读取对象属性的例子:

var myObj = {
prop1: "val1",
prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

1.1.2. 中括号操作符([])

第二种访问对象的方式就是中括号操作符([]),如果你想访问的属性的名称有一个空格,这时你只能使用中括号操作符([])。

这是一个使用中括号操作符([])读取对象属性的例子:

var myObj = {
"Space Name": "Kirk",
"More Space": "Spock"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock

提示:属性名称中如果有空格,必须把属性名称用单引号或双引号包裹起来。

中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时,这种方式极为有用。

这有一个使用变量来访问属性的例子:

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]; // "Hunter"
console.log(breed)// "Doberman"

提示:当我们通过变量名访问属性的时候,不需要给变量名包裹引号。因为实际上我们使用的是变量的值,而不是变量的名称。

1.1.3. 更新对象属性

当你创建了一个对象后,你可以用点操作符或中括号操作符来更新对象的属性。

举个例子,让我们看看 ourDog:

var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};

让我们更改它的名称为 "Happy Camper",这有两种方式来更新对象的name属性:

ourDog.name = "Happy Camper";

ourDog["name"] = "Happy Camper";

1.1.4. 添加对象属性

你也可以像更改属性一样给对象添加属性。

看看我们是如何给ourDog添加 "bark"属性:

ourDog.bark = "bow-wow";

或者

ourDog["bark"] = "bow-wow";

1.1.5. 删除对象属性

我们同样可以删除对象的属性,例如:

delete ourDog.bark;

1.1.6. 键值对对象

对象和字典一样,可以用来存储键/值对。如果你的数据跟对象一样,你可以用对象来查找你想要的值,而不是使用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"

1.1.7. 判断属性是否存在hasOwnProperty

有时检查一个对象属性是否存在是非常有用的,我们可以用.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true,反之返回 false

举例

var myObj = {
top: "hat",
bottom: "pants"
};
myObj.hasOwnProperty("top"); // true
myObj.hasOwnProperty("middle"); // false

1.2. 对象的格式化:JSON

JavaScript Object Notation 简称 JSON,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为它允许 数据结构  字符串数字布尔值字符串,和 对象 的任意组合。

这里是一个JSON对象的示例:

var ourMusic = [
{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997,
"formats": [
"CD",
"Cassette",
"LP" ],
"gold": true
}
];

这是一个对象数组,并且对象有各种关于专辑的 详细信息。它也有一个嵌套的 formarts 的数组。附加专辑记录可以被添加到数组的最上层。

提示:数组中有多个 JSON 对象的时候,对象与对象之间要用逗号隔开。

1.2.1. 访问JSON对象的嵌套属性

1.通过串联起来的点操作符或中括号操作符来访问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"

2.正如我们在前面的例子所见,JSON对象可以嵌套对象和数组。与访问嵌套对象一样,用中括号操作符同样可以访问嵌套数组。

下面是如何访问嵌套数组的例子:

var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"

1.3. 构造函数创建对象

除了上一种方法外,我们还可以使用构造函数来创建对象。

构造函数 通常使用大写字母开头,以便把自己和其他普通函数区别开。

下面便是一个 构造函数 了:

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 1;
};

构造函数 中, this 指向被此 构造函数 创建出来的 对象 。所以,当我们在 构造函数 中写:

  this.wheels = 4;

这时,它创建出来的新对象将带有 wheels 属性,并且赋值为 4.

你可以认为 构造函数 描述了它所创建出来的对象

1.3.1. 调用对象构造函数

使用构造函数时,我们通过在它前面使用 new关键字 来对它进行调用,如下:

var myCar = new Car();

myCar 现在成为了 Car 的一个 实例instance),它被 构造函数 描述成下面的样子:

{
  wheels: 4,
  engines: 1,
  seats: 1
}

记住:要使用 new 关键字 去调用构造函数。因为只有这样,Javascript才知道这是要去构造一个新 对象 ,并且把构造函数中的 this 指向这个新对象。

现在,当 myCar (即 Car 的一个 实例 )创建后,他可以像普通对象一样被使用,包括创建、访问、修改它的属性等,就像我们使用其他对象一样。如下:

myCar.turboType = "twin";

我们的 myCar 变量现在有了一个 turboType 属性了,且值为 "twin" 

1.3.2. 带参数的构造函数

我们之前写的 构造函数 很好,但是我们不想总是创建相同的对象,怎么办呢?

为了解决这个问题,我们要向 构造函数 中添加参数 。像下面这样:

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 

2. 随机数

计算机的行为只有两种:确定性和随机性。当你一步步地闯关来到这里就是确定行为,当你随意点了个链接就来到这里就是随机行为。

而随机数最适合用来创建这种随机行为。

2.1. 随机小数

Math.random()用来生成一个在0(包括0)到1(不包括1)之间的随机小数,因此Math.random()可能返回0但绝不会返回1。

2.2. 随机整数

生成随机小数很棒,但随机数更有用的地方在于生成随机整数。

  1. Math.random() 生成一个随机小数。
  2. 把这个随机小数乘以 20
  3. Math.floor() 向下取整 获得它最近的整数。

记住 Math.random() 永远不会返回 1。同时因为我们是在用 Math.floor() 向下取整,所以最终我们获得的结果不可能有 20。这确保了我们获得了一个在0到19之间的整数。

把操作连缀起来,代码类似于下面:

Math.floor(Math.random() * 20);

我们先调用 Math.random(),把它的结果乘以20,然后把上一步的结果传给 Math.floor(),最终通过向下取整获得最近的整数。

2.3. 指定区间的随机数

我们之前生成的随机数是在0到某个数之间,现在我们要生成的随机数是在两个指定的数之间。

我们需要定义一个最小值和一个最大值。

下面是我们将要使用的方法,仔细看看并尝试理解这行代码到底在干嘛:

Math.floor(Math.random() * (max - min + 1)) + min

 最后最后最后,重要的事情说三遍,来着是客,如果您觉得好就推荐或评论下,觉得不好希望能得到您的建议,继续改善,您的支持就是对我最大的鼓励.

 

posted @ 2017-02-22 15:05  幻影星辰  阅读(1372)  评论(0编辑  收藏  举报