相信學習過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: 'Chuck Norris', power: Infinity },<br/> { name: 'Bruce Lee', power: 9000 },<br/> { name: 'Jackie Chan', power: 7000},<br/> { name: 'Jet Li', 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函數，相信小夥伴們對此也有了進一步的了解，希望對你的工作有幫助！
相關推薦：
#servlet與filter的url-pattern設定方式及對映規則
以上是JavaScript中filter函數的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
