前台界面(5)--- 对象和随机数
2018-06-22 07:45:29来源:未知 阅读 ()
目录
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. 随机整数
生成随机小数很棒,但随机数更有用的地方在于生成随机整数。
- 用 Math.random() 生成一个随机小数。
- 把这个随机小数乘以 20。
- 用 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
最后最后最后,重要的事情说三遍,来着是客,如果您觉得好就推荐或评论下,觉得不好希望能得到您的建议,继续改善,您的支持就是对我最大的鼓励.
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- WPF实现定时刷新UI界面功能 2020-03-14
- C#后台调用前台javascript的方法 2019-09-08
- ASP.Net前台调用后台变量的方法 2019-09-02
- 【转载】使用宝塔对Linux系统进行界面化管理操作 2019-07-23
- ASP.NET MVC EF 连接数据库(三)-----Code First 2019-07-23
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash