我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript中Array的filter函数详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript中Array的filter函数详解

描述

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'];


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'];


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 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript中Array的filter函数详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript中Array的filter函数怎么使用

这篇文章主要介绍“JavaScript中Array的filter函数怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中Array的filter函数怎么使用”文章能帮助大家解
2023-07-02

如何详细了解 JavaScript 的 Array 数组方法?(关于JavaScript的Array数组方法详解)

在JavaScript编程中,数组(Array)是一种非常重要的数据结构,它可以存储多个值,并提供了一系列方便的方法来操作这些值。本文将详细介绍JavaScript的Array数组方法,帮助你更好地理解和使用数组。一、创建数组
如何详细了解 JavaScript 的 Array 数组方法?(关于JavaScript的Array数组方法详解)
JavaScript2024-12-22

关于JavaScript的Array数组方法详解

这篇文章主要介绍了关于JavaScript的Array数组方法详解,数组是一个固定长度的存储相同数据类型的数据结构,数组中的元素被存储在一段连续的内存空间中,它是最简单的数据结构之一,需要的朋友可以参考下
2023-05-20

详解JavaScript中的replace()函数

JavaScript中的replace()函数是用于替换字符串中的某个子串的方法。该方法接受两个参数:要替换的子串和替换后的字符串。语法:string.replace(searchValue, replaceValue)参数说明:- sea
2023-09-09

JavaScript 中的 parseInt() 函数详解

parseInt函数将其第一个参数转换为一个字符串,对该字符串进行解析,然后返回一个整数或 NaN,这篇文章主要介绍了JavaScript 的 parseInt() 函数,需要的朋友可以参考下
2023-05-19

怎么在JavaScript中使用filter函数

这篇文章给大家介绍怎么在JavaScript中使用filter函数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScri
2023-06-14

怎么在Javascript中使用filter()函数筛选数据

本篇文章给大家分享的是有关怎么在Javascript中使用filter()函数筛选数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1.filter()语法:var newAr
2023-06-14

php中的array函数的用法

array函数是php中用于创建和操作数组的函数。其语法为:array(array_elements)。它可以创建数组、访问元素、添加元素、删除元素等。其他常用函数包括:count()返回元素个数,sort()排序数组,in_array()
php中的array函数的用法
2024-04-27

JavaScript中的回调函数详细解析

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了回调函数的相关内容,包括了什么是回调函数、回调函数有哪些特点、回调函数中this指向问题,下面一起来看一下,希望对大家有帮助。
2022-11-23

详解Python中的Array模块

这篇文章主要介绍了详解Python中的Array模块,Python中的array模块是一个预定义的数组,因此其在内存中占用的空间比标准列表小得多,同时也可以执行快速的元素级别操作,例如添加、删除、索引和切片等操作,需要的朋友可以参考下
2023-05-15

编程热搜

目录