JavaScript Array filter() 方法

 JavaScript Array 对象

实例

返回数组 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

输出结果为:

32,33,40

尝试一下 »


定义和用法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法          
filter() Yes 9 1.5 Yes Yes

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数 描述
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

技术细节

返回值: 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
JavaScript 版本: 1.6

JavaScript Array map() 方法

 JavaScript Array 对象

实例

返回一个数组,数组中元素为原始数组的平方根:

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

输出结果为:

2,3,4,5

尝试一下 »


定义和用法

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法          
map() Yes 9 1.5 Yes Yes

语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数 描述
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

技术细节

返回值: 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
JavaScript 版本: 1.6

JavaScript Array some() 方法

 JavaScript Array 对象

实例

检测数组中是否有元素大于 18:

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

输出结果为:

true

尝试一下 »


定义和用法

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法          
some() Yes 9 1.5 Yes Yes

语法

array.some(function(currentValue,index,arr),thisValue)

参数说明

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数 描述
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

技术细节

返回值: 布尔值。如果数组中有元素满足条件返回 true,否则返回 false。
JavaScript 版本: 1.6

在javascript脚本中,栈数据结构的访问规则是LIFO(后进先出),而队列数据结构的访问规则是FIFO(first-in-first-out,先进先出)。
队列在列表的末端添加项,从列表的前端移除项。
由于push()是向数组末端添加项的方法,一次要模拟队列只需一个从数组前端取得项的方法。
实现此操作的数组方法就是shift(),它能够移除数组中的第一项并返回该项,同时将数组长度减1。
结合使用shift()和push()方法,可以像使用队列一样使用数组:

复制代码代码示例:
var colors = new Array();                 //创建一个数组
var count = colors.push("red", "green");  //推入两项
alert(count);                             //2
count = colors.push("black");             //推入另一项
alert(count);                             //3
var item = colors.shift();                //取得第一项
alert(item);                              //"red"
alert(colors.length);                     //2
 

ECMAScript还为数组提供了一个unshift()方法。unshift()shift()的用途相反:它能在数组的前端添加任意各项并返回新数组的长度。
因此,同时使用unshift()和pop()方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项,例如:

复制代码代码示例:

var colors = new Array();                    //创建一个数组
var count = colors.unshift("red", "green");  //推入两项
alert(count);                                //2

count = colors.unshift("black");             //推入另一项
alert(count);

var item = colors.pop();                     //取得最后一项
alert(item);                                 //"green"
alert(colors.length);                        //2

IE对JavaScript的实现存在一个偏差,其unshift()方法总是返回undefined而不是数组的新长度。

js array filter pop push shift unshift方法的更多相关文章

  1. js 数组的pop(),push(),shift(),unshift()方法小结

    关于数组的一些操作方法小结: pop(),push(),shift(),unshift()四个方法都可改变数组的内容以及长度: 1.pop() :删除数组的最后一个元素,并返回被删除的这个元素的值: ...

  2. 小tip:关于typeof,instanceof,toString(),valueOf(),toLocaleString(),join(),reverse(),sort(),pop(),push(),shift(),unshift()

    typeof:用于检测一个变量是否是基本数据类型.instanceof用于检测某引用对象是什么类型的对象. var s = "Nicho"; var b = true; var n ...

  3. 测试数组push和unshift方法的效率

    先贴代码,之后再来补内容 <!DOCTYPE HTML> <html> <head> <title>测试数组push和unshift方法的效率</ ...

  4. 数组中的元素 增加push用法 unshift() 方法 和减少pop() 方法 shift() 和其他位置增删 splice() 方法 join() 方法 reverse() 方法 sort() 方法

    push用法 push 英 [pʊʃ] 美 [pʊʃ] vt. 推,推动; vt. 按; 推动,增加; 对…施加压力,逼迫; 说服; n. 推,决心; 大规模攻势; 矢志的追求 定义和用法 push( ...

  5. 中缀表达式转后缀表达式(用于求字符串表达式值)(js栈和队列的实现是通过数组的push和unshift方法插值,pop方法取值)

    中缀表达式:就是我通常用的算术或逻辑公式: 后缀表达式:不包含括号,运算符放在两个运算对象后面,所有的计算按运算符出现的顺序,严格从左向右进行,不用考虑运算符优先级: 如,(2+1)*3 转换后,2 ...

  6. Array的push与unshift方法性能比较分析

    从原理就可以知道,unshift的效率是较低的.原因是,它每添加一个元素,都要把现有元素往下移一个位置.但到底效率差异有多大呢?下面来测试一下. 测试环境的主要硬件:CPU T7100(1.8G):内 ...

  7. js源码-数组中的push()和unshift()方法的源码实现

    人话不多,直接上代码,在代码中解析,不足之处请谅解: push() Array.prototype._push=function(...value){//在Array原型链上添加_push方法 for ...

  8. Array(数组)对象-->unshift() 方法

    1.定义和用法 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度. 语法: array.unshift(item1,item2, ..., itemX) 参数:item1,it ...

  9. JS中some()和every()和join()和concat()和pop(),push(),shift(),unshfit()和map()和filter()

    一.Array 1.some()和every() some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true. every()是对数组中的每一项运行给定函数,如果该函数对 ...

随机推荐

  1. 【Todo】Apache-Commons-Pool及对象池学习

    有这篇文章: http://www.cnblogs.com/tommyli/p/3510095.html 方案提供了三种类型的pool,分别是GenericKeyedObjectPool,SoftRe ...

  2. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:2.搭建环境-2.8. 配置用户环境

    2.8.配置用户环境 2.8.1. 配置节点RAC1 配置grid用户环境变量: cat >> /home/grid/.bash_profile <<EOF export TM ...

  3. k8s debug记录之kubelet user.slice container monitor failure

    在kubernetes中,如果使用其自带的单机启动脚本./hack/local-up-cluster.sh来启动一个本地集群的话,会在kubelet的日志中观察到类似以下内容的日志: Failed t ...

  4. [Angular] Angular Custom Change Detection with ChangeDetectorRef

    Each component has its own ChangeDetectorRef, and we can inject ChangeDetectorRef into constructor: ...

  5. Quartz任务监听器

    在Quartz框架提供了JobListener接口,可在任务执行前.任务被拒绝及任务执行完成后实现对任务的拦截,该接口的声明如下: public interface JobListener { /** ...

  6. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-可以用软件自带NC工具驱动但是程序无法让电机转动怎么办

    新建一个项目,当扫描的时候务必勾选YES,使用网上最新的XML文件   如果不使用,则有些设备可能被扫描出来是无效的(图标不正常)   如果完全删除XML描述文件,可能也能扫描出来,而且可以用Twin ...

  7. 基于.NET的轻量级微信SDK

    一.前言 特别不喜欢麻烦的一个人,最近碰到了微信开发.下载下来了一些其他人写的微信开发“框架”,但是被恶心到了,实现的太臃肿啦. 最不喜欢的就是把微信返回的xml消息在组装成实体类,所以会比较臃肿,现 ...

  8. app接口开发(php)

    1.JSON方式封装通信接口: 封装: response.php <?php // JSON方式封装通信接口 // 定义 response类 class Response { // 定义一个静态 ...

  9. Android 4.4 Kitkat Phone工作流程浅析(七)__来电(MT)响铃流程

    本文来自http://blog.csdn.net/yihongyuelan 转载请务必注明出处 本文代码以MTK平台Android 4.4为分析对象,与Google原生AOSP有些许差异,请读者知悉. ...

  10. Qt Creator项目中使用qss

    近期学习qt .使用的编译器是qt creator ,学习过程中遇到的题就是 怎样将程序中将要用到的.qss 文件静态编译到.exe程序中,而不是在程序执行时动态加载.动态加载的最大问题在于一旦.qs ...