你还不懂filter？「JavaScript」「MDN笔记」

目录

一.filter「过滤」「是啥捏？」

例子：求长度大于6的字符串

语法：

callback

Attention Points

Demos

---

一.filter「过滤」「是啥捏？」

filter()方法创建了一个新数组，这个数组包含所有符合所给函数的元素。

例子：求长度大于6的字符串

const words = ['wangjiaran','yezhenkun','yewen','ryker','tom','baby'];
const result = words.filter(word => word.lenth > 6);
console.log(result);
// expected output: Array ["yezhenkun", "wangjiaran"]

语法：

var newArray = arr.filter(callback(element[,index[,array])[,thisarg])

callback

 1. 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保    留。它接受以下三个参数：
 2. element「数组中当前正在处理的元素。」 index「正在处理的元素在数组中的索引。」 array「调用了 filter 的数组本身。」
 3. thisArg「执行 callback 时，用于 this 的值。」

Attention Points

1.如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值
否则，callback 的 this 值在非严格模式下将是全局对象
严格模式下为 undefined.
2.filter遍历的元素范围在第一次调用 callback 之前就已经确定了。
在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。
如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

Demos

1.筛选排除所有较小的值

function isBigEnough(x) {
    return x > 10;
}
var arr = [1,2,3,4,5,123,322,9,54,67].filter(isBigEnough);
// console.log(arr);
// filter is[123,322,54,67];

2.过滤JSON中的无效条目

// 过滤JSON中的无效条目
var arr = [
    { id: 15 },
    { id: -1 },
    { id: 0 },
    { id: 3 },
    { id: 12.2 },
    { },
    { id: null },
    { id: NaN },
    { id: 'undefined' }
  ];
// 记录有效长度
  var invalidEntries = 0;
// 
  function isNumber(obj) {
    return obj != undefined && typeof(obj) === 'number' && !isNaN(obj);
  }

  function filterByID(item) {
      if(isNumber(item.id) && item.id !== 0) {
          return true;
      }
      invalidEntries++;
      return false;
  }
  var arrByID = arr.filter(filterByID);

  console.log('Filtered Array\n', arrByID);
// Filtered Array[{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

  console.log('Number of Invalid Entries = ',invalidEntries);
  // Number of Invalid Entries = 5