filter：过滤数组元素

约定不等于承诺〃 2024-04-18 16:37 6阅读 0赞

### `filter()` 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 不会改变原数组。 ###

//现在你想过滤掉arr数组里面的22
      let arr = [11, 22, 33, 44];
      let result = arr.filter(number => number !== 22);
      console.log(result);//[11, 33, 44]
      console.log(arr);//[11, 22, 33, 44]

推荐地址：[https://www.liaoxuefeng.com/wiki/1022910821149312/1024327002617536][https_www.liaoxuefeng.com_wiki_1022910821149312_1024327002617536]

--------------------

### filter():           满足条件的元素返回，不满足条件的元素过滤掉;           返回一个新的数组；           有两个参数：             第一个参数是：callback回调函数               callback回调函数里面的第一个参数是：                 ele代表着正在处理的元素               callback回调函数里面的第二个参数是：                 index代表着数组的索引值               callback回调函数里面的第三个参数是：                 self代表着数组本身             第二个参数是：thisArg(可选)               代表着this默认指向window ###

/*
          filter():
            满足条件的元素返回，不满足条件的元素过滤掉;
            返回一个新的数组；
            有两个参数：
              第一个参数是：callback回调函数
                callback回调函数里面的第一个参数是：
                  ele代表着正在处理的元素
                callback回调函数里面的第二个参数是：
                  index代表着数组的索引值
                callback回调函数里面的第三个参数是：
                  self代表着数组本身
              第二个参数是：thisArg(可选)
                代表着this默认指向window
      */
      const arr = [
        { name: '张三', age: 21 },
        { name: '李四', age: 22 },
        { name: '王五', age: 23 },
      ];
      let obj = {
        naem: 'xyz'
      }
      let newFilter = arr.filter(function (ele, index, self) {
        console.log(this)
        return true
      }, obj)
      console.log(newFilter)

**result:**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70][]

--------------------

###  通过源码实现filter方法: ###

//通过源码实现filter方法
      const arr = [
        { name: '张三', age: 21 },
        { name: '李四', age: 22 },
        { name: '王五', age: 23 },
      ];
      Array.prototype.myFilter = function (func) {
        let arr = []; 
        let _this = arguments[1] || window;
        for(let i = 0; i<this.length; i++){
          func.apply(_this, [this[i], i, this]) && arr.push(this[i]) 
          //func.call(_this, this[i], i, this) && arr.push(this[i])  
        }
        return arr
      }
      let obj = {
        naem: 'xyz'
      }
      let newFilter = arr.myFilter(function (ele, index, self) {
        console.log(this)
        return ele.age > 21
      })
      console.log(newFilter)

result:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1][]

[https_www.liaoxuefeng.com_wiki_1022910821149312_1024327002617536]: https://www.liaoxuefeng.com/wiki/1022910821149312/1024327002617536
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6d207d4eecc9417eb498995e73571130.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3633c2c407d84cb783c347fdfc692722.png