深入数组方法与应用,筛选条件

最新推荐文章于 2022-11-21 14:02:35 发布
最新推荐文章于 2022-11-21 14:02:35 发布
阅读量330 收藏
点赞数
分类专栏： 小白 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yzhoun/article/details/106954042
版权

算是一个dome功能，实现之后的样式是这样的

在这里插入图片描述
类似于选项卡，当点击all展示所有的卡片
在这里插入图片描述
当点击Female的时候会展示所有男性的卡片在这里插入图片描述
反之点击女性也是一样的
并且还有条件筛选，当点击输入九的时候会展示所有字符当中含有九的男性在这里插入图片描述
该dome运动的一些方法有：

forEach，数组遍历方法

Filter,数组筛选方法

for in 循环，遍历对象方法

indexOf,判断当前值是包含有里面的值

getAttribute 读取元素属性的值

JS设计模式思想（人懵的）

以下是初级代码实现该功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .wrapper{
            width: 400px;
            padding: 10px 15px;
            border: 1px solid #ccc;
            margin: 100px auto 0px;
            border-radius: 6px;
        }
        .wrapper .sWrapper{
            margin-bottom: 20px;
        }
        .wrapper .sWrapper .sText{
            width: 220px;
            height: 25px;
            padding-left: 10px;
            outline: none;
            border-radius: 4px;
            border: 1px solid #777;
            
        }
        .wrapper .sWrapper .btn{
            cursor: pointer;
            color: #3c8dff;
            padding:  0px 5px;
        }
        .wrapper .sWrapper .btn.active{
            color: #fff;
            background-color: #3c8dff;
            border-radius:5px;
        }
        .wrapper .flWrapper ul li{
            border-bottom: 1px solid #999;
            position: relative;
            padding-left: 45px;
            padding-top: 10px;
            padding-bottom: 5px;
        }
        .wrapper .flWrapper ul li img{
            position: absolute;
            width:36px;
            height:36px;
            left: 0;
            top: 14px;
        }
     

        .wrapper .flWrapper ul li .des{
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="sWrapper">
            <input type="text" class="sText">
            <span sex='m' class="btn">Male</span>
            <span sex='f' class="btn">Female</span>
            <span sex='a' class="btn active">All</span>
        </div>
        <div class="flWrapper">
            <ul></ul>
        </div>
    </div>


        var personArr = [
            {'name' : "九依", 'src' : "./img/1.jpg", 'sex' : 'f', 'age' : '19', 'des' : "太高了"},
            {'name' : "夕灿", 'src' : "./img/2.jpg", 'sex' : 'm', 'age' : '19', 'des' : "啊哈哈哈"},
            {'name' : "夕阳灿", 'src' : "./img/3.jpg", 'sex' : 'm', 'age' : '19', 'des' : "今天还没吃饭"},
            {'name' : "小宁", 'src' : "./img/4.jpg", 'sex' : 'f', 'age' : '19', 'des' : "我叫什么"},
            {'name' : "九测", 'src' : "./img/5.jpg", 'sex' : 'f', 'age' : '19', 'des' : "办法没办法"},
        ];
        // 
        
        var oUl = document.getElementsByTagName('ul')[0];   
        var oInput = document.getElementsByTagName('input')[0];
        //记录当前输入的文本
        var filterText = '';
        //记录性别
        var filterSex = 'a';
        function RenderPage (data){
            // 遍历 
            var htmlStr = ' ';
            oUl.innerHTML = ' ';
            data.forEach(function (ele ,index ,self) {
                //字符串拼接代码
               htmlStr = htmlStr + '<li><img src = "' + ele.src + '"></img><p class = "name">' + ele.name+ '</p><p class = "des">' + ele.des + '</p></li>'
            })
            oUl.innerHTML = htmlStr;
        }
        RenderPage(personArr)   

        //添加行为
        oInput.oninput = function(data) {
            //当输入框输入的时候不断触发
            //不断去记录当前输入的值
            filterText = this.value;
            //执行渲染   文本过滤方法    //数组   输入的值进行渲染
            //1. RenderPage(filterArrByText(personArr,this.value))
            //将符合条件的数组存入   过滤文本方法   原始数组     输入的值
            var newArr = filterArrByText(    personArr,  filterText)
            //将符合条件的数组存入  过滤性别的方法  之后的数组  输入的值
            var newArr2 = filterArrBySex(      newArr, filterSex);
            //执行符合之后的数组
            RenderPage(newArr2)

        }
        //根据文本进行过滤的函数 纯函数
        //                  传入的数组   输入的值
        function filterArrByText (data, text){
            if (!text){
                //如果没有值或者是空直接返回数组
                return data;
            }else{
                //  返回一个过滤后的数组    //数组  //位置
               return data.filter(function (ele, index){
                    //    判断数组的Name是否符合条件判断 
                   return ele.name.indexOf(text) != -1;
                })
            }
        }

        //按钮切换的颜色
        //获取当前按钮的所有数组
                     //获取的是一个类数组，需要用数组的slice方法来让他变为数组
        var oBtnArr = [].slice.call(document.getElementsByClassName('btn'), 0);
        //记忆初始按钮的位置
        var lastActiveBtn = oBtnArr[2];
        //遍历数组按钮            数组  位置   数组列
        oBtnArr.forEach(function(ele, index, self){
            //当点击的时候触发事件
            ele.onclick = function(){
         //用更改样式的函数    传入当前点击的按钮
                changeActive(this);
                filterSex = this.getAttribute('sex')
                // getAttribute读出当前按钮属性的值
               //1. RenderPage(filterArrBySex(personArr, this.getAttribute('sex')));
            //将符合条件的数组存入   性别过滤方法   原始数组     输入的值
               var newArr = filterArrBySex(personArr, filterSex)
            //将符合条件的数组存入   过滤文本方法   之后数组     输入的值
               var newArr2 = filterArrByText(newArr, filterText);
               //执行符合之后的数组
               RenderPage(newArr2);
            }
            
        })
        //更改样式的函数方法      //点击的按钮
        function changeActive (curActiveBtn){
             //如果当前点击的按钮是重复样式值就空执行
            if(curActiveBtn.className == 'btn active'){
            }else{
                //否则就执行
                 curActiveBtn.className = 'btn active';
                 //让初始的样式变为无样式
                 lastActiveBtn.className = 'btn';
                 //记忆上一个点击的按钮位置
                 lastActiveBtn = curActiveBtn;
            }
          
        }

        //根据性别过滤的函数方法  //数组  点击的性别
        function filterArrBySex(data, sex){
            //如果性别等于all
            if ( sex == 'a'){
                //直接返回当前的数组
                return data;
            }else{
                //过滤 数组的筛选方法     数组索引每一列   数组索引  数组
                return data.filter(function (ele, index, self){
                    //返回当前点击的性别
                    return ele.sex == sex;
                })
            }
        }

迭代优化，高级模式

优点化
条件增加导致行为增加该如何统一处理
诸多状态如何管理
行为频繁触发操作dom如何提高性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .wrapper{
            width: 400px;
            padding: 10px 15px;
            border: 1px solid #ccc;
            margin: 100px auto 0px;
            border-radius: 6px;
        }
        .wrapper .sWrapper{
            margin-bottom: 20px;
        }
        .wrapper .sWrapper .sText{
            width: 220px;
            height: 25px;
            padding-left: 10px;
            outline: none;
            border-radius: 4px;
            border: 1px solid #777;
        }
        .wrapper .sWrapper .btn{
            cursor: pointer;
            color: #3c8dff;
            padding:  0px 5px;
        }
        .wrapper .sWrapper .btn.active{
            color: #fff;
            background-color: #3c8dff;
            border-radius:5px;
        }
        .wrapper .flWrapper ul li{
            border-bottom: 1px solid #999;
            position: relative;
            padding-left: 45px;
            padding-top: 10px;
            padding-bottom: 5px;
        }
        .wrapper .flWrapper ul li img{
            position: absolute;
            width:36px;
            height:36px;
            left: 0;
            top: 14px;
        }
     

        .wrapper .flWrapper ul li .des{
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="sWrapper">
            <input type="text" class="sText">
            <span sex='m' class="btn">Male</span>
            <span sex='f' class="btn">Female</span>
            <span sex='a' class="btn active">All</span>
        </div>
        <div class="flWrapper">
            <ul></ul>
        </div>
    </div>
    <script src="./js/tool.js"></script>
    <script src="./js/filter/filterArrBySex.js"></script>
    <script src="./js/filter/filterArrByText.js"></script>
    <script src="./js/combineFilter.js"></script>
    <script src="./js/createStore.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>

     var personArr = [
    {'name' : "九依", 'src' : "./img/1.jpg", 'sex' : 'f', 'age' : '19', 'des' : "太高了"},
    {'name' : "夕灿", 'src' : "./img/2.jpg", 'sex' : 'm', 'age' : '19', 'des' : "啊哈哈哈"},
    {'name' : "夕阳灿", 'src' : "./img/3.jpg", 'sex' : 'm', 'age' : '19', 'des' : "今天还没吃饭"},
    {'name' : "小宁", 'src' : "./img/4.jpg", 'sex' : 'f', 'age' : '19', 'des' : "我叫什么"},
    {'name' : "九测", 'src' : "./img/5.jpg", 'sex' : 'f', 'age' : '19', 'des' : "办法没办法"},
];
 

var oUl = document.getElementsByTagName('ul')[0];   
var oInput = document.getElementsByTagName('input')[0];
store.subscribe(function (){
    //更新页面和视图的作用

    //调用整合方法工具
    RenderPage(lsatFilterArr(personArr));
})

function RenderPage (data){
    var htmlStr = ' ';
    oUl.innerHTML = ' ';
    data.forEach(function (ele ,index ,self) {
       htmlStr = htmlStr + '<li><img src = "' + ele.src + '"></img><p class = "name">' + ele.name+ '</p><p class = "des">' + ele.des + '</p></li>'
    })
    oUl.innerHTML = htmlStr;
}
RenderPage(personArr)  
                  //防抖 
oInput.oninput = debounce(function(data) {
    //调用store的订阅方法       文本      当前文本框的值
    store.dispatch({type : 'text', value : this.value },50)
   
})

var oBtnArr = [].slice.call(document.getElementsByClassName('btn'), 0);
var lastActiveBtn = oBtnArr[2];
oBtnArr.forEach(function(ele, index, self){
    ele.onclick = function(){
        changeActive(this);
  //调用store的订阅方法        性别筛选                     读按钮属性的值
        store.dispatch({type : 'sex', value : this.getAttribute('sex') })
        
    
     
    }
})
function changeActive (curActiveBtn){
    if(curActiveBtn.className == 'btn active'){
    }else{
         curActiveBtn.className = 'btn active';
         lastActiveBtn.className = 'btn';
         lastActiveBtn = curActiveBtn;
    }
  
}

在此基础上引入了一个工具集合包


//封装一个工具库          传入的两个方法
function combineFilter(config){
    //返回一个函数     数组    
    return function (data){
        //遍历对象                    遍历每个方法
                    for (var prop in config){
        //  console.log(prop, config[prop], state[prop])
    //data等于筛选完之后的数组      第一个方法  数组    筛选条件
        data = config[prop](data,store.getState(prop))
     }
     //返回数组
     return data;
    }
}
//lastFilterArr相当于对象合集，他等于执行一个对象之后的结果
var lsatFilterArr = combineFilter({
    text : filterArrByText,
    sex : filterArrBySex
})

引入方法功能 filterArrByText

function filterArrByText (data, text){
    if (!text){
        return data;
    }else{
       return data.filter(function (ele, index){
           return ele.name.indexOf(text) != -1;
        })
    }
}

引入方法功能 filterArrBySex

function filterArrBySex(data, sex){
    if ( sex == 'a'){
        return data;
    }else{
        return data.filter(function (ele, index, self){
            return ele.sex == sex;
        })
    }
}

封装接口 combineFilter

//封装一个工具库          传入的两个方法
function combineFilter(config){
    //返回一个函数     数组    
    return function (data){
        //遍历对象                    遍历每个方法
                    for (var prop in config){
        //  console.log(prop, config[prop], state[prop])
    //data等于筛选完之后的数组      第一个方法  数组    筛选条件
        data = config[prop](data,store.getState(prop))
     }
     //返回数组
     return data;
    }
}
//lastFilterArr相当于对象合集，他等于执行一个对象之后的结果
var lsatFilterArr = combineFilter({
    text : filterArrByText,
    sex : filterArrBySex
})

笔记自渡一教育，哎人给我看傻了。

九依
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
筛选出两个数组中的元素
Tian_____的博客
02-24 264
两个数组不同的元素 let list= []; list = this.array1.filter(item=>{ return array2.indexOf(item) === -1 }); 两个数组相同的元素 let list= []; list = this.array1.filter(item=>{ return array2.indexOf(item) ==...
hk pic.net forum.php,HC-SR04 problem with pic18f24k22.
热门推荐
weixin_32136203的博客
04-10 8万+
2021/03/26 00:11:57proestpaHello, I have a problem with HCSR04 ultrasonic distance sensor. I wrote a code that works perfectly in proteus simulator but when I uplode it in real mikrochip it stop worki...
flutter 数组筛查功能实现
半身风雪
11-21 3158
前一段时间，项目需要进行数组筛查工作，需要将一个大数组中的某些相同数据，筛查出来并分组，本篇文章将记录我的数据筛查文档
Age and Gender Classification using Convolutional Neural Networks
moggyna的博客
03-05 3011
Age and Gender Classification using Convolutional Neural NetworksGil Levi and Tal HassnerDepartment of Mathematics and Computer ScienceThe Open University of [email protected] hassner@openu....
JavaScript常用数组元素搜索或过滤的四种方法
JackieDYH的博客
08-31 3525
无需使用for循环即可搜索数组如果你想找到在符合特定条件的阵列中的所有项目，使用filter。如果你想检查是否至少有一个项目符合特定的条件，请使用find。如果你想检查一个数组包含一个特定的值，请使用includes。如果要在数组中查找特定项目的索引，请使用indexOf。...
.NET之美：.NET关键技术深入分析
12-27
8.1.2位、字节和字节数组 8.2流 8.2.1 关于流的类比 8.2.2使用流进行文件复制 8.2.3 流的类型体系 8.3序列化 8.3.1基本操作 8.3.2事件响应 8.3.3 自定义序列化过程 8.4本章小结 第9章.NET中的加密和解密 ...
PHPCourse:PHP课程资料
05-20
数组深入数组方法运营商流量控制声明IF | 转变虽然| 对于| 佛瑞奇项目{个人分析考试} 深层功能嵌入范围和超级市场服务器请求和标头控制日期和时间文件和目录项目{商业助手时间管理器和与Cv Maker搭配的衣服推荐} ...
CLR.via.C#.(中文第3版)(自制详细书签)Part2
04-04
《CLR via C#(第3版) 》针对.NET Framework 4.0和多核编程进行了全面更新和修订，是帮助读者深入探索和掌握公共语言运行时、C#和.NET开发的重要参考，同时也是帮助开发人员构建任何一种应用程序(如Microsoft ...
C#5.0本质论第四版(因文件较大传的是百度网盘地址)
10-16
4．1．7　语句与方法调用的比较　108 4．2　方法的声明　108 4．2．1　形式参数声明　109 4．2．2　方法返回类型声明　110 4．3　using指令　111 4．4　Main()的返回值和参数　114 4．5　方法的参数　116 4．5．1　...
CLR.via.C#.(中文第3版)(自制详细书签)
12-27
《CLR via C#(第3版) 》针对.NET Framework 4.0和多核编程进行了全面更新和修订，是帮助读者深入探索和掌握公共语言运行时、C#和.NET开发的重要参考，同时也是帮助开发人员构建任何一种应用程序(如Microsoft ...
Android-一款通用的筛选组件支持单选复选多级筛选筛选联动筛选数据懒加载
08-13
一款通用的筛选组件，支持单选，复选，多级筛选，筛选联动，筛选数据懒加载
Visual C#2010 从入门到精通(Visual.C#.2010.Step.By.Step).完整去密码锁定版 I部分
07-31
2.5.2 深入了解算术操作符 35 2.5.3 控制优先级 37 .2.5.4 使用结合性对表达式进行求值 38 2.5.5 结合性和赋值操作符 38 2.6 变量的递增和递减 39 2.7 声明隐式类型的局部变量 40 第2章快速参考 42 第3章 ...
CLR.via.C#.(中文第3版)(自制详细书签)Part1
04-04
《CLR via C#(第3版) 》针对.NET Framework 4.0和多核编程进行了全面更新和修订，是帮助读者深入探索和掌握公共语言运行时、C#和.NET开发的重要参考，同时也是帮助开发人员构建任何一种应用程序(如Microsoft ...
CLR.via.C#.(中文第3版)(自制详细书签)Part3
04-04
《CLR via C#(第3版) 》针对.NET Framework 4.0和多核编程进行了全面更新和修订，是帮助读者深入探索和掌握公共语言运行时、C#和.NET开发的重要参考，同时也是帮助开发人员构建任何一种应用程序(如Microsoft ...
Jpa Repository使用自定义sql
blurooo的博客
10-17 3万+
1. 使用@Query对接口方法简单标注为jpql查询@Query("select u from User u where u.sex=:sex") public List<User> getUsersBySex(@Param("sex") String sex); @Query("select u from User u where u.sex=?1") public List<User> get
如何进行筛选数组（源码解析）
...
09-01 530
筛选数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&
数组的遍历方式和筛选（简易）
m0_66333916的博客
04-08 1335
常用的几种方法： 1、用for循环遍历 2、用for...in...方式遍历 3、用forEach方式 4、用filter，具备筛选过滤数组中满足需要的函数 filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) 5、map方法：可以循环遍历原数组，然后根据新的要求输出一个新的数组 <script&gt..
数组——筛选数组
小鱼儿~同学
09-05 5109
将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于10的元素选出来，放入新数组 实现分析： 1. 声明一个新的空数组，用来存放 >=10 的元素 2. for循环遍历数组中的每个元素，判断是否大于等于10，将其存到声明的空数组中 3. 代码实现如下： 方法一：(优选) var arr = [2, 0, 6, 1, 77, 0, 52, 0, ...
Array.filter()
最新发布
07-28
Array.filter()是JavaScript中的一个数组方法，它用于创建一个新数组，其中包含满足指定条件的原始数组的元素。该方法接受一个回调函数作为参数，该回调函数用于定义过滤条件。回调函数将被应用于原始数组的每个元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值