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的小数( ...
随机推荐
- TodoList开发笔记 – Part Ⅲ
本节开始对TodoList项目的客户端进行开发 一.初步了解JQuery 其实我在学校时有接触过一段时间的Web开发,虽然代码量不多也不复杂,但也已经感受到了各浏览器对Web各项标准的恶意,Web界对 ...
- BrnShop:自定义插件
BrnShop开源网上商城第四讲:自定义插件 重要通知:BrnShop企业版NOSQL设计(基于Redis)已经开源!源码内置于最新版的BrnShop中,感兴趣的园友可以去下载来看看.官网地址:www ...
- 松瀚SN8P2501 定时器初始化程序--汇编源码
/* 松瀚 SN8P2501B 定时器初始化程序 */ INI_IRQ: ;定时器T0初始化 MOV A, #01100000b ;定时器模式Fcpu/4 16M/4/4=1M 1U计一次 B0MOV ...
- EntityFramework中支持BulkInsert扩展
EntityFramework中支持BulkInsert扩展 本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 前言 很显然,你应该不至于使用 Ent ...
- IOS UI 第九篇: UITABLEVIEW
学英语.所以用英文来记录笔记. Define the dataSource: @implementation ViewController{ NSMutableArray *dataSo ...
- iOS基础 - 控制器管理
一.Container 一个iOS的app很少只由一个ViewController组成,除非这个app极其简单.当app中有多个ViewController的时候,我们就需要对这些ViewContro ...
- c#中如何跨线程调用windows窗体控件
c#中如何跨线程调用windows窗体控件? 我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍.首 ...
- 【NET】Winform用户控件的初步封装之列表页控件
public abstract partial class TListPager<TEntity, TRepository, TSqlStrConstruct> : UserControl ...
- 使用Reactive Extensions(Rx),对短时间内多次发生的事件限流
使用Reactive Extensions(Rx),对短时间内多次发生的事件限流 牛刀小试:使用Reactive Extensions(Rx),对短时间内多次发生的事件限流 我之前有一篇文章介绍到了R ...
- 跨平台C/C++集成开发环境-Code::Blocks-内置GCC
Code::Blocks 是一个开放源码的全功能的跨平台C/C++集成开发环境. 相比于基于Delphi的Dev-C++共享C++IDE,Code::Blocks是开放源码软件.Code::Block ...