实例详解ECMAScript5中新增的Array方法


Posted in Javascript onApril 05, 2016

ECMAScript5 给出了一系列新的API接口,这些接口在新的浏览器中大部分是被支持的,IE9,Chrome,FirFor都支持,也有少量API不是所有浏览器都支持,以下内容仅介绍大部分被支持的API。利用新的API我们可以设计出非常靠谱的类,而且还能保持原有的javaScript的风格。

ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法。(注意兼容性)

在ES5中,一共有9个Array方法:http://kangax.github.io/compat-table/es5/

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

下面列举了其中的7种方法,前5种方法很常见,很多开发者都会用到:

1、indexOf()

indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1。

var arr = ['apple', 'orange', 'pear'],
found = false;
// 未使用
for (var i = 0, l = arr.length; i < l; i++) {
if (arr[i] === 'orange') {
found = true;
}
}
console.log("found:", found); // ==> found: true
// 使用后
console.log("found:", arr.indexOf("orange") != -1); // ==> found: true

2、filter()

该filter()方法创建一个新的匹配过滤条件的数组。

不用 filter() 时:

var arr=[{"name":"apple", "count": 2},{"name":"orange", "count": 5},{"name":"pear", "count": 3},{"name":"orange", "count": 16},]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].name === "orange") {
newArr.push(arr[i]);
}
}
console.log("Filter results:", newArr);

用了 filter():

var newArr = arr.filter(function(item) {
return item.name === "orange";
});
console.log("Filter results:", newArr);

3、forEach()

forEach为每个元素执行对应的方法,是用来替换for循环的。

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 使用for循环
for (var i = 0, l = arr.length; i < l; i++) {
console.log(arr[i]);
}
// 使用forEach循环
arr.forEach(function(item, index) {
console.log(item);
});

4、map()

map()对数组的每个元素进行一定操作(映射)后,会返回一个新的数组。

var oldArr = [{first_name: "Colin",last_name: "Toh"}, {first_name: "Addy",last_name: "Osmani"}, {first_name: "Yehuda",last_name: "Katz"}];
function getNewArr() {
var newArr = [];
for (var i = 0; i < oldArr.length; i++) {
var item = oldArr[i];
item.full_name = [item.first_name, item.last_name].join(" ");
newArr[i] = item;
}
return newArr;
}
var personName = getNewArr();
personName.forEach(function(item, index) {
console.log(item);
})
/****输出结果:
Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
****/

使用map()方法:

function getNewArr() {
return oldArr.map(function(item, index) {
item.full_name = [item.first_name, item.last_name].join(" ");
return item;
})
}
var personName = getNewArr();
personName.forEach(function(item, index) {
console.log(item);
})
/****输出结果:
Object {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
Object {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
Object {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}
****/

5、reduce()

reduce()可以实现一个累加器的功能,将数组的每个值(从左到右)将其降低到一个值。也可以理解为:让数组中的前项和后项做某种运算,并累积最终值;

场景: 统计一个数组中有多少个不重复的单词;

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
function getWordCnt() {
var obj = {};
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
obj[item] = (obj[item] + 1) || 1;
}
return obj;
}
console.log(getWordCnt());
// 输出结果:
// Object {apple: 2, orange: 3, pear: 1}

使用reduce()后:

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];
function getWordCnt() {
return arr.reduce(function(prev, next) {
prev[next] = (prev[next] + 1) || 1;
return prev;
}, {});
}
console.log(getWordCnt());
// 输出结果:
// Object {apple: 2, orange: 3, pear: 1}

6 、array.some(callback[, thisObject]);callback : 函数用来测试某些元素。

thisObject: 对象作为该执行回调时使用。

检测数组中是否有某些项符合条件;

var scores = [45, 60, 70, 65, 95, 85];
var current = 60;
function passed(score) {
return score > current;
}
console.log(scores.some(passed)); // == > true

7、array.every(callback[, thisObject]);callback : 函数用来测试每个元素。thisObject: 对象作为该执行回调时使用。

检测数组中每一项是否符合条件;

var scores = [45, 60, 70, 65, 95, 85];
var current = 60;
function passed(score) {
return score > current;
}
console.log(scores.every(passed)); // == > false

通过以上实例给大家介绍了ECMAScript5中新增的Array方法,希望对大家有所帮助!

Javascript 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 #Javascript
javascript中apply、call和bind的使用区别
Apr 05 #Javascript
JavaScript数组去重的两种方法推荐
Apr 05 #Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 #Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 #Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 #Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 #Javascript
You might like
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python中断多重循环的思路总结
2019/10/04 Python
python模块常用用法实例详解
2019/10/17 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
逃课上网检讨书
2014/02/20 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
机关作风建设自查报告
2014/10/22 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
nginx中proxy_pass各种用法详解
2021/11/07 Servers