JSCORE_day04

hello_funnychou

已于 2022-10-08 20:28:33 修改

阅读量113

点赞数

分类专栏： JSCORE 文章标签： javascript 前端 html es6 ecmascript

于 2022-10-08 20:25:44 首次发布

本文链接：https://blog.csdn.net/Funny_Chou/article/details/127215601

版权

JSCORE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

复习

class语法

更加简单的封装构造函数的方式, 全自动完成原型操作

// 继承: 可以使用父类的属性
class ClassName extends 父类{
    // 静态属性属于类
    static 静态属性 = 值
    
    // 固定名称: 被new运算符触发
    constructor(x, y){
        this.x = x
        this.y = y
    }
    
    // 省略 function 前缀
    方法(){
        super.方法名()
        // super: 代表父类
    }
    
    方法(){}
}

ES6
- 2015年6月:属于JS最重大的一个版本. 经常把 ES6后续推出的所有版本统称ES6
- 新的作用域
  - 脚本: 跟全局作用域同级别, 用于存放用户自定义的全局属性
    - window: 放系统的API
    - 用 let/const 来声明
  - 块级: 用{} 配合 let/const使用, 形成块级
    - 代替匿名函数自调用生成的局部作用域
    - 优点: 书写更简单
- 新的声明变量方式
  - let: 声明变量
  - const: 常量; 初始化赋值后, 不可被修改 – 更加安全
  关于声明提升: 有声明提升, 设计了 暂存死区 概念, 在声明行代码运行前, 无法使用
模板字符串: 特别适合在 JS 中的字符串里, 书写HTML
- 字符串拼接更方便: ${}
- 支持换行
箭头函数: 新的匿名函数语法
- 基本格式 () => {}
- 语法糖1: 形参只有1个, 省略() – name => {}
- 语法糖2: 函数体仅有一行代码时, 省略 {return }
函数的this
- fucntion
  - 函数() : window – 严格模式 - undefined
  - 对象.函数() : 对象
  - new 函数() : 构造出的对象, – 实例对象
- 箭头
  - 函数(): 没有this, 按照作用域链的就近原则 从上级作用域查找
数组高阶函数
- 高阶函数: 函数的内部使用了其他的函数
- every: 每一个元素都符合条件
- some : 至少一个元素符合
- filter: 把符合条件的元素找出来
- map: 映射 - 把数组中的数据转换成HTML代码
  - 搭配 join 拼接成字符串最终呈现到页面上

请求封装

// 发请求: 到请求的地址属于变化量
// 参数1: 接收传入的url地址 -- 请求地址/接口地址
function get(url, callback) {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.onload = function () {
    const data = JSON.parse(xhr.response)
    // console.log(data) //clg
    // 触发回调函数, 把请求到的数据, 传入函数
    callback(data)
  }
  xhr.send()
}

作业

<!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>作业 09:28</title>
    <style>
      #box {
        width: 400px;
        background-color: #eee;
      }
      #box > div {
        border-bottom: 2px dashed gray;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 三步: HTML -> CSS -> JS -->
    <!-- 1. 搭建HTML伪代码 -->
    <div id="box">
      <!-- 伪代码有两个目的: 
        1.配合css用,制作基础样式 
        2.复制到JS中, 配合map做映射
      -->
      <!-- <div>
        <h3>标题</h3>
        <p>观看</p>
      </div> -->
    </div>

    <!-- 引入外部脚本, 即可使用其中的代码 -->
    <script src="./req.js"></script>
    <script>
      //测试
      // 参数1: 请求的地址
      // 参数2: 回调函数, 接收请求完毕后 得到的数据
      get('https://api.xin88.top/car/news.json', data => {
        console.log('data:', data)

        // var x = data.data.list.map(item => {})
        box.innerHTML = data.data.list
          .map(item => {
            return `<div>
              <h3>${item.title}</h3>
              <p>${item.count}次观看</p>
            </div>`
          })
          .join('')
      })
    </script>
  </body>
</html>

<!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>作业2 10:36</title>

    <style>
      #box {
        width: 800px;
      }
      #box > div {
        border-bottom: 1px dashed #333;
        color: #333;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <!-- <div>111111111</div>
      <div>222222222</div> -->
    </div>

    <script src="./req.js"></script>
    <script>
      const url = `https://web.codeboy.com/mfresh/data/news_select.php`

      get(url, data => {
        console.log(data)

        box.innerHTML = data.data
          .map(item => {
            return `<div>${item.title}</div>`
          })
          .join('')
      })
    </script>
  </body>
</html>

英雄

<!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>英雄列表 10:54</title>
    <style>
      #box > div {
        /* 行内的 弹性盒子 */
        display: inline-flex;
        flex-direction: column;
        margin: 5px;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <!-- 有些校区的网络可能会屏蔽图片, 需要用自己的热点 或 找网管 -->
      <!-- <div>
        <img
          src="https://game.gtimg.cn/images/lol/act/img/champion/Varus.png"
          alt=""
        />
        <span>惩戒之箭</span>
      </div> -->
    </div>

    <!-- 接口地址: https://api.xin88.top/game/heros.json -->
    <script src="./req.js"></script>
    <script>
      const url = `https://api.xin88.top/game/heros.json`

      get(url, data => {
        console.log(data)

        box.innerHTML = data.hero
          .map(item => {
            return `<div>
              <img
                src="https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png"
                alt=""
              />
              <span>${item.name}</span>
            </div>`
          })
          .join('')
      })
    </script>
  </body>
</html>

电影

<!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>电影 11:35</title>
    <!-- 解除图片的防盗限制 -->
    <meta name="referrer" content="no-referrer" />

    <style>
      #box > div {
        display: inline-flex;
        margin: 5px;
        flex-direction: column;
        align-items: center;
      }
      #box > div > img {
        width: 200px;
        height: 270px;
      }
      #box > div > span {
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <!-- <div>
        <img src="" alt="" />
        <span>题目</span>
      </div> -->
    </div>

    <script src="./req.js"></script>
    <script>
      const url = 'https://api.xin88.top/douban/movies.json'
      get(url, data => {
        console.log(data)

        box.innerHTML = data.subjects
          .map(sub => {
            return `<div>
              <img src="${sub.cover}" alt="" />
              <span>${sub.title}</span>
            </div>`
          })
          .join('')
      })
    </script>
  </body>
</html>

练习

<!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>练习 14:01</title>
    <!-- 解除防盗 -->
    <meta name="referrer" content="no-referrer" />

    <style>
      #box {
        width: 600px;
      }
      #box > div {
        display: flex;
        margin-bottom: 10px;
      }
      #box > div > img {
        width: 220px;
        height: 120px;
      }
      #box > div > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <!-- <div>
        <img src="" alt="" />
        <div>
          <div>题目</div>
          <div>
            <div>全12话</div>
            <div>xxx播放 · xxx弹幕</div>
          </div>
        </div>
      </div> -->
    </div>

    <script src="./req.js"></script>
    <script>
      const url = `https://api.xin88.top/bilibili/recommend.json`

      get(url, data => {
        console.log(data)

        box.innerHTML = data.data.season
          .map(s => {
            return `<div>
              <img src="${s.new_ep.cover}" alt="" />
              <div>
                <div>${s.title}</div>
                <div>
                  <div>${s.new_ep.index_show}</div>
                  <div>${s.stat.view}播放 · ${s.stat.danmaku}弹幕</div>
                </div>
              </div>
            </div>`
          })
          .join('')
      })
    </script>
  </body>
</html>

forEach

<!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>forEach 14:43</title>
  </head>
  <body>
    <script>
      // 高阶函数: forEach   遍历数组

      var emps = ['泡泡', '铭铭', '亮亮', '婷婷']

      // 传统的for
      for (let i = 0; i < emps.length; i++) {
        console.log(i, emps[i]) // 利用下标取值
      }

      // for..in : 用于遍历对象的 通用方案
      for (const key in emps) {
        console.log(typeof key, key, emps[key])
      }

      // for..of : ES6提供的 专为数组服务的
      // 特点: 直接遍历值, 不需要通过序号来间接读取
      for (const value of emps) {
        console.log(value)
      }

      // 高阶函数: forEach -- 无附加功能, 纯粹遍历数组
      // filter some every map: 都能遍历数组 但是 有附加功能
      emps.forEach((value, index, array) => {
        console.log(value, index)
      })
    </script>
  </body>
</html>

练习

<!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>练习 14:58</title>
  </head>
  <body>
    <script>
      var nums = [12, 3, 45, 65, 7, 76, 87]

      // 目标: 算出数组中数字的总和
      let sum = 0
      for (const n of nums) {
        sum += n
      }
      console.log('sum:', sum)

      
      let total = 0
      nums.forEach(value => (total += value))
      console.log(total)
    </script>
  </body>
</html>

forof和forEach区别

<!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>不同点 15:21</title>
  </head>
  <body>
    <script>
      // forEach: 是数组专属的方法, 只有数组能用
      // for..of: 是通用方法, 伪数组也能用
      var nums = {
        0: 11,
        1: 22,
        2: 33,
        3: 44,
        length: 4,
      }

      console.log(nums)

      // nums.forEach()
      // 报错: 因为nums的原型是Object 而非 Array

      function show() {
        console.log(arguments)
        // 典型的伪数组: 原型非数组 Array
        // arguments.forEach()  //报错

        // for..of : 可以对伪数组遍历
        for (const arg of arguments) {
          console.log(arg)
        }
      }

      show(22, 12, 43, 45)
    </script>
  </body>
</html>

练习

<!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>练习 15:33</title>
  </head>
  <body>
    <script>
      var food = [
        { name: '苹果', price: 8, count: 6, checked: true },
        { name: '葡萄', price: 18, count: 3, checked: true },
        { name: '鸭梨', price: 28, count: 6, checked: false },
        { name: '哈密瓜', price: 38, count: 26, checked: true },
        { name: '柚子', price: 48, count: 16, checked: false },
      ]

      // 任务: 计算出所有商品的总价格
      let sum = 0
      food.forEach(f => {
        // 类型自动转换: true->1  false->0
        // 任何数字x0 都是0
        sum += f.price * f.count * v.checked
      })

      console.log(sum)
    </script>
  </body>
</html>

reduce

<!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>reduce 数组合并 15:48</title>
  </head>
  <body>
    <script>
      // reduce: 数组合并
      var nums = [12, 34, 54, 3, 43, 45, 56, 76]

      //计算总和
      var sum = 0
      nums.forEach(n => (sum += n))
      console.log(sum)

      // reduce:
      // 参数1: 函数
      // 参数2: 0 代表sum的初始值, 不写则默认为第一个元素的值
      var x = nums.reduce((sum, n) => {
        return sum + n
      }, 0)

      console.log(x)
    </script>
  </body>
</html>

展开符

<!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>展开语法 16:22</title>
  </head>
  <body>
    <script>
      // 展开语法: ...
      // 可以把数组或对象的 外层括号去掉 -- `破盾, 去壳`
      var a = [11, 22]

      var b = [...a, 33, 44]
      console.log(b)

      var m = Math.max(...b)
      console.log(m)

      //
      var e1 = { x: 10, y: 20 }
      // 同样的属性名, 后写的覆盖先写的
      var e2 = { y: 30, z: 40, ...e1 }
      console.log(e2)
    </script>
  </body>
</html>

解构语法

<!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>解构 16:31</title>
</head>

<body>
  <script>
    var emps = ['泡泡', '亮亮', '铭铭']

    // 解构语法
    var [a, b, c] = emps
    console.log(a, b, c)

    // 支持可选解构
    var [x, , y] = emps
    console.log(x, y)

    ///
    // 技巧: 实现变量值的互换
    var m = 10
    var n = 20;
    // 必须用分号间隔, 否则会有歧义 20[]
    // var arr = [n, m] = [20, 10]
    // [m,n] = arr  //把数组解构

    [m, n] = [n, m]
    console.log(m, n);


    // 把数组的值放在不同的变量里
    // var a = emps[0]
    // var b = emps[1]
    // var c = emps[2]
    // console.log(a, b, c)

    /
    // 对象解构:
    var emp = {
      ename: "泡泡",
      age: 19,
      phone: "18344343434",
      boyFriend: '大脸'
    }

    // var bf = emp.boyFriend

    // ctrl+i: 手动查看提示
    // 别名语法  {属性名:别名}
    var { age, ename, phone, boyFriend: bf } = emp
    console.log(age, ename, phone, bf)

    //目标效果
    // var ename = emp.ename
    // var age = emp.age
    // var phone = emp.phone
  </script>
</body>

</html>

练习

<!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>练习 16:55</title>
</head>

<body>
  <script>
    var shiyu = {
      name: "世宇",
      alias: 'bug制造者',
      skills: ['唱', '跳', '写BUG'],
    }

    // 要求: 按照要求, 把所有值解构出来存放到变量里
    var { alias, name: uname, skills: [s1, s2, s3] } = shiyu

    console.log(alias, uname, s1, s2, s3)

    /
    var game = {
      name: "LOL",
      match: "S12",
      date: "09.30",
      teams: ['rng', 'tes', 'edg']
    }

    var { date, match, name: gname, teams: [t1, t2, t3] } = game

    console.log(date, match, gname, t1, t2, t3);
  </script>
</body>

</html>

解构语法

<!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>解构语法与函数配合 17:26</title>
</head>

<body>
  <script>
    var r1 = { length: 20, width: 30 }

    // 形参解构: 
    function area({ width: w, length: l }) {
      // var { width: w, length: l } = r

      // console.log(r.width * r.length);
      console.log(w * l)
    }

    area(r1)

    //
    var c1 = { length: 20, width: 40, height: 50 }

    // 形参解构: 
    // 1. 节省了形参的声明
    // 2. 简化了属性名
    function mian({ length: l, width: w, height: h }) {
      console.log((l * w + l * h + w * h) * 2);

      // console.log((cube.length * cube.width + cube.length * cube.height + cube.width * cube.height) * 2);
    }

    mian(c1)
  </script>
</body>

</html>

形参默认值

<!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>形参默认值 17:44</title>
</head>

<body>
  <script>
    // 形参默认值
    function show(name = '世宇') {
      console.log('辅助:', name);
    }

    show() //如果不传递实参, 就使用默认值
    show('佳佳') //如果传递实参, 则覆盖默认值
  </script>
</body>

</html>

剩余参数

<!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>剩余参数 17:48</title>
</head>

<body>
  <script>
    // 注意: 不要和展开符混淆!!!
    // 展开符是放在 对象 或 数组前:  ...对象  ...数组
    // 这里: 放在形参前

    // 格式: ...形参名     形参名随意 ...nums,  ...suibian
    function show(x, y, ...args) {
      console.log(x, y, args);
      // arguments: 是此语法的前身
      // 差异: arguments -- 接收所有的实参, 伪数组
      // 剩余参数: 接收没有指定形参 的剩余的实参, 原型是数组
    }

    show(11, 22, '泡泡', '铭铭', '亮亮', '世宇')
  </script>
</body>

</html>