【干货】原生js做的一维数组对象,二维数组对象的模糊查询(前端网备份)
最重要的是二维数组
小程序通讯录(student)
后台的数据格式
wxml
<input bindconfirm="search" bindinput="bindinput" confirm-type="搜索" class="wxSearch-input" placeholder="姓名" />
js
正式版顺序搜索算法
先来说几个坑:
1>比如 var field = "user";
item.field 就会报错,写法只能为item[field]
2>比如type为number的时候,管理员没有这个number字段,所以
item[field][i][type[j]].indexOf(value)就会报错,所以要再上面判断一层,underfind的时候把他绕过去,增加一条
if (item[field][i][type[j]] != undefined || item[field][i][type[j]] != null)
/*二维数组对象模糊搜索 dataList 为二维数组数据结构 value 为input框的输入值 type 为指定想要搜索的字段名,array格式 ["name", "number"]; field 为二维数组的字段 比如二维数组字段名为user */ function filterData(dataList, value, type, field) { var s = dataList.filter(function(item, index, arr) { for (let i = 0; i < item[field].length; i++) { for (let j = 0; j < type.length; j++) { console.log(item[field][i][type[j]]); if (item[field][i][type[j]] != undefined || item[field][i][type[j]] != null) { if (item[field][i][type[j]].indexOf(value) >= 0) { var arr2 = []; var s = item[field].filter(function(items, indexs, arrs) { if (items[type[j]].indexOf(value) >= 0) { arr2.push(items); return arr2; } }) item.user = s; return item; } } } } }); return s; }
第一版有点缺陷的算法
bindinput: function (options) { var value = options.detail.value; value = value.replace(/^\s+|\s+$/g, ""); this.setData({ value: value }) }, search(e) { var value = this.data.value; var type = ["name","number"]; if (value == "") { console.log("我是空"); this.getData(this.data.id, this.data.type, ""); } var li = this.filter(this.data.group, value, type); //这里为搜索不到值得时候返回得空数组,就让他重新查一次 console.log(li); if (li.length == 0) { this.getData(this.data.id, type, ""); } else { this.setData({ group: li }) } }, //重头戏来了 /*dataList为上图图片得后台数据结构; value为input输入值; type为想查询得类型,比如name,number字段*/ filter: function (dataList, value, type) { var s = dataList.filter(function (item, index, arr) { //item返回得是一维数组结构 //下面遍历二维user数组对象 for (let i = 0; i < item.user.length; i++) { //遍历type数组对象,判断下来要筛选的字段 for (let j = 0; j < type.length; j++){ //判断二维数组里面得name或者number得值里面包含value不;如果不包含返回-1就不继续执行 if (item.user[i][type[j]].indexOf(value) >= 0) { var arr2 = []; //items返回得是二维数组结构得字段 var s = item.user.filter(function (items, indexs, arrs) { //判断二维数组里面得name或者number得值里面包含value不;如果不包含返回-1就不继续执行 //然后把二位里面得多个对象结果都存到新数组arr2去 //然后返回二维得s过滤器 if (items[type[j]].indexOf(value) >= 0) { arr2.push(items); return arr2; } }) //这里得s得值为arr2,因为item为一维过滤器,实际在遍历种 //所以item.user可以返回当前所对应得那一条数组,改变里面得二维值,为需要的 item.user = s; //返回item,为过滤器筛选好了的给上一层s return item; } } } }); //返回到search里面得li去接收 return s; },
遇到的深坑
下图原因是因为没有加
if (items[type[j]].indexOf(value) >= 0) {}
下图原因是因为没有加
if (item.user[i][type[j]].indexOf(value) >= 0) {}
一维数组:
正式版一位数组:
var type = ["name", "id"]; var dataList = [ { name: "蓝有",number: "1" }, { name: "蓝天", number: "2" }, { name: "李天一", number: "3" }, { name: "懒", number: "4" }, ] var value = "天"; /*一维数组对象模糊搜索 dataList 为一维数组数据结构 value 为input框的输入值 type 为指定想要搜索的字段名,array格式 ["name", "number"]; */ function filterOne(dataList, value, type) { var s = dataList.filter(function(item, index, arr) { console.log(item) for (let j = 0; j < type.length; j++) { if (item[type[j]] != undefined || item[type[j]] != null) { if (item[type[j]].indexOf(value) >= 0) { return item; } } } }); return s; }
var list = ["蓝有","蓝天",'李天一',"懒"]; var list = [ {name:"蓝有",id:1}, {name:"蓝天",id:2}, {name:"李天一",id:3}, {name:"懒",id:4}, ] var len = list.length; var arr = []; for(var i=0;i<len;i++){ //如果字符串中不包含目标字符会返回-1 if(list[i].name.indexOf("天")>=0){ console.log(list[i]);//{name: "蓝天", id: 2} //{name: "李天一", id: 3} arr.push(list[i]); } } console.log(arr) ; //[0: {name: "蓝天", id: 2} //1: {name: "李天一", id: 3}]