六、对象属性方法及增删改查、遍历对象和对象数组、Math.random()随机数、数据类型存储、变量声明

原创 于 2024-11-17 21:24:01 发布 · 382 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

1. 对象_属性和方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    对象：引用类型 键值对形式存储数据
    对象内数据是无序的，数组是有序的
  -->
  <script>
    // 声明对象 声明对象使用大括号，大括号就是对象字面量
    let ym = {
      /* 
        属性：事物的描述信息称为属性 一般是名词
        属性就是依附在对象上的变量（对象外是变量，对象内是属性）
      */
      name: '杨幂',
      age: 18,
      weight: 90,
      /* 
        方法：事物的行为性称为方法 一般是动词
        方法是依附在对象中的函数 （对象外是函数，对象内是方法）
      */
      dance: function () {
        console.log('dance方法')
      },
      sing: function (song) {
        console.log(`sing${song}`)
      },
    }
    console.log(ym)

    // 访问对象属性 对象.属性名
    console.log(ym.age)
    console.log(ym.name)
    console.log(ym.weight)

    // 调用对象方法 对象.方法名()
    ym.dance()
    ym.sing('爱的供养')
    ym.sing('你没事儿吧？吃溜溜梅')
  </script>
</body>

</html>

2. 对象_简写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 对象属性和方法的简写 -->
  <script>
    let name = prompt('输入姓名')
    let age = prompt('输入年龄')
    let obj = {
      // 在对象中，如果属性名和属性值的变量一致，可以简写只写属性名即可
      // name: name,
      name,
      // age: 18,
      age,

      // 在对象中，方法（函数）可以简写
      /* sing: function (song) {
        console.log(`sing${song}`)
      }, */
      sing(song) {
        console.log(`sing${song}`)
      }
    }
    console.log(obj)

  </script>
</body>

</html>

3. 操作对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    操作对象：增删改查
    查：对象.属性 对象['属性']
      （多词属性或者需要解析变量的时候使用 [] 语法，其余的直接使用点语法）
    改：对象.属性 = 新值
    增：对象.新属性 = 新值
      （改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改）
    删：delete 对象.属性（了解）
  -->
  <script>
    let ym = {
      name: '杨幂',
      age: 18,
      weight: 90,
      dance: function () {
        console.log('dance方法')
      },
      sing: function (song) {
        console.log(`sing${song}`)
      },
    }
    console.log(ym)

    // 改
    ym.age = 19
    console.log(ym.age)

    ym.dance = function () {
      console.log('dance方法 改后')
    }
    ym.dance()

    // 增
    ym.gender = '女'
    console.log(ym)

    // 删
    delete ym.gender
    // 删除方法时不加小括号，调用时候加
    delete ym.dance
  </script>
</body>

</html>

4. 案例1_产品对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    let goods = {
      name: '小米10青春版',
      num: '100012816024',
      weight: '0.55kg',
      address: '中国大陆',
    }
    console.log(goods.address)
    console.log(goods.name)
    console.log(goods.num)
    console.log(goods.weight)
    console.log('------------')

    // 修改商品名称
    goods.name = '小米10PLUS'
    // 新增商品颜色
    goods.color = '粉色'
    console.log(goods.address)
    console.log(goods.name)
    console.log(goods.num)
    console.log(goods.weight)
    console.log(goods.color)


  </script>
</body>

</html>

5. 对象['属性']

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 多词属性或者遍历对象时解析变量的时候使用 [] 语法，其余的直接使用点语法 -->
  <script>
    let Person = {
      'actor-name': '杨幂',
      age: 18,
      weight: 90,
    }
    console.log(Person) // {actor-name: '杨幂', age: 18, weight: 90}
    console.log(Person.age) // 18

    // 找不到
    console.log(Person.actor - name) // NaN
    // 报错
    // console.log(Person.'actor-name')
    // 正确操作
    console.log(Person['actor-name']) // 杨幂
  </script>
</body>

</html>

