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实现放大镜的效果的简单实例
May 23 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
JS变量提升及函数提升实例解析
Sep 03 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
Dedecms常用函数解析
2008/02/01 PHP
php 时间计算问题小结
2009/01/04 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python requests模块cookie实例解析
2020/04/14 Python
详解Python模块化编程与装饰器
2021/01/16 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
啤酒销售实习自我鉴定
2013/09/24 职场文书
高校十八大报告感想
2014/01/27 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
个人银行贷款担保书
2014/04/01 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang