【干货】原生js做的一维数组对象，二维数组对象的模糊查询（前端网备份）...

朱雀 2021-12-22 12:57 245阅读 0赞

# 最重要的是二维数组 #

## 小程序通讯录(student) ##

###### 后台的数据格式 ######

![172923oqvgwzqqg29gze4j.png][]

##### wxml #####

##### 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) {}

![174720q3rhrtwzroywt7y7.png][]

下图原因是因为没有加

if (item.user[i][type[j]].indexOf(value) >= 0) {}

![174916vodalu3a8fc7akde.png][]

# 一维数组: #

正式版一位数组:

转载于:https://www.cnblogs.com/lsc-boke/p/10997160.html

[172923oqvgwzqqg29gze4j.png]: https://cdn.files.qdfuns.com/note/content/picture/201901/02/172923oqvgwzqqg29gze4j.png
[174720q3rhrtwzroywt7y7.png]: https://cdn.files.qdfuns.com/note/content/picture/201901/02/174720q3rhrtwzroywt7y7.png
[174916vodalu3a8fc7akde.png]: https://cdn.files.qdfuns.com/note/content/picture/201901/02/174916vodalu3a8fc7akde.png