最重要的是二維數組

小程序通訊錄(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，為過濾器篩選好了的給上一層sreturn 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++){//如果字符串中不包含目標字符會返回-1if(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}]

?

轉載于:https://www.cnblogs.com/lsc-boke/p/10997160.html

總結

以上是生活随笔為你收集整理的【干货】原生js做的一维数组对象，二维数组对象的模糊查询（前端网备份）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。