JavaScript中filter函數的詳細介紹

相信學習過JavaScript的vue的小夥伴們都知道filter函數，但是又有很多的小夥伴對filter也是不知所以然，知道的了可能也是模棱兩可的，那我們今天就給大家詳細介紹下JavaScript中filter函數！

看到範例中網格組件的時候，被一段嵌套程式碼搞的暈頭轉向，多方求助（segmentful提問）之後才將將理解，特此記錄，以備後續查詢：

查看全部程式碼點擊此處

部分程式碼片段：

<p style="margin-top: 5px; margin-bottom: 14px; line-height: normal;">data = data.filter(function (row) {<br/>    return <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.keys(row).some(function (key) {<br/>        return String(row[key]).toLowerCase().<br/>        indexOf(filterKey) > -1;<br/>    });<br/>});<br/><br/>data = [<br/>    { name: &#39;Chuck Norris&#39;, power: Infinity },<br/>    { name: &#39;Bruce Lee&#39;, power: 9000 },<br/>    { name: &#39;Jackie Chan&#39;, power: 7000},<br/>    { name: &#39;Jet Li&#39;, power: 8000 }<br/>]<br/></p>

註：在這裡filterKey表示的是在input中輸入的字符字串，這裡假設輸入ck

這裡的row表示的是data[i]，以第一行為範例執行程式碼，row為{ name: 'Chuck Norris', power: Infinity }，那麼Object.keys(row) = ['name', 'power'], key表示name和power。首先是name，row['name'] = 'Chuck Norris', 這個字串中包含字串'ck'，所以回傳 true，不需要執行power，那麼row即data[0]回到新的數組，繼續遍歷下面的資料。如果row['name']不包含此字串，那麼需要遍歷row['power']，如果都為false，不傳回row，繼續遍歷。

整段程式碼涉及vue的資料綁定，但由於我還處於懵懂的狀態就不記錄了。

一隻前端小白，如果您發現本文有什麼錯誤或理解不到位的地方，希望不吝賜教。

最近在正在學習vue，看到範例中網格組件的時候，被一段嵌套程式碼搞的暈頭轉向，多方求助（segmentful提問）之後才將理解，特此記錄，以備後續查詢：

查看全部程式碼點擊此處

部分程式碼片段：

data = data.filter(function (row) {
    return Object.keys(row).some(function (key) {
        return String(row[key]).toLowerCase().
        indexOf(filterKey) > -1;
    });
});

data = [
    { name: 'Chuck Norris', power: Infinity },
    { name: 'Bruce Lee', power: 9000 },
    { name: 'Jackie Chan', power: 7000},
    { name: 'Jet Li', power: 8000 }
]

註：在這裡filterKey表示的是在input中輸入的字符串，這裡假設輸入ck

這裡的row表示的是data[i]，以第一行為例執行程式碼，row為{ name: 'Chuck Norris', power: Infinity }，那麼Object.keys(row) = ['name', 'power'], key表示name和power。首先是name，row['name'] = 'Chuck Norris', 這個字串中包含字串'ck'，所以回傳 true，不需要執行power，那麼row即data[0]回到新的數組，繼續遍歷下面的資料。如果row['name']不包含此字串，那麼需要遍歷row['power']，如果都為false，不傳回row，繼續遍歷。

整段程式碼涉及vue的資料綁定，但是由於我還處於懵懂的狀態就不記錄了。

總結：

本文透過實例程式碼詳細介紹了關於JavaScript中filter函數，相信小夥伴們對此也有了進一步的了解，希望對你的工作有幫助！

相關推薦：

#ajax的簡單應用程式和filter的寫法

CSS3的filter屬性詳細介紹

#servlet與filter的url-pattern設定方式及對映規則

以上是JavaScript中filter函數的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！