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 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
AngularJS实现路由实例
Feb 12 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
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
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
详解node.js 事件循环
2020/07/22 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
PyQt5实现简易计算器
2020/05/30 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
python线程里哪种模块比较适合
2020/08/02 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
环保倡议书
2014/04/14 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
教师节联欢会主持词
2015/07/04 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
四年级数学教学反思
2016/02/16 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL