学习记录-js基础-数据筛选

原创 已于 2025-03-17 19:43:53 修改 · 1.8k 阅读 · 20 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#学习 #javascript #开发语言
于 2025-03-16 14:35:30 首次发布

目录

数据筛选功能描述

单击显示数据区间按钮，映射出符合该区间数据的元素

实现效果

在这里插入图片描述

数据筛选实现步骤

1. 准备阶段

理解映射和解构的概念，掌握forEach，filter函数

代码含义
forEach()遍历数组，无返回值
filter()遍历数组，有返回值，return后接条件，会将符合条件的数组元素保存在返回值中，形成新数组
{name,age}=person将person对象中的name，age属性赋值给name，age

获得初始数据

    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',
      },
    ]

html框架

  <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>

2. 数据筛选

封装映射函数，利用事件委托和自定义属性给按钮绑定点击事件，当符合条件时，将符合条件的数据映射到html中

  1. 封装渲染函数，先定义一个空数组，然后用filter或者forEach遍历获得的数组对象数据，接收后与空字符串拼接，或者直接与字符串拼接，最后将字符串写到对应的位置中
    function addData(arr) {
      let str = ''			//定义空字符串
      arr.forEach(({ name, price, picture }) => {			//forEach遍历每遍历一次就将其与字符串str拼接，并用name，price，picture等解构forEach中的item
        str += `<div class="item">
	      <img src="${picture}" alt="">
	      <p class="name">${name}</p>
	      <p class="price">${price}</p>
	    </div>`
      })
      const list = document.querySelector('.list')
      list.innerHTML = str				//最后将字符串写入对应位置中
    }
  1. 利用事件委托和自定义属性判断数据，并将其渲染到对应位置中
		const filter = document.querySelector('.filter')		
	    filter.addEventListener('click', function (e) {					//利用事件委托
	      if (e.target.tagName === "A") {
	        if (e.target.dataset.index === '1') {					//利用自定义函数筛选条件
	          const arr = goodsList.filter(({ price }) => price <= 100 && price >= 0)	//利用filter有返回值的特性筛选条件
	          addData(arr)					//调用渲染函数
	        } else if (e.target.dataset.index === '2') {
	          const arr = goodsList.filter(({ price }) => price <= 300 && price > 100)
	          addData(arr)
	        } else if (e.target.dataset.index === '3') {
	          const arr = goodsList.filter(({ price }) => price > 300)
	          addData(arr)
	        } else {
	          addData(goodsList)					//最后一项为显示全部
	        }
	      }
	    })

完整实例代码

<!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',
      },
    ]
    function addData(arr) {
      let str = ''
      arr.forEach(({ name, price, picture }) => {
        str += `<div class="item">
      <img src="${picture}" alt="">
      <p class="name">${name}</p>
      <p class="price">${price}</p>
    </div>`
      })
      const list = document.querySelector('.list')
      list.innerHTML = str
    }
    const filter = document.querySelector('.filter')
    filter.addEventListener('click', function (e) {
      if (e.target.tagName === "A") {
        if (e.target.dataset.index === '1') {
          const arr = goodsList.filter(({ price }) => price <= 100 && price >= 0)
          addData(arr)
        } else if (e.target.dataset.index === '2') {
          const arr = goodsList.filter(({ price }) => price <= 300 && price > 100)
          addData(arr)
        } else if (e.target.dataset.index === '3') {
          const arr = goodsList.filter(({ price }) => price > 300)
          addData(arr)
        } else {
          addData(goodsList)
        }
      }
    })
  </script>
</body>

