自学内容网 自学内容网
自学内容网 > 正文

JavaScript进阶笔记--解构赋值

🕗 发布于 2024-10-12 01:54 javascript  笔记  udp  

解构赋值

数组解构

对于数组中的值赋予对应名字 ==> 将数组的单元值快速批量赋值给一系列变量

 let [a, b, c] = [1, 2, 3];
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
//利用剩余参数
    let [x, y, ...z] = [1, 2, 3, 4, 5];
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // [3, 4, 5]
    let [name, age, ...rest] = "张三,20,男,180,身高170cm";
    console.log(name); // 张三
    console.log(age); // 20
    console.log(rest); // ["男", "180", "身高170cm"]
//利用剩余参数及逗号来获取需要的数组元素
    let [, , ...others] = [1, 2, 3, 4, 5];
    console.log(others); // [3, 4, 5]
    let [head, ...tail] = [1, 2, 3, 4, 5];
    console.log(head); // 1
    console.log(tail); // [2, 3, 4, 5]

    const arr = [1, 2, 3];
    const [a1, b1, c1] = arr;
    console.log(a1); // 1
    console.log(b1); // 2
    console.log(c1); // 3

    const pc = ["he", "lx", "xm", "fz"];
    const [hr, lx, mi, fz] = pc;
    console.log(hr); // he
    console.log(lx); // lx
    console.log(mi); // xm
    console.log(fz); // fz

    function getValue() {
      return [100, 60];
    }
    const [x2, y2] = getValue();
    console.log(x2); // 100
    console.log(y2); // 60
对象解构

属性名要与变量名相同，也可改变量名

在实际开发中，可以先把整个对象从后端进行获取，然后在函数内部通过解构实现某个特定数据的单独渲染

 const obj = {
      uname: 'longdong',
      age: 25
    };
    const { uname, age } = obj;
    console.log(uname);
    console.log(age);
    const obj1 = {
      name: 'longdong',
      age: 25
    };
    const { name: username, age: userage } = obj1;
    console.log(username);
    console.log(userage);

    const objarr = [{
      uname: 'hotpot',
      age: 26
    }]
    const [{ uname: username1, age: userage1 }] = objarr;
    console.log(username1);
    console.log(userage1);
    //多级对象解构
    const pig = {
      name: '佩奇',
      family: {
        mother: '猪妈妈',
        father: '猪爸爸',
        sister: '乔治'
      },
      age: 6
    }
    const { name: pigname, family: { mother, father, sister }, age: pigage } = pig;
    console.log(pigname);
    console.log(mother);
    console.log(father);
    console.log(sister);
    console.log(pigage);
forEach方法（重点）

用于遍历数组，不返回数组（和map不一样），索引号可以不写

//与map不同的是，forEach()方法只对数组中的每个元素执行一次回调函数，并且没有返回值。
    const arr = ['pig', 'sheep', 'cow', 'horse', 'goat'];
    arr.forEach(function (animal) {
      console.log(animal);
    })

案例

渲染商品案例

<!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>
  <div class="list">
  </div>
  <script>
    const list = [{
      "name": "商品1",
      "price": 100
    },
    {
      "name": "商品2",
      "price": 200
    },
    {
      "name": "商品3",
      "price": 300
    }
    ];
    let str = '';
    //遍历数组
    list.forEach(item => {
      //拼接HTML字符串
      const { name, price } = item;
      str += `
      <div class="item">
      <h2>${name}</h2>
      <p>价格：${price}</p>
      <button>加入购物车</button>
      <button>立即购买</button>      
      <button>收藏</button>
      <button>关注</button>
      <button>评论</button>
      <button>分享</button>
      <button>举报</button>
    </div>
    `;
    });
    document.querySelector('.list').innerHTML = str; // 渲染商品 HTML    


  </script>
</body>

</html>

在这里插入图片描述

价格筛选商品案例

模块划分：

  1. Tab栏切换：可用css伪类选择器focus和actived来进行点击和获取焦点后赋予样式
  2. 渲染模块：遍历数组，字符串拼接，赋予标签内容
  3. 筛选模块：通过filer方法来筛选数组，再进行渲染，并通过循环来对每个a进行绑定点击事件
<!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 data-index="4" 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: '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',
      },
    ];
    function render(goodsList) {
      let str = '';
      goodsList.forEach(good => {
        const { name, price, picture } = good;
        str += `
    <div class="item">
      <img src="${picture}" alt="">
      <p class="name">${name}</p>
      <p class="price">${price}</p>
    </div> 
    `
      });
      document.querySelector('.list').innerHTML = str;
    };
    render(goodsList);
    // 3. 绑定事件
    const filterBtns = document.querySelectorAll('.filter a');
    filterBtns.forEach(btn => {
      btn.addEventListener('click', e => {
        //阻止默认行为
        e.preventDefault();
        if (btn.dataset.index === '1') {
          render(goodsList.filter(good => good.price >= 0 && good.price <= 100));
        } else if (btn.dataset.index === '2') {
          render(goodsList.filter(good => good.price > 100 && good.price <= 300));
        } else if (btn.dataset.index === '3') {
          render(goodsList.filter(good => good.price > 300));
        } else if (btn.dataset.index === '4') {
          render(goodsList);
        } else {
          ;
        }
      })
    })



  </script>
</body>

</html>
filter方法

用于筛选数组，返回一个新数组，需要有声明一个数组进行接收【可简写】

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const fliterArr = arr.filter(item => item > 3);
    console.log(...fliterArr);
    const fliterArr2 = arr.filter((item, index) => {
      return item > 3 && index < 5;
    });
    console.log(...fliterArr2);

原文地址：https://blog.csdn.net/wozhaonue_w/article/details/142864413

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024