五、JS 基础知识之对象的使用方法及实例

J_Tiffany
203 阅读6分钟

对象 是 JS 里的一种数据类型，可以理解为一种 无序 的数据集合。

对象用来描述某个事物，比如描述一个人，人有姓名、年龄、吃饭、睡觉等功能，这些功能如果用变量来保存比较分散，用对象就会统一

比如描述一个学生的信息：

image.png

一、对象使用

对象声明：let 对象名 = {}

例如，声明一个 person 对象：let person = {}

对象属性和方法：

  • 属性 就是信息，也叫特征，是 名词 ，比如身高、体重、颜色等；
  • 方法 就是功能，也叫行为，是 动词 ，比如跳舞、玩游戏等

image.png

1. 属性

数据描述性的信息称为属性，比如人的姓名、身高等，一般是名词性的。

image.png

  • 属性都是成对出现的，包括属性和属性值，他们之间用英文冒号（：）分隔，多个属性之间使用英文逗号（，）分隔；
  • 属性名可以使用 “” 或 ‘’ ，一般情况下 省略 ，除非名称遇到特殊符号时不能省略，比如空格、中横线等；
  • 对象属性之间没有顺序

属性访问 ：声明对象，然后添加完属性之后，可以使用 . 或 [] 获取对象属性对应的值，称为属性访问，简单来说就是获得对象里面的属性值。

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男'
      }

      console.log(person.name)
      console.log(person['age'])
    </script>

image.png

2. 对象中的方法

数据行为性的信息称为方法，如跳舞、跑步等，一般是动词性的，其本质是函数。

方法 是由 方法名 和 函数 两部分组成的，它们之间使用冒号（：）分隔，多个属性之间使用逗号（，）分隔

方法是依附在对象中的函数，方法名与属性名类似，也可以使用 “” 或 ‘’ ，一般情况下 省略 ，除非名称遇到特殊符号时不能省略，比如空格、中横线等；

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男',
        getHeight: function () {
          console.log('身高：165cm')
        }
      }
    </script>

方法访问：对象里添加了方法后，可以使用 . 调用对象中的函数，称为方法调用 ，调用对象方法时，要给方法名后面加上小括号：

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男',
        getHeight: function () {
          console.log('身高：165cm')
        }
      }

      person.getHeight()
    </script>

image.png

对象方法也可以 传参，其使用方法与函数的使用方法基本一致：

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男',
        getHeight: function (h) {
          console.log('身高：' + h)
        }
      }

      let h = 180
      person.getHeight(h)
    </script>

image.png

二、操作对象

对象本质是无序的数据集合，操作数据不外乎就是 增、删、改、查 语法 ：

image.png

修改 对象属性：

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男'
      }

      person.age = 21
      // person['age'] = 21
      console.log(person)
    </script>

image.png

添加 对象属性：也可以动态为对象添加属性，动态添加的属性与直接定义是一样的，只是语法上更灵活

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男'
      }

      person.address = '陕西省西安市'
      person['phone'] = '123456'
      console.log(person)
    </script>

image.png

删除 对象属性

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男'
      }

      delete person.sex
      console.log(person)
    </script>

image.png

新增 对象中的 方法 ：也可以动态为对象添加方法

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男'
      }

      person.setPhone = function () {
        console.log('123456')
      }
      console.log(person)
    </script>

image.png

无论是属性还是方法，同一个对象中出现的名称一样，后面的会覆盖前面的。

对象如果有这个属性就相当于重新赋值；对象如果没有这个属性则相当于动态添加了一个属性

三、遍历对象

对象里面是无序的键值对，没有规律。

对象不像数组里面有规律的下标，所以它没有像数组一样的 length 属性，无法确定其长度。

遍历对象用 for ... in 如下所示：

    <script>
      let person = {
        name: '张三',
        age: 18,
        sex: '男'
      }

      for (let k in person) {
        console.log(k) // 属性名，即键
        console.log(person[k])  // 属性值，即值
      }
    </script>

image.png

实例1：打印数组对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [
        { name: '张三', age: 23, gender: '男', phone: '12345' },
        { name: '李四', age: 13, gender: '男', phone: '12345' },
        { name: '小明', age: 29, gender: '女', phone: '12345' },
        { name: '王五', age: 21, gender: '男', phone: '12345' },
        { name: '小红', age: 53, gender: '女', phone: '12345' }
      ]

      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]) //数组里的每一个对象
        console.log(arr[i].name) //对象的属性
      }
    </script>
  </body>
