前端实现模糊搜索 indexOf、split 、match、test
- indexOf方法
语法:stringObject.indexOf(searchvalue, fromindex)
参数:searchvalue 必需。规定需检索的字符串值。 fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
getArrayByName(list, keyWord) { //本地模糊搜索
/**
* 使用indexof方法实现模糊查询
* @param {Array} list 进行查询的数组
* @param {String} keyWord 查询的关键词
* @return {Array} 查询的结果
*/
var result = [];
for (var key in list) {
for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
if (list[key].users[i].name.indexOf(keyWord) >= 0) {
result.push(list[key].users[i])
}
}
}
return result
},
- split 方法
语法:stringObject.split(separator, howmany)
参数:separator 必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
getArrayByName(list, keyWord) { //本地模糊搜索
/**
* 使用split方法实现模糊查询
* @param {Array} list 进行查询的数组
* @param {String} keyWord 查询的关键词
* @return {Array} 查询的结果
*/
var result = [];
for (var key in list) {
for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
if (list[key].users[i].name.split(keyWord).length > 1) {
result.push(list[key].users[i])
}
}
}
return result
},
- match 方法
语法:stringObject.match(searchvalue) 或 stringObject.match(regexp)
参数:searchvalue 必需。规定要检索的字符串值。regexp 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。
getArrayByName(list, keyWord) { //本地模糊搜索
/**
* 使用match方法实现模糊查询
* @param {Array} list 进行查询的数组
* @param {String} keyWord 查询的关键词
* @return {Array} 查询的结果
*/
var result = [];
for (var key in list) {
for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
if (list[key].users[i].name.match(keyWord) != null) {
result.push(list[key].users[i])
}
}
}
return result
},
- test方法
语法:RegExpObject.test(string)
参数:string 必需。要检测的字符串。
getArrayByName(list, keyWord) { //本地模糊搜索
/**
* 使用test方法实现模糊查询
* @param {Array} list 进行查询的数组
* @param {String} keyWord 查询的关键词
* @return {Array} 查询的结果
*/
var reg = new RegExp(keyWord);
var result = [];
for (var key in list) {
for(let i = 0; i < list[key].users.length; i++){ //根据数据格式更改自己的循环格式
if (reg.test(list[key].users[i].name)) {
result.push(list[key].users[i])
}
}
}
return result
},
以上四种方法,对于数据量很多数据,前端进行本地搜索,要好过于去请求后台接口。
注意:match方法性能消耗要比其他两个耗费的时候多到3倍左右,所以不推荐match方法。
注意:test方法功能比较强大,比如说不区分大小写,那我们直接修改正则就行。