你的位置:首页 > Java教程

[Java教程]ECMAScript5之Array


在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