6. 遍历对象 for in

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 利用for in遍历对象 -->
  <script>
    let Person = {
      'actor-name': '杨幂',
      age: 18,
      weight: 90,
    }
    /* 
      键值对 键key 值value
      变量k的数据类型为字符串
      一般不用这种方式遍历数组，主要是用来遍历对象
    */
    for (let k in Person) {
      // k是获得对象的属性名
      console.log(k)
      // 对象名[k]是获得属性值
      console.log(Person[k])
    }
    /*
      actor-name
      杨幂
      age
      18
      weight
      90
    */

    /* 
      for in同样可以遍历数组（不常用）
      常用for循环三要素 for (let i = 0; i < array.length; i++) { }来遍历数组
    */
    let names = ['Tom', 'Jerry', 'Joy']
    /* for (let k in names) {
      console.log(k)
      console.log(names[k])
    } */
    /* 
      0
      Tom
      1
      Jerry
      2
      Joy
    */

    for (let i = 0; i < names.length; i++) {
      console.log(names[i])
    }
    /*
      Tom
      Jerry
      Joy
    */
  </script>
</body>

</html>

7. 遍历对象数组

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    // 对象数组 → 数组里包对象
    let students = [
      { name: '小明', age: 18, sex: '男', hometown: '河北省' },
      { name: '小红', age: 19, sex: '女', hometown: '河南省' },
      { name: '小刚', age: 17, sex: '男', hometown: '山西省' },
      { name: '小丽', age: 18, sex: '女', hometown: '山东省' },
    ]
    // 遍历students数组
    for (let i = 0; i < students.length; i++) {
      // 输出students数组中所有对象
      console.log(students[i])
      // 输出students数组中所有对象的name属性值
      console.log(students[i].name)
    }
  </script>
</body>

</html>

8. 案例2_渲染学生信息表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渲染学生信息表案例</title>
  <style>
    h2,
    p {
      text-align: center;
    }

    .student {
      overflow: hidden;
      margin: 0 auto;
      /* 合并相邻边框 */
      border-collapse: collapse;
      text-align: center;
      border-radius: 10px 10px 0 0;

    }

    .student tr {
      cursor: pointer;
    }

    .student th {
      padding: 5px 50px;
      color: #fff;
    }

    .student,
    th,
    td {
      border: 1px solid #fff;
      line-height: 45px;
    }

    /* 给行添加渐变背景颜色 */
    .student thead tr {
      background-image: linear-gradient(to right, #f46e33, #f057a5);
    }

    /* 从第2行开始修改背景颜色 */
    .student tbody tr {
      background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
    }

    /* 从第2行开始 最后一个单元格颜色变化 */
    .student tbody tr :last-child {
      color: #f282bb;
    }

    /* 第一行鼠标经过不要变颜色 */
    .student tbody tr:hover {
      background-image: linear-gradient(to right, #f9e3da, #f9d6e8);
    }
  </style>
</head>

<body>
  <h2>学生信息</h2>
  <p>将数组中存储的学生信息，以表格的形式把数据渲染到页面中...</p>

  <table class="student">
    <!-- 表头 -->
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>家乡</th>
      </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
      <!-- <tr>
        <td>1</td>
        <td onclick="update()">小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
      </tr> -->
      <!-- <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
      </tr>
      <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
      </tr>
      <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
      </tr> -->
    </tbody>
  </table>

  <script>
    // 数据
    let students = [
      { name: '小明', age: 18, sex: '男', hometown: '河北省' },
      { name: '小红', age: 19, sex: '女', hometown: '河南省' },
      { name: '小刚', age: 17, sex: '男', hometown: '山西省' },
      { name: '小丽', age: 18, sex: '女', hometown: '山东省' },
      { name: '小强', age: 18, sex: '男', hometown: '北京市' }
    ]

    // 渲染
    function render() {
      let strStudents = ''
      for (let i = 0; i < students.length; i++) {
        let strValue = `<td>${i + 1}</td>`
        for (let k in students[i]) {
          // console.log(i, k)

          // 错误 ${k}需用引号包裹 字符串解析？
          // strValue += `<td onclick="update(${i}, ${k} )">${students[i][k]}</td>`

          strValue += `<td onclick="update(${i},'${k}')">${students[i][k]}</td>`

          // ondblclick 双击
          // strValue += `<td ondblclick="update(${i},'${k}')">${students[i][k]}</td>`
        }
        // console.log(strValue)
        strStudents += `<tr>${strValue}</tr>`
      }
      document.querySelector('tbody').innerHTML = strStudents
    }

    render()

    function update(index, key) {
      // console.log(index, key)

      let value = prompt('请输入修改后内容')
      if (value) {
        students[index][key] = value
        render()
      }
    }
  </script>
</body>

</html>

9. 内置对象_Math

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用
    document.querySelector(),console.log() 都是JS内置对象的方法
  -->
  <!-- 内置对象-Math -->
  <script>
    console.log(Math)
    // 圆周率
    console.log(Math.PI) // 3.141592653589793
    // 最大值
    console.log(Math.max(10, 23, 45, 1, 2, 4, 456)) // 456
    // 最小值
    console.log(Math.min(10, 23, 45, 1, 2, 4, 456)) // 1
    // 绝对值
    console.log(Math.abs(-10)) // 10
    // 向上取整
    console.log(Math.ceil(1.1)) // 2
    console.log(Math.ceil(1.9)) // 2
    // 向下取整
    console.log(Math.floor(1.1)) // 1
    console.log(Math.floor(1.9)) // 1

    // 四舍五入取整
    console.log(Math.round(1.1)) // 1
    console.log(Math.round(1.9)) // 2
    console.log(Math.round(1.5)) // 2
    /* 四舍五入规则：
    如果小数部分小于0.5，则向下舍入（即向零的方向）。
    如果小数部分大于或等于0.5，则向上舍入（即远离零的方向）。
    四舍五入规则是相对于零的方向来定义的。对于负数，远离零的方向实际上是数值更小的方向。 */
    console.log(Math.round(-1.5)) // -1
    console.log(Math.round(-2.5)) // -2

    // 随机数(最常用) 0-1之间的随机小数(取不到1)
    console.log(Math.random()) // 0.6042880830773085(随机)
    // 实际开发中需要随机整数
    // 0-4
    console.log(Math.floor(Math.random() * 5)) // 4(随机)
    // 生成N-M之间的随机整数
    // Math.floor(Math.random() * (差值 + 1)) + 最小值
    // 5-15
    console.log(Math.floor(Math.random() * 11) + 5)

  </script>
</body>

</html>

10. 案例3_随机显示名字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    let names = ['Tom', 'Jerry', 'Rose', 'Joy', 'Jack', 'Lisa', 'Yuqi']
    let i = Math.floor(Math.random() * names.length)
    console.log(names[i])
  </script>
</body>

</html>

11. 案例4_猜数字游戏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    猜数字游戏
    需求：程序生成 1~10 之间的一个随机整数，用户输入一个数字，返回猜的是否正确
    ①：如果输入数字大于随机数字，就提示：'数字猜大了，继续猜'
    ②：如果输入数字小于随机数字，就提示：'数字猜小了，继续猜'
    ③：如果输入数字等于随机数字，就提示猜对了，程序结束
  -->
  <script>
    let random = Math.floor(Math.random() * 10 + 1)
    for (; ;) {
      let num = +prompt('请输入数字')
      if (num > random) {
        alert('数字猜大了，继续猜')
      } else if (num < random) {
        alert('数字猜小了，继续猜')
      } else if (num === random) {
        alert('恭喜你猜对了！')
        break
      }
    }
  </script>
</body>

</html>

12. 案例5_生成随机颜色

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <!-- 
    生成随机颜色
    需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
    ①：如果参数传递的是 true 或者无参数，则输出 一个随机十六进制的颜色
    ②：如果参数传递的是 false ，则输出 一个随机rgb的颜色
  -->
  <script>
    function getRandomColor(flag) {
      if (flag !== false) {
        // 十六进制
        let sixteen = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        let RandomColor = '#'
        for (let i = 0; i < 6; i++) {
          let num = Math.floor(Math.random() * 16)
          RandomColor += sixteen[num]
        }
        // console.log(RandomColor)
        return RandomColor
      } else {
        // rgb
        let r = Math.floor(Math.random() * 256)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        let RandomColor = `rgb(${r},${g},${b})`
        // console.log(RandomColor)
        return RandomColor
      }
    }
    console.log(getRandomColor(true)) // #f02db4
    console.log(getRandomColor()) // #de9c1d
    console.log(getRandomColor(false)) // rgb(129,198,236)

    // 直接修改元素的 style.color 属性 ; innerHTML 替换整个标签
    document.querySelector('h1').style.color = getRandomColor(true)
    document.querySelector('h2').style.color = getRandomColor(false)
  </script>
</body>

</html>

13. 案例6_学成在线页面渲染

<!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>学成在线</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 精品课程 -->
  <div class="course wrapper">
    <div class="hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部
        <span class="iconfont icon-arrow-right-bold">
        </span>
      </a>
    </div>
    <div class="bd">
      <ul class="common">
        <!-- <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality01.png" alt=""></div>
            <h4>JavaScript数据看板项目实战</h4>
            <p><span>高级</span> · <i>1125</i>人在学习</p>
          </a>
        </li> -->
      </ul>
    </div>
  </div>

  <script>
    // 综合案例代码
    // 1. 利用对象数组的数据渲染页面
    let data = [
      {
        src: './uploads/quality01.png',
        title: 'JavaScript数据看板项目实战',
        num: 1125
      },
      {
        src: './uploads/quality02.png',
        title: 'Vue.js实战——面经全端项目',
        num: 2726
      },
      {
        src: './uploads/quality03.png',
        title: '玩转Vue全家桶，iHRM人力资源项目',
        num: 9456
      },
      {
        src: './uploads/quality04.png',
        title: 'Vue.js实战医疗项目——优医问诊',
        num: 7192
      },
      {
        src: './uploads/quality05.png',
        title: '小程序实战：小兔鲜电商小程序项目',
        num: 2703
      },
      {
        src: './uploads/quality06.png',
        title: '前端框架Flutter开发实战',
        num: 2841
      },
      {
        src: './uploads/quality07.png',
        title: '熟练使用React.js——极客园H5项目',
        num: 95682
      },
      {
        src: './uploads/quality08.png',
        title: '熟练使用React.js——极客园PC端项目',
        num: 904
      },
      {
        src: './uploads/quality09.png',
        title: '前端实用技术，Fetch API 实战',
        num: 1516
      },
      {
        src: './uploads/quality10.png',
        title: '前端高级Node.js零基础入门教程',
        num: 2766
      },
      {
        src: './uploads/quality10.png',
        title: '前端高级Node.js零基础入门教程',
        num: 27669
      }
    ]
    console.log(data.length)
    // 2. 利用循环来做字符串拼接生成多个li标签，之后把生成的li标签放入容器 ul 里面渲染即可
    let strData = ''
    for (let i = 0; i < data.length; i++) {
      strData += `
        <li>
          <a href="#">
            <div class="pic"><img src="${data[i].src}" alt=""></div>
            <h4>${data[i].title}</h4>
            <p><span>高级</span> · <i>${data[i].num}</i>人在学习</p>
          </a>
        </li>
      `
    }
    document.querySelector('.common').innerHTML = strData
  </script>
</body>

</html>

14. 数据类型存储

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    JS 数据类型整体分为两大类：
      基本数据类型（简单数据类型） number、string、boolean、undefined、null
      引用数据类型（复杂数据类型） Object、Function、Array
  -->
  <!-- 
    内存中堆栈空间分配区别：
      栈: 优点访问速度快，基本数据类型存放到栈里面
      堆: 优点存储容量大，引用数据类型存放到堆里面
  -->
  <script>
    // 1. 基本数据类型放 栈 里面
    // 基本数据类型赋值的是 值
    let age = 18

    // 2. 引用数据类型放 堆 里面
    // 引用数据类型赋值的是 地址，真正数据存放在堆空间中
    let arr = [1, 2]

    let x = 10
    let y = x
    x = 20
    console.log(y) // 10

    let obj1 = {
      age: 18,
    }
    let obj2 = obj1
    obj1.age = 20
    console.log(obj2.age) // 20

  </script>
</body>

</html>

15. 变量声明

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
    const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
    但是对于引用数据类型，const声明的变量，里面存的不是 值，是 地址
    所以： const声明的变量不可以修改，本质是说，const声明的变量 地址不能修改
  -->
  <!-- 建议数组和对象使用 const 来声明 -->
  <script>
    let num = 10
    num = 20
    console.log(num) // 20

    // const age = 20
    // age = 30
    // console.log(age)

    // 复杂类型的数据建议用const声明 → 好处：固定了内存地址，性能高
    // 不影响修改堆里面保存的数据
    const arr = []

    // 用法错误，会修改内存地址
    // arr = [10, 20]

    // 向数组中添加数据
    arr.push(10)

    console.log(arr) // [10]
  </script>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值