JS进阶-解析赋值

雪碧bibi是我的好大二2024-07-10 17:03

学习目标：

  • 掌握解析赋值

学习内容：

  1. 解构赋值
  2. 数组解构
  3. 对象解构
  4. 筛选数组filter方法（重点）

解构赋值：

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。

分为：

  • 数组解构
  • 对象解构

数组解构：

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

基本语法：

  1. 赋值运算符 = 左侧的[ ]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量。
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作。
javascript 复制代码 
 <title>数组解构</title>
</head>

<body>
  <script>
    // const arr = [100, 60, 80]
    // 数组解构 赋值
    // // const [max, min, avg] = arr
    const [max, min, avg] = [100, 60, 80]
    // // const max = arr[0]
    // // const min = arr[1]
    // // const avg = arr[2]
    console.log(max) // 100
    console.log(avg) // 80
    // 交换2个变量的值
    let a = 1
    let b = 2;  //这里必须有分号
    [b, a] = [a, b]
    console.log(a, b)
  </script>

</body>

注意：js前面必须加分号的情况：

javascript 复制代码 
<title>必须加分号的两种情况</title>
</head>

<body>
  <script>
    // 1. 立即执行函数要加
    // (function () { })();
    // (function () { })();

    // 2. 使用数组的时候
    // const arr = [1, 2, 3]
    const str = 'pink';
    [1, 2, 3].map(function (item) {
      console.log(item)
    })

    let a = 1
    let b = 2
      ;[b, a] = [a, b]

    console.log(a, b)
  </script>
  • 小结：
  1. 数组解构赋值的作用是什么？

是将数组的单元值快速批量赋值给一系列变量的简洁语法。

  1. JS前面有哪种情况需要加分号的？

立即执行函数

javascript 复制代码 
// 1. 立即执行函数要加
     (function () { })();
     (function () { })();

数组解构

javascript 复制代码 
//数组开头的，特别是前面有语句的一定要注意加分号
;[b, a] = [a, b]
  • 练习：
javascript 复制代码 
<title>练习-独立完成数组解构赋值</title>
</head>

<body>
  <script>
    // const pc = ['海尔', '联想', '小米', '方正'];
    //  [hr, lx, mi, fz] = pc
    //  console.log(hr,lx,mi,fz);


    // function getValue() {
    //   return [100, 60]
    // }
    // [max,min] = getValue()
    // console.log(max,min);

    // const pc = ['海尔', '联想', '小米', '方正']
    const [hr, lx, mi, fz] = ['海尔', '联想', '小米', '方正']
    console.log(hr)
    console.log(lx)
    console.log(mi)
    console.log(fz)

    //请将最大值和最小值函数返回值解构 max 和 min 两个变量
    function getValue() {
      return [100, 60]
    }
    const [max, min] = getValue()
    console.log(max)
    console.log(min)
  </script>

</body>
  • 数组解构细节：

变量多，单元值少的情况：

javascript 复制代码 
 // 1. 变量多， 单元值少 ， undefined
     const [a, b, c, d] = [1, 2, 3]
     console.log(a) // 1
     console.log(b) // 2
     console.log(c) // 3
     console.log(d) // undefined

变量的数量大于单元值数量时，多余的变量将被赋值为undefined。

变量少，单元值多的情况：

javascript 复制代码 
 // 2. 变量少， 单元值多
    const [a, b] = [1, 2, 3]
    console.log(a) // 1
    console.log(b) // 2

利用剩余参数解决变量少，单元值多的情况：

javascript 复制代码 
// 3.  剩余参数 变量少， 单元值多
    const [a, b, ...c] = [1, 2, 3, 4]
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // [3, 4]  真数组

剩余参数返回的还是一个数组。

防止有undefined传递单元值的情况，可以设置默认值：

javascript 复制代码 
// 4.  防止 undefined 传递
    const [a = 0, b = 0] = [1, 2]
    const [a = 0, b = 0] = []
    console.log(a) // 1
    console.log(b) // 2

允许初始化变量的默认值，且只有单元值为undefined时默认值才会生效。

按需导入，忽略某些返回值：

javascript 复制代码 
 // 5.  按需导入赋值
    const [a, b, , d] = [1, 2, 3, 4]
    console.log(a) // 1
    console.log(b) // 2
    console.log(d) // 4

支持多维数组的结构：

