javascript filter() 方法实例
filter()
方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。
filter()基本语法:
arr.filter(callback[, thisArg])
filter()参数介绍:
参数名 | 说明 |
callback |
用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。 返回true表示保留该元素(通过测试),false则不保留。 |
thisArg |
可选。执行 callback 时的用于 this 的值。 |
filter()用法说明:
filter
为数组中的每个元素调用一次 callback
函数,并利用所有使得 callback
返回 true 或 等价于 true 的值 的元素创建一个新数组。callback
只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback
测试的元素会被跳过,不会被包含在新数组中。
callback
被调用时传入三个参数:
- 元素的值
- 元素的索引
- 被遍历的数组
如果为 filter
提供一个 thisArg
参数,则它会被作为 callback
被调用时的 this
值。否则,callback
的this
值在非严格模式下将是全局对象,严格模式下为 undefined
。
filter
不会改变原数组。
filter
遍历的元素范围在第一次调用 callback
之前就已经确定了。在调用 filter
之后被添加到数组中的元素不会被 filter
遍历到。如果已经存在的元素被改变了,则他们传入 callback
的值是 filter
遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
filter()实例:
筛选排除掉所有的小值
下例使用 filter
创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
document.write(filtered);
filter()
兼容旧环境
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 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; 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;
};
}
- C#历代版本新特性——面试题常用
- Finecms模板标签调用小结 方便快速入门
- 新装/重装git后的指令&链接到github
- 【译】ASP.NET MVC 6路由技术
- 从原理到实践:Oracle 12.2 Sharding技术揭秘
- Xamarin-C#开发移动App-环境搭建
- Tensorflow快速入门
- .NET Core 实战笔记1-介绍和安装
- 全面直观认识深度神经网络
- dedecms清空所有文章怎么操作?sql语句如何写?
- .NET Core 实战笔记2-从命令开始
- 【译】使用Docker Compose一条指令配置Mesos
- 【译】Windows下的Docker Machine - 如何设置你的Docker主机
- 史上最透彻的KMP算法讲解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
- Android编程双重单选对话框布局实现与事件监听方法示例
- android调用H5显示加载中效果的示例代码
- Java工作中遇到的问题Method has too many Body parameters的处理办法SpringCloud Feign报错:Method has too many Body par
- Android view滑动悬浮固定效果实现代码示例
- Android编程实现变化的双重选择框功能示例
- Java中使用json存储文件
- Android自定view画圆效果
- Android简洁的下拉放大刷新效果示例
- 自定义View | invalidate()源码分析
- Pagerslidingtabstrip菜单标题栏制作方法
- Flink SQL 自定义 Sink
- RollViewPager图片轮播效果开源框架使用方法详解
- Nacos配置中心动态获取数组配置
- android 二次打包完成apk多渠道打包的方法