JavaScript基础（day05:对象）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

对象

一、什么是对象

总结

二、对象的使用

掌握对象语法，用它保存多个数据

1.对象声明语法

2.对象由属性和方法组成

3.属性

总结

案例（声明一个产品对象）

    // 声明一个产品对象
    let phone = {
      goods: "小米（MI）",
      name: "小米10青春版",
      num: "100012816024",
      weight: "0.55kg",
      address: "中国大陆"
    }
    console.log(phone);

查、改 、增、删

查（对象名.属性）

查（对象['属性']）

总结（查）

改

增

删（了解）

总结

案例（操作产品对象）

// 声明一个产品对象
    let phone = {
      goods: "小米（MI）",
      name: "小米10青春版",
      num: "100012816024",
      weight: "0.55kg",
      address: "中国大陆"
    }
    // 1.请将商品名称里面的值修改为：小米10PLUS
    phone.goods = "小米10PLUS"
    // 2.新增一个属性颜色color为'粉色
    phone.color = "粉色"
    console.log(phone);

4.对象中的方法

三、遍历对象

总结

案例（遍历数组对象）

    let students = [{
      name: '小明', age: 18, gender: '男', hometoen: '河北省'
    }, {
      name: '小红', age: 19, gender: '女', hometoen: '河南省'
    }, {
      name: '小刚', age: 17, gender: '男', hometoen: '山西省'
    }, {
      name: '小丽', age: 18, gender: '女', hometoen: '山东省'
    },]
    for (let i = 0; i < students.length; i++) {
      for (let k in students[i]) {
        console.log(students[i][k]);
      }
    }

案例（根据数据渲染生成表格）

    div {
      margin: 0 auto;
      text-align: center;
    }

    table {
      text-align: center;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th,
    td {
      width: 100px;
      height: 50px;
      border: 1px solid;
    }

    tr:hover {
      background-color: gray;
    }

let students = [{
      name: '小明', age: 18, gender: '男', hometoen: '河北省'
    }, {
      name: '小红', age: 19, gender: '女', hometoen: '河南省'
    }, {
      name: '小刚', age: 17, gender: '男', hometoen: '山西省'
    }, {
      name: '小丽', age: 18, gender: '女', hometoen: '山东省'
    },]
    document.write(`<div><h1>学生列表</h1><table>
    <tr style="background-color: gray;">
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>`)
    for (let i = 0; i < students.length; i++) {
      document.write(`<tr>
          <td>${i + 1}</td>
          <td>${students[i].name}</td>
          <td>${students[i].age}</td>
          <td>${students[i].gender}</td>
          <td>${students[i].hometoen}</td></tr>`)
    }
    document.write(`</table></div>`)

四、内置对象

1.内置对象是什么？

2.Math

生成任意范围随机数

案例（随机点名）

    // 随机点名
    let uname = ["赵云", "黄忠", "关羽", "张飞", "马超", "刘备", "曹操"]
    document.write(uname[Math.floor(Math.random() * uname.length)])

案例（随机点名改进）

    let uname = ["赵云", "黄忠", "关羽", "张飞", "马超", "刘备", "曹操"]
    let random = Math.floor(Math.random() * uname.length)
    document.write(uname[random])
    uname.splice(random, 1)
    console.log(uname);

案例（猜数字游戏）

    let random = Math.floor(Math.random() * 10 + 1)
    let number = 0
    while (true) {
      number = +prompt("请输入一个数字")
      if (number > random) {
        alert("数字猜大了，继续猜")
      } else if (number < random) {
        alert("数字猜小了，继续猜")
      }
      else {
        alert("数字猜对了，程序结束")
        break
      }
    }

案例（生成随机颜色）

 function getRandomColor(flag) {
      if (flag) {
        // 如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色
        let str = "#"
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 0; i < 6; i++) {
          str = str + arr[Math.floor(Math.random() * arr.length)]
        }

        console.log(str);
      } else {
        // 如果参数传递的是false,则输出一个随机rgb的颜色 
        let random_r = Math.floor(Math.random() * 256)
        let random_b = Math.floor(Math.random() * 256)
        let random_g = Math.floor(Math.random() * 256)
        console.log(`rgb(${random_r},${random_b},${random_g})`);
      }
    }
    getRandomColor(false)
    getRandomColor(true)

案例（学成在线页面渲染）

                    // 定义数据源
                    let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网络动态图片加载实战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2 大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'Android APP 实战项目演练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: 'UGUI 源码深度分析案例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从入门到精通实战案例',
                            num: 888
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                    ]
                    for (let i = 0; i < data.length; i++) {
                        document.write(` <li>
                    <a href="#">
                        <img src="${data[i].src}" alt="">
                        <h4>
                            ${data[i].title}
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span> ${data[i].num}</span>人在学习
                        </div>
                    </a>
                </li>`)
                    }

拓展-术语解释

拓展-基本数据类型和引用数据类型

堆栈空间分配区别

1.简单类型的内存分配

2.复杂类型的内存分配