跳到主要内容

filter

2023年06月19日
柏拉文
越努力，越幸运

一、认识​

Array.prototype.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

二、语法​

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
  • callback: 数组中当前正在处理的元素。
    • element: 数组中当前正在处理的元素。
    • index可选: 正在处理的元素在数组中的索引。
    • array可选: 调用了 filter 的数组本身。
  • thisArg可选: 执行 callback 时，用于 this 的值。

三、返回值​

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

四、应用场景​

4.1 过滤 false 元素​

const list = [false, '', 0, 2, 3, null, undefined];

console.log(list.filter(Boolean)); // [2,3]

等价于

const list = [false, '', 0, 2, 3, null, undefined];

console.log(list.filter(item => Boolean(item))); // [2,3]

4.2 筛选所有小于10的元素​

var array = [1,2,3,4,5,6,7,8,9,10,11,12];
var arrayCopy = array.filter(function(value,index,array){
  return value < 10;
});
console.log(arrayCopy); //  [1, 2, 3, 4, 5, 6, 7, 8, 9]

五、原理(Polyfill)​

Array.prototype.filter = function(callback,thisArg){
  if(this == null){
    throw new TypeError('this is null or not defined');
  }
  if(typeof callback !== 'function'){
    throw new TypeError('callback is not function');
  }
  var object = Object(this);
  var length = object.length >>> 0;
  var result = new Array(length);
  var objectIndex = 0;
  var resultIndex = 0;
  while(objectIndex < length){
    if(objectIndex in object){
      var value = object[objectIndex];
      var res = callback.call(thisArg,value,objectIndex,object);
      if(res){
        result[resultIndex++] = value;
      }
    }
    objectIndex++;
  }
  result.length = resultIndex;
  return result;
}
var array = [1,2,3,4,5,6,7,8,9,10,11,12];
var arrayCopy = array.filter(function(value,index,array){
  return value < 10;
});
console.log(arrayCopy); //  [1, 2, 3, 4, 5, 6, 7, 8, 9]