JavaScript中Array的filter函数详解

 更新时间:2022年07月15日 10:21:13   作者:​ 桃子蘸酱​  
这篇文章主要介绍了JavaScript中Array的filter函数详解,filter 为数组中的每个元素调用一次callback函数,W更多具体内容,需要的朋友可以参考一下

描述

filter为数组中的每个元素调用一次callback函数,并利用所有使得callback返回 true 或等价于 true 的值的元素创建一个新数组。callback只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过callback 测试的元素会被跳过,不会被包含在新数组中。

理解

filter不会改变原数组,它返回过滤后的新数组。

filter遍历的元素范围在第一次调用callback之前就已经确定了。在调用filter之后被添加到数组中的元素不会被filter遍历到。如果已经存在的元素被改变了,则他们传入callback的值是filter遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

示例

过滤长度大于6的

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

使用filter创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

使用filter()根据搜索条件来过滤数组内容

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

据搜索条件来过滤数组内容

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

原生实现

filter 被添加到 ECMA-262 标准第 5 版中,因此在某些实现环境中不被支持。可以把下面的代码插入到脚本的开头来解决此问题,该代码允许在那些没有原生支持 filter 的实现环境中使用它。该算法是 ECMA-262 第 5 版中指定的算法,假定 fn.call 等价于 Function.prototype.call 的初始值,且 Array.prototype.push 拥有它的初始值。

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();

    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }

    res.length = c; // shrink down array to proper size
    return res;
  };
}

到此这篇关于JavaScript中Array的filter函数详解的文章就介绍到这了,更多相关JS filter 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中this关键词的使用技巧、工作原理以及注意事项

    JavaScript中this关键词的使用技巧、工作原理以及注意事项

    在JavaScript中,this 的概念比较复杂。除了在面向对象编程中,this 还是随处可用的。这篇文章介绍了this 的工作原理,它会造成什么样的问题以及this 的相关例子。
    2014-05-05
  • js表数据排序 sort table data

    js表数据排序 sort table data

    对于表格的排序,是很不错的一个功能,方便用户快速的分析一些数据。
    2009-02-02
  • ejs v9 javascript模板系统

    ejs v9 javascript模板系统

    我的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用javascript模板了, 什么TX, 百度, 新浪, 360什么的, 最后瀑布流的流行, 里面又有许多用到模板
    2012-03-03
  • 概述如何实现一个简单的浏览器端js模块加载器

    概述如何实现一个简单的浏览器端js模块加载器

    本文主要对实现一个简单的js加载器的步骤进行介绍--主要可以分为解析路径、下载模块、解析模块依赖、解析模块四个步骤。需要的朋友来看下吧
    2016-12-12
  • JavaScript 引用类型之原始值包装类型String

    JavaScript 引用类型之原始值包装类型String

    这篇文章主要介绍了JavaScript 引用类型之原始值包装类型String,String是对应字符串的引用类型。要创建一个String 对象,使用String 构造函数并传入一个数值,更多相关内容需要的朋友可以参考一下
    2022-07-07
  • 使用bootstrap莫名其妙出现横向滚动条的问题及解决

    使用bootstrap莫名其妙出现横向滚动条的问题及解决

    这篇文章主要介绍了使用bootstrap莫名其妙出现横向滚动条的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • JavaScript iframe 实现多窗口通信实例详解

    JavaScript iframe 实现多窗口通信实例详解

    这篇文章主要为大家介绍了JavaScript iframe 实现多窗口通信实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • javascript中关于执行环境的杂谈

    javascript中关于执行环境的杂谈

    如你所知,javascript里执行环境是作为一个最核心的概念存在的。相信广大FE筒子们对于这个概念不会陌生,它定义了变量或函数有权访问其他数据范围以及其行为。
    2011-08-08
  • 小程序安全指南之如何禁止外部直接跳转到小程序某页面

    小程序安全指南之如何禁止外部直接跳转到小程序某页面

    由于小程序跳转的对象比较多,各自的规则又不一样,因此小程序跳转外部链接是用户咨询较多的问题之一,下面这篇文章主要给大家介绍了关于小程序安全指南之如何禁止外部直接跳转到小程序某页面的相关资料,需要的朋友可以参考下
    2022-09-09
  • JS实现简单抖动效果

    JS实现简单抖动效果

    这篇文章给大家结束了通过js实现抖动效果,非常不错,具有参考借鉴价值,感兴趣的朋友参考下吧
    2017-06-06

最新评论