</html>
一个JavaScript数据筛选器（三）——格式化筛选器
coolarcom的专栏
09-10 1174
通过前文对基本筛选器和数组筛选器的介绍
js筛选数据的方法
m0_52357960的博客
08-05 4456
例子:从list数组中，取出 水果类（fruits）下的水果商品名称 (fruitName)filter() 方法实现。
javascript 的筛选方法(多种方法细解)
lyq1948的博客
07-15 3190
如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。如果没有指定第二个参数，prev 的值就是数组的第一项值，cur 的值就是数组的第二项值。reduce()方法详解:是 JavaScript 数组的一个高阶函数，它可以对数组中的元素进行迭代，并返回一个单一的值。1.当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
js查找筛选的方法
2301_79265530的博客
10-24 674
Array.prototype.every(): every() 方法测试数组的所有元素是否通过由提供的函数实现的测试。Array.prototype.some(): some() 方法测试数组的某些元素是否通过由提供的函数实现的测试。Array.prototype.map(): map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。Array.from(): Array.from() 方法创建一个新的数组实例，从一个可迭代的对象（如字符串或类似数组的对象）。
JavaScript 查找、筛选的几种方式
yhj68100055的博客
02-07 2285
JavaScript 查找、筛选的几种方式
JS数组筛选
最新发布
shangan_3的博客
09-17 838
JS数组筛选
js 前端根据多个条件筛选过滤数据
Sunshine_Jian的博客
11-03 1万+
场景：有多个输入框，输入一个及以上的条件，实现数据过滤。 let data = [ { name: '名侦探柯南', price: 13, num:108, hot:0, status:1 }, { name: '大侦探皮卡丘', price: 13, num:151, hot:1, status:0 }, { .
js筛选多个条件_Excel常规筛选，你真的会用吗
weixin_35695434的博客
12-04 596
文/施娟儀 首发于一周进步Excel 中的「排序」和「筛选」，是我们再熟悉不过的数据处理工具了吧！其中「筛选」功能在数据很多的时候，用来提取出符合你要求的数据，效率非常高。比如说，在一堆部门人员信息中提取出运营部的人员名单，或者在本月销售商品中筛选出销量大于10000的商品，都是非常基础的操作：只要点击数据区域的某一单元格，然后在「数据」选项卡——「排序和筛选」中点击「筛选」，再在下拉菜...
html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
weixin_42127020的博客
06-07 2376
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间：2020-08-29 09:26:37来源：脚本之家阅读：103作者：Marx-link本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能。分享给大家供大家参考，具体如下：往往有些时候，我们把数据从数据库读取出来，显示到table里面，而此时来了个新需求，要在一个搜索框内输入关键字，表格的内容进行即时的筛选。而即...
前端一些工具函数
蘅潇嗜玉
05-26 1053
1.邮箱 export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) } 2.手机号码 export const isMobile = (s) => { return /^1[0-9]{10}$/.te...
JS数组过滤 简单-------＞多条件筛选
caizhuangzhuang的博客
02-08 4037
js筛选filter
js中的数组筛选
vue
05-03 1万+
有一个需求是在前端部分完成筛选功能，一次拿到所有数据，然后根据条件筛选。通常情况下筛选是后台给接口，在数据量不大的情况下，也有人可能会遇到前端筛选这样的情况。 一般情况下的单条件筛选，数组的filter方法就能够满足需求，本文讨论的重点是多条件下的复合筛选，并列出了几个相关知识点。 // 这个是例子中的被筛选数组 var aim = [ {name:'Anne', age: 23, g...
JavaScript中数据过滤的几种方法
zzx262625的博客
10-08 5921
JavaScript是一种广泛使用的编程语言，它提供了多种方法来对数据进行过滤。在本文中，我们将介绍JavaScript中常见的几种数据过滤方法，并提供相应的示例。
js 数组筛选的方法
lixiaoyan93的博客
06-03 1万+
1、判断数组中是否每个对象都不包含sex这个字段 let arr = [ { name: 'Tom', age: 22 }, { name: 'Sun', age: 23 }, { name: 'Mack', age: 25, sex: '男' }, ] arr.every(item => !('sex' in item)) 返回结果：f
js 实现筛选功能
wjianbo的博客
11-04 1894
功能 通过复选框对显示内容进行筛选，如，勾选后仅显示在线用户。 代码 js ※需 jQuery。 function filter() { var check =document.getElementById('checkbox'); var members = $('.member'); var status = $('.memberStatus'); if (check.checked) { members.each(function(i, member) { if (status[
js筛选集合与查找对象
s_156的博客
07-19 1205
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。在js中，查找一个数组中符合条件的一个对象（一个元素）或者筛选出一个数组中符合条件的多个对象（元素）形成的新数组。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。注意: find() 对于空数组，函数是不会执行的。注意: find() 并没有改变数组的原始值。一、查找一个find。
JS-数据筛选
z16638522031的博客
07-25 242
【代码】JS-数据筛选。
JS中的数组过滤，从简单筛选到多条件筛选
热门推荐
callmeCassie的博客
07-07 4万+
有一个需求是在前端部分完成筛选功能，一次拿到所有数据，然后根据条件筛选。通常情况下筛选是后台给接口，在数据量不大的情况下，也有人可能会遇到前端筛选这样的情况。 一般情况下的单条件筛选，数组的filter方法就能够满足需求，本文讨论的重点是多条件下的复合筛选，并列出了几个相关知识点。 // 这个是例子中的被筛选数组 var aim = [ {name:'Anne', age: 23, gen...
JS 数组对象的筛选、去重、排序
aaa1227302460的博客
04-16 1494
Name。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值