ES5新增数组的实现方法


Posted in Javascript onMay 12, 2020

1、静态方法 isArray():

Array.isArray()
// Array.isArray方法返回一个布尔值,表示参数是否为数组。
// 它可以弥补typeof运算符的不足。
var arr = [1, 2, 3];
 console.log(typeof arr); // "object"
 Array.isArray(arr) // true
// 上面代码中,typeof运算符只能显示数组的类型是Object,
// 而Array.isArray方法可以识别数组。

2、实例(对象)方法 map():

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。

var numbers = [1, 2, 3];
var res = numbers.map(function (n) {
 return n + 1;
});
res:  // [2, 3, 4]
numbers:// [1, 2, 3]
// 上面代码中,numbers数组的所有成员依次执行参数函数,
// 运行结果组成一个新数组返回,原数组没有变化。

map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前值、当前位置和数组本身。

[1, 2, 3].map(function(elem, index, arr) {
 return elem * index;
});
// [0, 2, 6]
// 上面代码中,map方法的回调函数有三个参数,elem为当前成员的
// 值,index为当前成员的位置,arr为原数组([1, 2, 3])

3、forEach():

forEach方法与map方法很相似,也是对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。这就是说,如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法。
forEach的用法与map方法一致,参数是一个函数,该函数同样接受三个参数:当前值、当前位置、整个数组。

function log(elem, index, array) {
 console.log('[' + index + '] = ' + elem );
}
[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

注意:forEach方法无法中断执行,总是会将所有成员遍历完。如果希望符合某种条件时,就中断遍历,则要使用for循环。

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
 if (arr[i] === 2) break;
 console.log(arr[i]);  // 1
}

4、filter():

filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回;
它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回;
该方法不会改变原数组;
filter方法的参数函数可以接受三个参数:当前成员,当前位置和整个数组。

// filter方法的参数函数可以接受三个参数:当前成员,当前位置和整个数组。
var res = [1, 2, 3, 4, 5].filter(function (elem, index, arr) {
 return index % 2 === 0;
});
console.log(res); // [1, 3, 5]
// 上面代码返回偶数位置的成员组成的新数组。

5、reduce();

reduce方法依次处理数组的每个成员,最终累计为一个值。reduce是从左到右处理(从第一个成员到最后一个成员)
reduce方法参数是一个函数,该函数接受以下两个参数。
1累积变量,默认为数组的第一个成员
2当前变量,默认为数组的第二个成员

var res = [1, 2, 3, 4, 5].reduce(function (a, b) {
 console.log(a, b);
 return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
res//最后结果:15

上面代码中,reduce方法求出数组所有成员的和:
第一次执行,a是数组的第一个成员1,b是数组的第二个成员2;
第二次执行,a为上一轮的返回值3,b为第三个成员3;
第三次执行,a为上一轮的返回值6,b为第四个成员4;
第四次执行,a为上一轮返回值10,b为第五个成员5;
至此所有成员遍历完成,整个方法的返回值就是最后一轮的返回值15。

6、indexOf()、lastIndexOf()方法:

indexOf方法返回给定元素在数组中第一次出现的位置,返回结果是匹配开始的位置。如果没有出现则返回-1。

var a = ['a', 'b', 'c'];
a.indexOf('b'); // 1
a.indexOf('y'); // -1
// indexOf方法还可以接受第二个参数,表示搜索的开始位置。
['a', 'b', 'c'].indexOf('a', 1); // -1
// 上面代码从1号位置开始搜索字符a,结果为-1,表示没有搜索到。

lastIndexOf方法返回给定元素在数组中最后一次出现的位置,如果没有出现则返回-1;
lastIndexOf方法的用法跟indexOf方法一致,主要的区别lastIndexOf从尾部开始匹配,indexOf则是从头部开始匹配。
另外,lastIndexOf的第二个参数表示从该位置起向前匹配。

var a = [2, 5, 9, 2];
 a.lastIndexOf(2); // 3
 a.lastIndexOf(7); // -1

注意:这两个方法不能用来搜索NaN的位置,即它们无法确定数组成员是否包含NaN。如下:

[NaN].indexOf(NaN);   // -1
[NaN].lastIndexOf(NaN);// -1

这是因为这两个方法内部,使用严格相等运算符(===)进行比较,而NaN呢,就比较狠,它连自己都不等于,是唯一一个不等于自身的值!

到此这篇关于ES5新增数组的实现方法的文章就介绍到这了,更多相关ES5新增数组内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
vue axios用法教程详解
Jul 23 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
JavaScript内置对象之Array的使用小结
May 12 #Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 #Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 #Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 #Javascript
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
Node.js API详解之 console模块用法详解
May 12 #Javascript
You might like
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python定时任务sched模块用法示例
2018/07/16 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
服装设计专业自荐书范文
2013/12/30 职场文书
给校长的建议书
2014/03/12 职场文书
奠基仪式主持词
2014/03/20 职场文书
化学专业自荐信
2014/05/28 职场文书
公司经理任命书
2014/06/05 职场文书
团代会闭幕词
2015/01/28 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL