filter函數的用法_JavaScript中forEach和filter的用法和原理

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

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

forEach方法

日常用法

​ 我們拿到一組資料的時候，通常需要通過周遊循環拿到自己想要的資料。

forEach

函數能夠做到這一點，通常是這樣使用的。例如說我們下面數組這種，需要周遊循環這個數組。就能得到以下結果。

參數傳遞

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

1. 數組目前項的值 (ele)
2. 數組目前項的索引 (index)
3. 數組對象本身 (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

  則不保留。它接受以下三個參數：

  1. element

     數組中目前正在處理的元素。

  2. index

     可選正在處理的元素在數組中的索引。

  3. 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 釋出