javascript 复制代码 
// const arr = [1, 2, [3, 4]]
    // console.log(arr[0])  // 1
    // console.log(arr[1])  // 2
    // console.log(arr[2])  // [3,4]
    // console.log(arr[2][0])  // 3

    // 多维数组解构
    // const arr = [1, 2, [3, 4]]
    // const [a, b, c] = [1, 2, [3, 4]]
    // console.log(a) // 1
    // console.log(b) // 2
    // console.log(c) // [3,4]


    const [a, b, [c, d]] = [1, 2, [3, 4]]
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(d) // 4
  • 小结：
  1. 变量的数量大于单元值数量时，多余的变量将被赋值为？

undefined。

  1. 变量的数量小于单元值数量时，可以通过什么剩余获取所有的值？

剩余参数...获取剩余单元值，但只能置于最末位。

对象解构：

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。

  • 基本语法：
  1. 赋值运算符 = 左侧的{ }用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量。
  2. 对象属性的值将被赋值给与属性名相同的变量。
  3. 注意解构的变量名不要和外面的变量名冲突，否则报错。
  4. 对象中找不到与变量名一致的属性时，变量值为 undefined。
javascript 复制代码 
<title>对象解构</title>
</head>

<body>
  <script>
    // 对象解构
    // const obj = {
    //   uname: '雪碧宝宝',
    //   age: 18
    // }
    // obj.uname
    // obj.age 

    // const uname = '丸子宝宝' //报错 注意解构的变量名不要和外面的变量名冲突否则报错
    // 解构的语法
    // const { uname, age } = { uname: '雪碧宝宝',age: 18 }
    // // 等价于 const uname =  obj.uname
    // // 要求属性名和变量名必须一直才可以
    // console.log(uname)
    // console.log(age)

    // 1. 对象解构的变量名 可以重新改名  旧变量名: 新变量名
    // const { uname: username, age } = { uname: '雪碧宝宝', age: 18 }
    // console.log(username)
    // console.log(age)

    // 2. 解构数组对象
    const pig = [
      {
        uname: '佩奇',
        age: 6
      }
    ]
    const [{ uname, age }] = pig
    console.log(uname)
    console.log(age)
  </script>

</body>
  • 多级对象解构：
javascript 复制代码 
 <title>多级对象解构</title>
</head>

<body>
  <script>
    // const pig = {
    //   name: '佩奇',
    //   family: {
    //     mother: '猪妈妈',
    //     father: '猪爸爸',
    //     sister: '乔治'
    //   },
    //   age: 6
    // }

    // // 多级对象解构
    // const { name, family: { mother, father, sister } } = pig
    // console.log(name)
    // console.log(mother)
    // console.log(father)
    // console.log(sister)

    const person = [
      {
        name: '佩奇',
        family: {
          mother: '猪妈妈',
          father: '猪爸爸',
          sister: '乔治'
        },
        age: 6
      }
    ]
    const [{ name, family: { mother, father, sister } }] = person
    console.log(name)
    console.log(mother)
    console.log(father)
    console.log(sister)
  </script>

</body>
  • 遍历数组的forEach方法（重点）：

forEach( )方法用于调用数组的每个元素，并将元素传递给回调函数。

主要使用场景：遍历数组的每个元素。

语法：

javascript 复制代码 
被遍历的数组.forEach(function(当前数组元素,当前元素索引号){
   //函数体
})
javascript 复制代码 
<title>forEach遍历数组</title>
</head>

<body>
  <script>
    // forEach 就是遍历  加强版的for循环  适合于遍历数组对象
    const arr = ['red', 'green', 'pink']
    const result = arr.forEach(function (item, index) {
      console.log(item)  // 数组元素 red  green pink
      console.log(index) // 索引号
    })
    // console.log(result)
  </script>

</body>

注意：

  1. forEach主要是遍历数组。
  2. 参数当前数组元素必须要写的，索引号可选。
  • 练习：
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-渲染商品</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      padding-top: 100px;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div class="list">
    <!-- <div class="item">
        <img src="" alt="">
        <p class="name"></p>
        <p class="price"></p>
      </div> -->
  </div>
  <script>
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]
    //1.声明一个字符串变量
    let str = ''
    //2.遍历数组
    goodsList.forEach(item => {
      // console.log(item) //可以得到每一个数组元素  对象{id：'4001172'}
      // const {id} = item 对象解构
      const { name, price, picture } = item
      str += `
    <div class="item">
        <img src=${picture}alt="">
        <p class="name">${name}</p>
        <p class="price">${price}</p>
      </div>
    `
    })
    //3.生成的  字符串  添加给list
    document.querySelector('.list').innerHTML = str


  </script>

</body>

</html>

筛选数组filter方法（重点）：

filter( )方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

主要使用场景：筛选数组符合条件的元素，并返回筛选之后元素的新数组。

返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

参数 ：currentValue必须写，index可选。

因为返回新数组，所以不会影响原数组。

语法：

javascript 复制代码 
被遍历的数组.filter(function(currentValue,index){
   return 筛选条件
})
javascript 复制代码 
<title>筛选数组filter方法</title>
</head>

<body>
  <script>
    const arr = [10, 20, 30]
    // const newArr = arr.filter(function (item, index) {
    //   // console.log(item)
    //   // console.log(index)
    //   return item >= 20
    // })
    // 返回的符合条件的新数组

    const newArr = arr.filter(item => item >= 20)
    console.log(newArr)
  </script>

</body>
  • 练习：
javascript 复制代码 
<!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>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

    .filter {
      display: flex;
      width: 990px;
      margin: 0 auto;
      padding: 50px 30px;
    }

    .filter a {
      padding: 10px 20px;
      background: #f5f5f5;
      color: #666;
      text-decoration: none;
      margin-right: 20px;
    }

    .filter a:active,
    .filter a:focus {
      background: #05943c;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
  </div>
  <div class="list">
    <!-- <div class="item">
      <img src="" alt="">
      <p class="name"></p>
      <p class="price"></p>
    </div> -->
  </div>
  <script>
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '100.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]

    // 1. 渲染函数  封装
    function render(arr) {
      // 声明空字符串
      let str = ''
      // 遍历数组 
      arr.forEach(item => {
        // 解构
        const { name, picture, price } = item
        str += `
         <div class="item">
          <img src=${picture} alt="">
          <p class="name">${name}</p>
          <p class="price">${price}</p>
        </div> 
        `
      })
      // 追加给list 
      document.querySelector('.list').innerHTML = str
    }
    render(goodsList)  // 页面一打开就需要渲染

    // 2. 过滤筛选  
    document.querySelector('.filter').addEventListener('click', e => {
      // e.target.dataset.index   e.target.tagName
      const { tagName, dataset } = e.target
      // 判断 
      if (tagName === 'A') {
        // console.log(11) 
        // arr 返回的新数组
        let arr = goodsList
        if (dataset.index === '1') {
          arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
        } else if (dataset.index === '2') {
          arr = goodsList.filter(item => item.price >= 100 && item.price <= 300)
        } else if (dataset.index === '3') {
          arr = goodsList.filter(item => item.price >= 300)
        }
        // 渲染函数
        render(arr)
      }
    })
  </script>
</body>

</html>
相关推荐
纸上的彩虹9 分钟前
半年一百个页面，重构系统也重构了我对前端工作的理解
前端·程序员·架构
李艺为14 分钟前
根据apk包名动态修改Android品牌与型号
android·开发语言
be or not to be36 分钟前
深入理解 CSS 浮动布局（float）
前端·css
黄河滴滴1 小时前
java系统变卡变慢的原因是什么？从oom的角度分析
java·开发语言
LYFlied1 小时前
【每日算法】LeetCode 1143. 最长公共子序列
前端·算法·leetcode·职场和发展·动态规划
老华带你飞1 小时前
农产品销售管理|基于java + vue农产品销售管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
superman超哥1 小时前
Rust Workspace 多项目管理：单体仓库的优雅组织
开发语言·rust·多项目管理·rust workspace·单体仓库
小徐_23331 小时前
2025 前端开源三年，npm 发包卡我半天
前端·npm·github
C_心欲无痕1 小时前
vue3 - 类与样式的绑定
javascript·vue.js·vue3
kylezhao20191 小时前
C#通过HSLCommunication库操作PLC用法
开发语言·c#
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击03Linux下V2Ray安装配置指南04Claude Code Skills 实用使用手册05电脑检测软件—图吧工具箱06jdk21下载、安装（Windows、Linux、macOS）07UV安装并设置国内源08【踩坑笔记】50系显卡适配的 PyTorch 安装092025-04-03 Latex学习1——本地配置Latex + VScode环境10SQLmap 完整使用指南：环境搭建 + 命令详解 + 实操案例