数组应用之筛选之叠加筛选。

利用数组的filter方法实现。

一个给定的后台数据包含了很多属性（姓名，性别，年龄等等）对此我们要进行特定的数据筛选。

 

 

var person = [

{ name: '刘小华', src: '1.jpg', sex: 'male', des: '漂亮的女孩子' },

{ name: '王花', src: '2.jpg', sex: 'male', des: '漂亮的程序猿' },

{ name: '陈军', src: '3.jpg', sex: 'female', des: '我是一个学霸' },

{ name: '王华', src: '4.jpg', sex: 'female', des: '我喜欢游泳' },

{ name: '陈思思', src: '5.jpg', sex: 'male', des: '我喜欢看电影' },

{ name: '马学习', src: '6.jpg', sex: 'female', des: '我爸我妈爱学习' },

{ name: '马美丽', src: '7.jpg', sex: 'male', des: '我妈是美丽得妈妈' },

{ name: '马冬梅', src: '7.jpg', sex: 'male', des: '我妈是美丽得妈妈' }

 

];

 

var oUl = document.getElementById('list1'); //获取HTML中的需要插入li的ul

var oInp = document.getElementById('inp'); //获取输入姓名的输入框

var sexUl = document.getElementsByClassName('list')[0]; //获取性别选项框（ul里的li）

function render(list) {

var str = '';

list.forEach(function (ele, index) {

// ele.name/ele.src/ele.des

str += '<li>\

<img src="./'+ ele.src + '" alt="">\

<span class="name">'+ ele.name + '</span>\

<span class="ms">'+ ele.des + '</span>\

</li>'

})

oUl.innerHTML = str;

}

render(person); //初始是渲染结构样式（没有进行筛选）

 

oInp.oninput = function () { //获取输入框的值

var value = this.value;

render(filterText(value, person));

    

    //render(addfn(filter, person)); 叠加筛选的写法

 

}

//根据输入框的值筛选出对应的新数组交给render方法进行渲染

function filterText(text, arr) {

return arr.filter(function (ele) {

if (ele.name.indexOf(text) !== -1) { //筛选出满足的数据

return true;

}

})

}

//给性别选项添加点击事件

sexUl.addEventListener('click', function (e) {

if (e.target.tagName == 'LI') {

var sex = e.target.getAttribute('sex');

render(filterSex(sex, person));

 

        //render(addfn(filter, person)); 叠加筛选写法

 

}

})

//筛选出需要的性别

function filterSex(sex, arr) {

if (sex == 'all') {

return arr;

} else {

return arr.filter(function (ele, index) {

if (sex == ele.sex) {

return true;

}

})

}

}

//根据内容筛选value--->filter筛选数组(newArr)-->新数组-->render(newArr)-->筛选渲染成功

 

以上能实现简单的筛选。但是我们需要的是能在姓名或者性别筛选后再次筛选。

叠加筛选：

 

//创建两个对象保存着筛选函数的函数名，一个保存着当前筛选状态的对象

var filter = {

value : filterText,

sex : filterSex

}

var state = {

value : '',

sex : 'all'

}

//叠加筛选，lastArr开始保存着初始数据（因为没调用筛选功能）

function addfn(obj,arr){

var lastArr = arr; //再次调用时获取的是上次筛选出来的数据

for(var prop in obj){

lastArr = obj[prop](state[prop],lastArr);

}

console.log(state[prop]);

return lastArr;

//调用筛选方法赋值给lastArr,这样就能实现多次筛选。

}

 

对于整体的封装和选项框的防抖问题。下次探讨~