對數組對象進行過濾


  今天在實現對數組對象進行過濾的時候,因為之前很少實現這個功能,所以對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));

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

  

  好了,文章到此結束,有什么好的建議或者不對的地方請留言。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM