代码改变世界

ECMAScript5之Array 全屏模式

  猴子猿  阅读(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>
View Code 
复制代码

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>
View Code
复制代码

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>
View Code
复制代码

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>
View Code
复制代码

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>
View Code
复制代码

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>
View Code
复制代码

 

编辑推荐:
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
阅读排行:
· 2000 Star,是时候为我的开源项目更新下功能了
· 好消息,在 Visual Studio 中可以免费使用 GitHub Copilot 了!
· [WPF UI] 为 AvalonDock 制作一套 Fluent UI 主题
· 基于.NET WinForm开发的一款硬件及协议通讯工具
· 工作中这样用MQ,很香!
点击右上角即可分享
微信分享提示