JavaScript的Array.prototype.filter()详解
摘抄与: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 被调用时传入三个参数:
- 元素的值
- 元素的索引
- 被遍历的数组
如果为 filter 提供一个 thisArg 参数,则它会被作为 callback 被调用时的 this 值。否则,callback 的 this 值在非严格模式下将是全局对象,严格模式下为 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()详解的更多相关文章
- Javascript中Array.prototype.map()详解
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数.callback 每次执行后的返回值组合起来形成一个新数组. callback 函数只会在有值的索引上被调用:那些从来没被赋 ...
- Array.prototype.map()详解
今天在地铁上看到这样一个小例子: ["1","2","3"].map(parseInt); 相信很多人和我一样,觉得输出的结果是[1,2,3 ...
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- 常用 JavaScript 小技巧及原理详解
善于利用JS中的小知识的利用,可以很简洁的编写代码 1. 使用!!模拟Boolean()函数 原理:逻辑非操作一个数据对象时,会先将数据对象转换为布尔值,然后取反,两个!!重复取反,就实现了转换为布尔 ...
- JavaScript对象的property属性详解
JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...
- javascript常用经典算法实例详解
javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与 ...
- Array.prototype.filter()的实现
来源 今年某前端笔试的一道题,大概就是实现一遍filter,包括一个可以改变上下文的要求,其实就是改变this啦,跟原生的filter一样的功能跟参数. 解析 filter的功能就是过滤,传入一个函数 ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
随机推荐
- postal邮件发送(二):Email headers,附件,图片介绍
接上篇 http://www.cnblogs.com/mybky/p/5690567.html 1.邮件headers 除此之外,还有Reply-To,用于回复邮箱 2.邮件带有图片 邮件发送图片,p ...
- KNN算法的理解
一.算法 1.kNN算法又称为k近邻分类(k-nearest neighbor classification)算法. 最简单平庸的分类器或许是那种死记硬背式的分类器,记住全部的训练数据.对于新的数据则 ...
- [转]How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
CSS3 continues to both excite and frustrate web designers and developers. We are excited about the p ...
- linux的单用户模式
玩儿过linux的朋友,估计都有过遗忘超级用户密码或者把/etc/inittab./etc/rc.d/rc.sysinit之类文件误编辑,导致系统无法正常启动的恼人经历, 此类问题都可以通过单用户模式 ...
- C#对文件的操作
本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下 面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...
- Controller 和 Action (2)
Controller 和 Action (2) 继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Inv ...
- 安装xdebug后var_dump输出没有格式化的问题
在ubuntu10.04下面配置Apache2.2 + PHP5.3的开发环境,顺便装了一个xdebug扩展方便调试代码. 但是环境配置好了之后却发现xdebug加载成功了但是var_dump输出的内 ...
- [转]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 ...
- Session、Application、Cache
[Asp.Net]状态管理(Session.Application.Cache) 上篇博文介绍了在客户端状态管理的两种方式:http://www.cnblogs.com/wolf-sun/p/3329 ...
- 人工智能搜索算法(深度优先、迭代加深、一致代价、A*搜索)
搜索算法问题求解 一.需求分析 分别用深度优先.迭代加深.一致代价.A*搜索算法得到从起始点Arad到目标点Bucharest的一条路径,即为罗马尼亚问题的一个解,在求解的过程中记录每种算法得到的解, ...