ECMAScript5之Array 全屏模式
2016-03-09 18:07 猴子猿 阅读(549) 评论(0) 编辑 收藏 举报在ECMAScript5中对Array新增的些方法,以前没注意的同志们,嘻嘻,下面我们一起来边看边学。
1、Array之isArray(element) |
看到isArray,不言而喻,就是判断一个对象是不是数组哈。
且它是一个静态方法,使用规则如下:
Array.isArray(element);当element是数组时,返回true;否则返回false;
我们一起来写个demo
<!DOCTYPE html> <head> <title>array</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> //创建一个数组a和一个对象b var a = new Array(); var b = new Object(); console.log(Array.isArray(a)); console.log(Array.isArray(b)); </script> </body> </html>
通过chrome来看看打印结果
2、Array之indexOf(element) |
看到indexOf,想必大家并不陌生,String.indexOf嘛,其实核心作用都一样.
数组的indexOf就是从头到尾,查找数组内的指定元素,并返回查找到的第一个元素索引值,若在数组中没有相应元素,则返回-1。
我们一起来写个demo并通过chrome来看看打印结果
<!DOCTYPE html> <head> <title>indexOf</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> //创建一个数组a var a =new Array(1,2,3,4,5,1); //从数组a的值中可以看出,打印结果为0 console.log(a.indexOf(1)); //从数组a的值中可以看出,打印结果为-1 console.log(a.indexOf(6)); </script> </body> </html>
3、Array之lastIndexOf(element) |
这个lastIndexOf,其实和上面所说的indexOf差不多,只是lastIndexOf是从尾到头搜索而已。
我们一起来写个demo并通过chrome来看看打印结果
<!DOCTYPE html> <head> <title>lastIndexOf</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> var a = new Array(1,2,3,4,5,1); //因为lastIndexOf是从尾到头搜索,所以打印结果为5 console.log(a.lastIndexOf(1)); //从上面的结果看,打印结果为1 console.log(a.lastIndexOf(2)); </script> </body> </html>
4、Array之every |
every用法如下:
/* method: every function: every的作用就是遍历数组,当every中的函数都返回true时,才返回一个true;否则,只要有一个false,就返回false,和&&运算差不多 Param: element --> 当前元素 index --> 元素索引 array --> 调用every方法的数组 */ every(function(element,index,array){ });
我们demo下
<!DOCTYPE html> <head> <title>every</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> var a = new Array(1,2,3,4,5); //因为我是判定的e < 3,所以根据a的值,可以知道返回false console.log( a.every(function(e,i,arr){ return e < 3; }) ); //因为我是判定的e < 6,所以根据a的值,可以知道返回true console.log( a.every(function(e,i,arr){ return e < 6; }) ); </script> </body> </html>
5、Array之some |
some的作用与上面的every有点不一样,倘若说every有点像&&运算,那么some就有点像||运算啦。some的函数中只要有一个返回true,那么就返回 true;全都是false时,才返回false。
Demo如下
<!DOCTYPE html> <head> <title>some</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> var a = new Array(1,2,3,4,5); //因为e>4,只有一个5满足,但是已经足够了 console.log( a.some(function(e,i,arr){ return e > 4; }) ); </script> </body> </html>
6、Array之forEach |
这个方法与jQuery的each差不多,就是遍历数组的。
使用如下:
/* Param: e --> 当前元素 i --> 元素索引 array --> 调用forEach方法的数组 */ forEach(function(e,i,array){ });
Demo如下:
<!DOCTYPE html> <head> <title>forEach</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> var a = new Array(1,2,3,4,5); a.forEach(function(e,i,array){ console.log(e); }); </script> </body> </html>
7、Array之filter |
filter方法的作用就是遍历数组,并过滤数组中的值,最后返回过滤后的值的数组。当filter里的回调函数返回true时,就将这个值加入到临时数组中,若是false,则不加入;最后返回这个临时数组。
filter的用法如下:
//参数e为遍历数组中的当前元素值 filter(function(e){ });
Demo与代码如下:
<!DOCTYPE html> <head> <title>filter</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> var a = new Array(1,2,3,4,5); var b = a.filter(function(e){ return e%2==0; }); console.log('原值a:'+a); console.log('filter后的值:'+b); </script> </body> </html>
【推荐】FFA 2024大会视频回放:Apache Flink 的过去、现在及未来
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
· 2000 Star,是时候为我的开源项目更新下功能了
· 好消息,在 Visual Studio 中可以免费使用 GitHub Copilot 了!
· [WPF UI] 为 AvalonDock 制作一套 Fluent UI 主题
· 基于.NET WinForm开发的一款硬件及协议通讯工具
· 工作中这样用MQ,很香!