今天在實現對數組對象進行過濾的時候,因為之前很少實現這個功能,所以對filter、RegExp和test都沒有深入的理解,常見的就是百度找實現方法
但是,Excuse me ??? 居然沒有對數組對象過濾完全的解決方法,只有各種各樣簡單的實現。or~~~ 一些看的我雲里霧里的代碼,原諒我是小菜鳥一枚!!!
好吧,我還是自食其力吧!!!廢話不多說,進入正題。
這篇文章使用的是filter、 RegExp 和test()來實現過濾,既然如此,先定義一個初始數組,然后再看看三個的官方文檔的介紹。
const defaultArray = [{ //初始數組
}]
官方文檔介紹
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 是一個字符串,指定了正則表達式的模式或其他正則表達式。
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));
驚不驚喜~~意不意外~~,一行代碼完全搞定。各位快去看看吧!!
好了,文章到此結束,有什么好的建議或者不對的地方請留言。