实例详解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 相关文章推荐
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
解决Vue watch里调用方法的坑
Nov 07 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初学者们头痛的十四个问题
2007/01/15 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python实现井字棋小游戏
2020/03/09 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
生日宴会答谢词
2014/01/09 职场文书
新年晚会主持词
2014/03/24 职场文书
双方协议书
2014/04/22 职场文书