摘抄与:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

概述

filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。

语法

var new_arrary = arr.filter(callback[, thisArg])

参数

callback:用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素(通过测试),false则不保留。
thisArg:可选。执行 callback 时的用于 this 的值。

描述

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

callback 被调用时传入三个参数:

  1. 元素的值
  2. 元素的索引
  3. 被遍历的数组

如果为 filter 提供一个 thisArg 参数,则它会被作为 callback 被调用时的 this 值。否则,callbackthis 值在非严格模式下将是全局对象,严格模式下为 undefined
The thisvalue ultimately observable by callback is determined according to the usual rules for determining thethis seen by a function.

filter 不会改变原数组。

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

示例

例子:筛选排除掉所有的小值

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

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

兼容旧环境(Polyfill)

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

if (!Array.prototype.filter)
{
Array.prototype.filter = function(fun /*, thisArg */)
{
"use strict"; if (this === void || this === null)
throw new TypeError(); var t = Object(this);
var len = t.length >>> ;
if (typeof fun !== "function")
throw new TypeError(); var res = [];
var thisArg = arguments.length >= ? arguments[] : void ;
for (var i = ; i < len; i++)
{
if (i in t)
{
var val = t[i]; // NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t))
res.push(val);
}
} return res;
};
}

规范

Specification Status Comment
ECMAScript 5.1 (ECMA-262)
Array.prototype.filter
Standard Initial definition.
Implemented in JavaScript 1.6
ECMAScript 2015 (6th Edition, ECMA-262)
Array.prototype.filter
Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.5 (1.8) 9 (Yes) (Yes)

JavaScript的Array.prototype.filter()详解的更多相关文章

  1. Javascript中Array.prototype.map()详解

    map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数.callback 每次执行后的返回值组合起来形成一个新数组. callback 函数只会在有值的索引上被调用:那些从来没被赋 ...

  2. Array.prototype.map()详解

    今天在地铁上看到这样一个小例子: ["1","2","3"].map(parseInt); 相信很多人和我一样,觉得输出的结果是[1,2,3 ...

  3. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  4. 常用 JavaScript 小技巧及原理详解

    善于利用JS中的小知识的利用,可以很简洁的编写代码 1. 使用!!模拟Boolean()函数 原理:逻辑非操作一个数据对象时,会先将数据对象转换为布尔值,然后取反,两个!!重复取反,就实现了转换为布尔 ...

  5. JavaScript对象的property属性详解

    JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...

  6. javascript常用经典算法实例详解

    javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与 ...

  7. Array.prototype.filter()的实现

    来源 今年某前端笔试的一道题,大概就是实现一遍filter,包括一个可以改变上下文的要求,其实就是改变this啦,跟原生的filter一样的功能跟参数. 解析 filter的功能就是过滤,传入一个函数 ...

  8. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  9. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

随机推荐

  1. Oracle的SOME,ANY和ALL操作

    平时很少用的这几个操作,今天遇到了.于是又看了一下文档. SOME和ANY一样,是比较宽松的,类似于OR.满足其中任何一个都可以. ALL要求严格一些,类似于AND,必须全部满足才可以. 不能单独使用 ...

  2. 加密算法 MD5/SHA1

    近来想学习函数式编程. 但是一直不知道怎么展开这个学习过程,目前的研究进度也不深入,想讲解一些原理也无从下手. 先简单的上一些算法,逐步分析语法和思想.虽然程度不深,但至少能记录这个过程. 本例子用F ...

  3. NoSql数据库使用

    NoSql数据库使用半年后在设计上面的一些心得 NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么 ...

  4. Repeater 模板中查找子控件

    前言:对于Repeater控件,相信从事NETWeb开发的同仁们再熟悉不过了.因其呈现方式和Literal一样,并不在前端生成任何表单标签元素,所以属于比较轻量级的控件.不过青睐于Repeater的主 ...

  5. [转]Inspecting Obj-C parameters in gdb

    Since the addition of i386 and x86_64 to the Mac OS’s repertoire several years back, remembering whi ...

  6. 企业架构研究总结(31)——TOGAF架构内容框架之内容元模型(下)

    2.2 治理扩展(Governance Extensions) 治理扩展元模型内容 治理扩展部分的意图在于引入额外的,并且与支持运营治理的目标和业务服务相关的结构化数据. 2.2.1 关注范围 为目标 ...

  7. C++内存中的封装、继承、多态(上)

    C++内存中的封装.继承.多态(上) 继我的上一篇文章:浅谈学习C++时用到的[封装继承多态]三个概念 此篇我们从C++对象内存布局和构造过程来具体分析C++中的封装.继承.多态. 一.封装模型的内存 ...

  8. jQuery跳房子插件hopscotch

    插件描述 跳房子是一个框架,使开发人员可以轻松预览产品并添加到他们的网页 跳房子接受JSON对象作为输入,并提供开发人员来控制渲染巡演显示和管理的游览进度的API. 使用步骤 要使用跳房子框架上手,只 ...

  9. RTB撕开黑盒子 Part 1: Datacratic's RTB Algorithms

    这篇文章是讨论Datacratic所用的统计和经济理论的一些内容.我们开发了real time bidding算法s.为了实现广告主的目标,我们的算法自动地利用其它广告主的次优策略,并再查看广告的底价 ...

  10. 淘宝ued - 前端智勇大闯关(第三季)答案(更新)

    淘宝ued - 前端智勇大闯关(第三季)答案(更新) 下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下.附上题目地址: http://ued.campus.alibaba ...