对数组对象进行过滤

  今天在实现对数组对象进行过滤的时候,因为之前很少实现这个功能,所以对filter、RegExp和test都没有深入的理解,常见的就是百度找实现方法

但是,Excuse me ??? 居然没有对数组对象过滤完全的解决方法,只有各种各样简单的实现。or~~~ 一些看的我云里雾里的代码,原谅我是小菜鸟一枚!!!

好吧,我还是自食其力吧!!!废话不多说,进入正题。

  这篇文章使用的是filter、 RegExp 和test()来实现过滤,既然如此,先定义一个初始数组,然后再看看三个的官方文档的介绍。

 const defaultArray = [{  //初始数组
    title: '板蓝根片',
    company: '甘肃河西制药有限责任公司',
    num: '36片/盒'
  },{
    title: '西咪替丁',
    company: '甘肃河西制药有限责任公司',
    num: '36片/盒'
  },{
    title: '西地兰',
    company: '甘肃河西制药有限责任公司',
    num: '36片/盒'
  },{
    title: '黄连素',
    company: '甘肃河西制药有限责任公司',
    num: '36片/盒'
  },{
    title: '大仑丁',
    company: '甘肃河西制药有限责任公司',
    num: '36片/盒'
  },{
    title: '雷米封',
    company: '甘肃河西制药有限责任公司',
    num: '36片/盒'
  },{
    title: '先锋4',
    company: '甘肃河西制药有限责任公司',
    num: '36片/盒'
 }]

官方文档介绍

Array filter() 方法

  定义:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

  语法:array.filter(function(currentValue,index,arr), thisValue) 

  参数说明:    

    function(currentValue,index,arr):必须。函数,数组中的每个元素都会执行这个函数
      函数参数: 

        currentValue:必须。当前元素的值

        index:可选。当前元素的索引值

        arr:可选。当前元素属于的数组对象

    thisValue: 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了thisValue,'this'的值为'undefined'

  注意:

    1、filter() 不会对空数组进行检测

    2、 filter() 不会改变原始数组。

  

  关于filter()的官方介绍看完了,现在我们来验证下。

  代码:

this.defaultResult.filter((currentValue,index,arr) => {
  console.log('currentValue-->',currentValue);
  console.log('index-->',index);
  console.log('arr-->',arr);
})

  现在来打印看看各个参数分别打印出什么。打印结果:

    

   可以看出,currentValue和index分别打印出初始数组的各个对象,就像对数组遍历了一遍,而arr则完全的打印出了初始数组。

RegExp 对象

  RegExp 对象用于规定在文本中检索的内容。

  当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

  定义:RegExp 对象用于存储检索模式。通过 new 关键词来定义 RegExp 对象。

  语法:new RegExp(pattern, attributes)

  参数说明:

    pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。

    attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。
  例:var patt1=new RegExp("e"); //在一个字符串中检索时,将寻找的是字符 "e"。

  RegExp 对象的方法(3个):  test()、exec() 以及 compile()。

  //注:本文只说test()方法。

  现在来实现下,如下:

let patt1 = new RegExp(this.value, 'i')  //this.value: 需要寻找的值,如上文中的字符"e"
//该代码表示: 区分大小写匹配指定pattern字符

test()方法

  定义: 用于检测一个字符串是否匹配某个模式。

  语法:RegExpObject.test(string)

  参数说明: 

    string: 必需。要检测的字符串。

  返回值:如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

  

  现在我们对RegExp对象和test()方法一起使用来验证下。

let result= new RegExp('e').test('The best things in life are free');
console.log('result:', result);

  打印结果: result: true

实现方法

  看了上面的官方文档的介绍,各位客观应该对filter、RegExp和 test()很了解了吧?!

  现在我们来实现下,如何对一个数组对象进行过滤。

  废话不多说,直接上代码。

let filterResult = this.defaultResult.filter(value=> new RegExp(this.value, 'i').test(value.title));

  惊不惊喜~~意不意外~~,一行代码完全搞定。各位快去看看吧!!

  

  好了,文章到此结束,有什么好的建议或者不对的地方请留言。

原文地址:https://www.cnblogs.com/bala/p/9850376.html