JavaScript基础day05

晚风的街

已于 2024-07-27 21:27:52 修改

阅读量832

点赞数 9

文章标签： javascript 开发语言 ecmascript

于 2024-07-26 21:08:44 首次发布

本文链接：https://blog.csdn.net/m0_74153968/article/details/140723859

版权

对象

定义

JavaScript里的一种数据类型（无序的数据集合）

对象使用

对象声明语法

let 对象名 = {} let 对象名 = new Object()

{} 是对象字面量

属性

数据描述性的信息称为属性

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量（外面是变量，对象内是属性）
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

方法

数据行为性的信息称为方法

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

//请声明一个产品对象

let goods = {
      uname: '小米',
      num: '12482058',
      weight: '0.55kg',
      adress: '中国大陆',
      sayHi:function()
      {
          document.write('Hi')
      }
 }
 goods.sayHi()

操作（增删改查）

<script>
    let goods = {
      uname: '小米',
      num: '12482058',
      weight: '0.55kg',
      adress: '中国大陆'
    }
    goods.uname = '华为'
    goods.color = 'red'
    console.log(goods.uname)
    console.log(goods.num)
    console.log(goods.weight)
    console.log(goods.adress)
    console.log(goods.color)
</script>

属性-查的另外一种写法

对象[‘属性’] ，单引号和双引号都可以 person['user-name']

[]语法里面的值如果不添加引号默认会当成变量解析

遍历对象

for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
k 是获得对象的属性名，对象名[k] 是获得属性值
由于 k 是变量, 所以必须使用 [ ] 语法解析

<script>
    let students = [
      { name: '小明', age: 18, gender: '男', hometown: '河北省' },
      { name: '小红', age: 19, gender: '女', hometown: '河南省' },
      { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
      { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]
    // for (let k in students) {
    //   //console.log(students.k) 此写法是错误的，因为k为对象的属性名，会带''或者""，相当于students.'k',会报错
    //   //console.log(students.'uname') 错
    //   console.log(k)   数组的下标，为字符串类型
    //   //console.log(students['uname']) 对
    //   console.log(students[k])
    // }

    for (let i = 0; i < students.length; i++) {
      console.log(i) //数组下标
      console.log(students[i].name)  //对象名字
      console.log(students[i]) //获取每个对象
    }
</script>

//渲染学生表格

<h2>学生表格</h2>
  <table>
    <caption>学生列表</caption>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>
    <script>
      //准备数据
      let students = [
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },
        { name: '小红', age: 19, gender: '女', hometown: '河南省' },
        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
        { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
        { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
      ]
      //渲染
      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].hometown}</td>
      </tr>
     ` )
      }
    </script>
  </table>

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。

Math

Math.ceil(12.36px)-----NaN parseInt(12.36px)-----12

Math.random() 随机数函数，返回一个0 - 1之间，并且包括0不包括1的随机小数 [0, 1）

生成N-M之间的随机数：

Math.floor(Math.random() * (M - N + 1)) + N

随机点名

//请把[‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’]  随机显示一个名字到页面中，但是不允许重复显示

<script>
    let arr = ['张三', '李四', '王二', '小红', '小兰', '小仙']
    let random = Math.floor(Math.random() * arr.length)
    document.write(arr[random])
    arr.splice(random, 1)
    console.log(arr)
</script>

猜数字游戏

<script>
  
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1, 10)
    console.log(random)
    // 需要不断的循环
    while (true) {
      // 用户输入一个值
      let num = +prompt('请输入你猜的数字:')
      // 3. 判断输出
      if (num > random) {
        alert('猜大了')
      } else if (num < random) {
        alert('猜小了')
      } else {
        alert('猜对啦')
        break  // 退出循环
      }
    }
  </script>

生成随机颜色

//该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
<script>
    function getRandomColor(flag) {
      if (flag) {
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 1; i <= 6; i++) {
          let random = Math.floor(Math.random() * arr.length)
          str += arr[random]
        }
        return str
      }
      else {
        let r = Math.floor(Math.random() * 256)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${b})`
      }
    }
    console.log(getRandomColor(false))
    console.log(getRandomColor(true))
</script>

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

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型（简单数据类型）： string ，number，boolean，undefined，null。值类型变量的数据直接存放在变量（栈空间）中。
引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等。引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中。

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈； 简单数据类型存放到栈里面。

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 引用数据类型存放到堆里面。

let num1=10
let num2=num1
num1=20
console.log(num2)  //10


let obj1 = {
age:18
}
let obj2=obj1  //同一个地址，指向同一个对象
obj1.age=20
console.log(obj2.age)  //20

综合案例

学成在线页面渲染

<div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">
        <script>
          //数据准备
          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}" title="${data[i].title}">
                  <h4>${data[i].title}</h4>
                  <div class='info'>
                    <span>高级</span>·<span>${data[i].num}</span>人在学习
                  </div>
                </a>
              </li>
                `)
          }
        </script>
      </ul>
    </div>
  </div>

学生表格渲染


<table class="box">
    <tr>
      <th>编号</th>
      <th>科目</th>
      <th>成绩</th>
      <th>操作</th>
    </tr>
    <!-- <tr>
      <td>暂无数据</td>
    </tr> -->
    <script>
      let data = [
        { subject: '语文', score: 46 },
        { subject: '数学', score: 80 },
        { subject: '英语', score: 100 },
      ]
      let sumScore = 0
      for (let i = 0; i < data.length; i++) {
        sumScore += data[i].score
        document.write(`
            <tr>
                <td>${i + 1}</td>
                <td>${data[i].subject}</td>
                <td>${data[i].score}</td>
                <td><a href="#">删除</a></td>
            </tr>
          `)
      }
     document.write(`
           <tr>
              <td colspan="4">
                   <span class="none">暂无数据</span>
              </td>
           </tr>
           <tr>
                <td colspan="4">
                   <span>总分：${sumScore}</span>
                   <span style="margin-left: 50px">平均分：${parseInt(sumScore / data.length)}</span>
                </td>
            </tr>
            `)
    </script>

</table>

//别人的思路
<script>
    let arr = [{ subject: '语文', score: 46 }, { subject: '数学', score: 80 }, { subject: '英语', score: 100 }]
    let tr = ''
    let sum = 0
    let avg = 0
    for (let i = 0; i < arr.length; i++) {
    //tr变量中累积的HTML代码将代表一个完整的表格体（<tbody>），尽管在这个例子中并没有显式地包含<tbody>标签。
      tr += `
  <tr>
  <td>${i + 1}</td>
  <td>${arr[i].subject}</td>
  <td>${arr[i].score}</td>
  <td><a href="#">删除</a></td>
  </tr>`
      sum += +arr[i].score
    }
    avg = parseInt(sum / arr.length)
    document.write(`
  <div id="box">
  <table>
  <tr>
  <th>编号</th>
  <th>科目</th>
  <th>成绩</th>
  <th>操作</th>
  </tr>
  ${tr}  
  </table>
  <div class="noData">暂无数据</div>
  <div class="info"><span class="sumScore">总分:${sum}</span><span class="avgScore">平均分:${avg}</span></div>
  </div>
  `)
  </script>