前台界面（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

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