【干貨】原生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}]