</html>

image.png

实例2：将以上数据渲染在表格中

提示：先把表格渲染出来，然后打印表格的头部和尾部，中间数据用数组遍历的方式填充对象数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid #000;
        width: 400px;
        border-collapse: collapse;
      }
      th {
        background-color: #f0f0f2;
      }
      tr,
      th,
      td {
        border: 1px solid #000;
        text-align: center;
        height: 30px;
        width: 80px;
      }
    </style>
  </head>
  <body>
    <!-- <table>
      <caption>
        <h3>学生列表</h3>
      </caption>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>电话</th>
      </tr>
      <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>12345</td>
      </tr>
    </table> -->

    <script>
      let arr = [
        { name: '张三', age: 23, gender: '男', phone: '12345' },
        { name: '李四', age: 13, gender: '男', phone: '12345' },
        { name: '小明', age: 29, gender: '女', phone: '12345' },
        { name: '王五', age: 21, gender: '男', phone: '12345' },
        { name: '小红', age: 53, gender: '女', phone: '12345' }
      ]

      document.write(`
        <table>
      <caption>
        <h3>学生列表</h3>
      </caption>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>电话</th>
      </tr> 
        `)

      for (let i = 0; i < arr.length; i++) {
        document.write(`
        <tr>
        <td>${i + 1}</td>
        <td>${arr[i].name}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].phone}</td>
      </tr>
        `)
      }

      document.write(`</table>`)
    </script>
  </body>
</html>

image.png

四、内置对象

内置对象是 JS 内部提供的对象，包含各种属性和方法给我们调用，比如之前使用过的 document.write()、console.log() 等

Math() 对象是 JS 提供的一个 数学 对象，主要提供了一系列做数学运算的方法：

image.png

1. ceil、floor、round 的区别

示例1：ceil 向上取整

    <script>
      // 向上取整
      console.log(Math.ceil(3.2))
      console.log(Math.ceil(3.5))
      console.log(Math.ceil(3.8))
      console.log(Math.ceil(-3.2))
      console.log(Math.ceil(-3.5))
      console.log(Math.ceil(-3.8))
    </script>

image.png

示例2：floor 向下取整

    <script>
      // 向下取整
      console.log(Math.floor(3.2))
      console.log(Math.floor(3.5))
      console.log(Math.floor(3.8))
      console.log(Math.floor(-3.2))
      console.log(Math.floor(-3.5))
      console.log(Math.floor(-3.8))
    </script>

image.png

示例3：round 四舍五入取整（.5往大取整）

    <script>
      // 四舍五入取整
      console.log(Math.round(3.2))
      console.log(Math.round(3.5))
      console.log(Math.round(3.8))
      console.log(Math.round(-3.2))
      console.log(Math.round(-3.5))
      console.log(Math.round(-3.8))
    </script>

image.png

2. 生成任意范围的随机数

示例1：生成 0-5 的随机数

    <script>
      // [0,1) -> [0,6) -> 向下取整
      let ram = Math.floor(Math.random() * 6)
      console.log(ram)
    </script>

示例2：生成 10-15 的随机数

    <script>
      // [0,1) -> [0,6) -> [10,16) -> 向下取整
      let ram = (Math.floor(Math.random() * 6)) + 10
      console.log(ram)
    </script>

示例3：生成 N-M 的随机数

    <script>
      // [0,1) -> [0,M-N+1) -> [N,M+1) -> 向下取整
      Math.floor(Math.random() * (M - N + 1)) + N
    </script>

3. 将以上示例封装成函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
      }
      let random = getRandom(5, 10)
      console.log(random)
    </script>
  </body>
</html>

4. 随机点名实例

利用随机函数，随机生成一个数字作为索引号，然后将 数组[随机数] 显示到页面即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
      }

      let stus = ['张三', '李四', '小红', '小明', '灵犀']
      let random = getRandom(0, stus.length - 1) // 数组下标是0-4
      console.log(stus[random])
    </script>
  </body>
</html>

5. 随机点名案例改进：不重复

数组中删除刚才抽中的下标

    <script>
      function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
      }

      let stus = ['张三', '李四', '小红', '小明', '灵犀']
      let random = getRandom(0, stus.length - 1) // 数组下标是0-4
      
      console.log(stus[random])
      stus.splice(random,1)
      console.log(stus);
    </script>

image.png

avatar
文章
阅读
粉丝