JavaScript ES5标准中新增的Array方法


Posted in Javascript onJune 28, 2016

ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了。

ES5中新增了写数组方法,如下:

forEach (js v1.6)
map (js v1.6)
filter (js v1.6)
some (js v1.6)
every (js v1.6)
indexOf (js v1.6)
lastIndexOf (js v1.6)
reduce (js v1.8)
reduceRight (js v1.8)

1、js中常用的数组Array对象属性:

如图,其中用红色圆圈标记的部分,为ES5新增的属性。

JavaScript ES5标准中新增的Array方法

2、浏览器支持情况:

•IE:9+;
•Chrome;
•Firefox2+;
•Safari 3+;
•Opera 9.5+;

3、位置方法

ECMAScript5为数组定义了2个位置方法。indexOf(),lastIndexOf();

这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。

其中,indexOf()从数组的开头(位置0)开始向后查找,lastIndexOf()则是从数组的末尾开始向前查找。

这两个方法都要返回要查找的项在数组中的位置,或者在没有找到的情况下返回-1;

示例:

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //4
alert(number.lastIndexOf(4)); //5
alert(number.indexOf(4,4)); //5
alert(number.lastIndexOf(4,4)); //3

4、迭代方法

ECMAScript5为数组定义了5个迭代方法。

4.1、every()

定义和用法:every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

•如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。

•如果所有元素都满足条件,则返回 true。

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

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

描述:检测数组 ages 的所有元素是否都大于 18 :

var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

结果为:

false;

4.2、some()

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

对数组中的每一项运行给定的函数,如果该函数对任一项都返回true,则返回true;

代码如下:

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){//item指代数组值;index指代数组下标;array指代数组本身;
return (item>2);
});
alert(someResult);

结果为:

true;

4.3、filter()

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

对数组中的每一项运行给定函数,返回该函数会返回true的项的数组。

描述:要返回一个所有数值大于2的数组,代码如下:

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){//item指代数组值;index指代数组下标;array指代数组本身;
return (item>2);
});
alert(filterResult );

结果为:

[3,4,5,4,3]
4.4、map()

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

对数组中的每项运行给定的函数,返回每次函数调用的结果组成的数组。

描述:给数组中的每项乘以2,返回这些乘积组成的数组,代码如下:

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){//item指代数组值;index指代数组下标;array指代数组本身;
return item*2;
});
alert(mapResult );

结果为:

[2,4,6,8,10,8,6,4,2]
4.5、forEach()

定义和用法:对数组中的每一项运行给定的函数。这个方法没有返回值。

本质上与使用for循环遍历数组一样的。代码如下:

var numbers = [1,2,3,4];
numbers.forEach(function(item,index,array){
console.log(item);
});

结果为:

1
2
3
4

5、缩小方法

ECMAScript5新增两个缩小数组的方法:reduce()和reduceRight();

这两个方法多会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce()方法从数组的第一项开始,逐个遍历到最后。

而reduceRight()则从数组的最后一项开始,向前遍历到第一项。这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为缩小基础的初始值。

传给reduce()和reduceRight()的函数接收4个参数:前一个值,当前值,项的索引和数组对象。

描述:使用reduce()方法可以执行求数组中所有值之和的操作。代码如下:

var values = [1,2,3,4,5];
var sum =values.reduce(function(prev,cur,index,array){
return prev+cur;
});
alert(sum);

结果为:

15

以上所述是小编给大家介绍的JavaScript ES5标准中新增的Array方法的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
各种常用的JS函数整理
Oct 25 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 #Javascript
jQuery 调用WebService 实例讲解
Jun 28 #Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 #Javascript
关于JS 预解释的相关理解
Jun 28 #Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 #Javascript
浅谈js中的in-for循环
Jun 28 #Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
Javascript & DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
使用js画图之画切线
2015/01/12 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
白酒市场开发计划书
2014/01/09 职场文书
海南地接欢迎词
2014/01/14 职场文书
采购部长岗位职责
2014/06/13 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python