JavaScript中有許多好用的數組方法，例如說forEach，filter...等等

那這些方法是都有什么用途呢？以及自己能否寫一個方法出來替代呢？

forEach方法

日常用法

? 我們拿到一組數據的時候，通常需要通過遍歷循環拿到自己想要的數據。 forEach函數能夠做到這一點，通常是這樣使用的。例如說我們下面數組這種，需要遍歷循環這個數組。就能得到以下結果。

參數傳遞

forEach() 方法按升序為數組中含有效值的每一項執行一次 callback 函數。可依次向 callback 函數傳入三個參數：

數組當前項的值 (ele)

數組當前項的索引 (index)

數組對象本身 (self)

var arr = [{name: 'abc', desc: '技術好', sex: 'm'}, {name: 'adsds', desc: '技術好', sex: 'f'}, {name: 'aaseed', desc: '技術好', sex: 'm'},{name: 'acccc', desc: '技術好', sex: 'f'}]// forEach()arr.forEach(function (ele, index, self) {console.log(ele, ele.name, ele.sex);})

實現一個forEach()方法 Array.prototype.forEach = function (func) {var len = this.length;var _this = arguments[1] != undefined ? arguments[1] : window;//_this 值的是可以傳遞this指向for (var i = 0; i < len; i++) {func.apply(_this, [this[i], i, this]);}}var obj = { name: 'feng' }function deal(ele, index, self) {console.log(ele, index, self, this);}arr.forEach(deal, obj);

? 就能得到一個功能相同的方法

filter方法

日常用法

? filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。MDN如是說。例如說我們想要得到上面數組中name為accc的數據

var newArr = arr.filter(function (ele, index, array) {return ele.name == 'acccc'})

傳遞參數

• callback

  用來測試數組的每個元素的函數。返回 true 表示該元素通過測試，保留該元素，false 則不保留。它接受以下三個參數：

• element數組中當前正在處理的元素。
• index可選正在處理的元素在數組中的索引。
• array可選調了 filter 的數組本身。

• thisArg可選

  執行 callback 時，用于 this 的值。

實現一個myfilter方法（）

? 想到filter能夠過濾想要的東西，那肯定是有遍歷的。

Array.prototype.myfilter = function (func) {var arr = [];var len = this.length;var _this = arguments[1] || window;for (var i = 0; i < len; i++) {func.apply(_this, [this[i], i, this]) && arr.push(this[i]);}return arr;}var obj = { name: 'feng' }var newArr = arr.myfilter(function (ele, index, self) {if (ele.sex == 'm') {return true;} else {return false;}})console.log(newArr);

? 我們在調用myfilter方法把性別是男的過濾出來

本文由博客群發一文多發等運營工具平臺 OpenWrite 發布

總結

以上是生活随笔為你收集整理的filter函数的用法_JavaScript中forEach和filter的用法和原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。