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 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
高三体育教学反思
2014/01/29 职场文书
股权投资意向书
2014/04/01 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python