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

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

  • 相关阅读:
    如何优化多个关键字
    如何优化中小型企业网站
    SEO内容为王之如何创造伪原创
    中央电化教育馆教学资源库介绍
    教育网络游戏《学乐吧》介绍
    教育技术学专业主干课程系列教材(共八本)
    百度,google对网站首页内页权重分配的区别
    网站内链对网站排名有那些作用和影响?
    网站好排名,页面内链少不了
    公务员考试与事业单位考试
  • 原文地址:https://www.cnblogs.com/sxw117886/p/6429050.html
Copyright © 2020-2023  润新知