MooTools教程

当前位置:首页>Mootools>MooTools教程>mootools框架教程(3) -Array篇:主要方法测试实例

mootools框架教程(3) -Array篇:主要方法测试实例

时间:2015-07-13 14:32来源:网络整理 作者:KKWL 点击:
导言:mootools框架教程(3) -Array篇:方法完全解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候
  • 导言:mootools框架教程(3) -Array篇:方法完全解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

    说明:由于JavaScript1.5对Array增加了一些比较好用的方法,如forEach,

    filter,map,every,som,indexOf,但是在还不支持JavaScript1.5的浏览器里是不能用得,所以,mootools通过扩展Array来使其实现对这些方法的支持:

    ---------------------------------Array.js---------------------------------

    1.Array对象的forEach方法

    原型:Array.prototype.forEach(callBack: Function, thisObject: Object)

    作用:对数组进行迭代操作,它有两个参数,第一个参数callBack是每次迭代

    所执行的函数,第二个参数thisObject可选,是要绑定到迭代执行的函数 

    上的对象(也就是函数callBack中的this所指向的对象)

    例子:

    //用法一

    var arr = [1,2,3,4,5,6];
    arr.forEach(function(e){
    alert(e);
    });

    //用法二

    var arr = [1,2,3,4,5,6];
    var obj = "hello!";
    arr.forEach(function(e){
    alert(e+'--'+this); //这里的 this指后面的 obj 对象
    },obj);

    //用法三

    function putElt(element, index, array) {      document.write("pos [" + index + "] in array (" + array + ") is " + element + '<br>');}     [2, 5, 9].forEach(putElt);2.Array对象的filter方法

    原型:Array.prototype.filter(callBack: Function, thisObject: Object)

    作用:迭代数组,每个元素作为参数执行callBack方法,由callBack方法作为

    数据过滤网,最后返回过滤后的一个数组

    例子:

    var result = [1,2,3,4,5].filter(function(e){        return e > 3;  });alert(result);   //结果为4,53.Array对象的map方法:

    原型:Array.prototype.map(callBack: Function, thisObject: Object)

    作用:迭代数组,每个元素作为参数执行callBack方法,由callBack方法对每

    个元素进行处理,最后返回处理后的一个数组

    例子:

    var result = [1,2,3,4,5].map(function(e){        return e + 'px';  });alert(result);  //结果为1px,2px,3px,4px,5px4.Array对象的every方法:

    原型:Array.prototype.every(callBack: Function, thisObject: Object)

    作用:它的意思就是:是否数组中的每个元素都通过了callBack的处理?如果

    是,则返回true,如果有一个不是,则返回false

    例子:

    var result = [1,2,3,4,5].every(function(e){        return e > 3;  });alert(result);    //返回false

    5.Array对象的some方法:

    原型:Array.prototype.some(callBack: Function, thisObject: Object)

    作用:它的意思就是:是否数组中的有元素通过了callBack的处理?如果有,

    则返回true,如果一个都没有,则返回false

    var result = [1,2,3,4,5].every(function(e){        return e > 3;  });alert(result);    //返回true6.Array对象的indexOf方法:

    原型:indexOf(searchElement: Object, fromIndex: Number)

    作用:在数组中查找是否含有指定对象,如果有,返回对象所在的索引,否则返回-

    1;第二个参数是可选参数,如果指定的话,比如指定3,则表示从数组

    的第4个元素开始查找;默认从第0个元素开始查找。

    例子:

    var x1 = [1,2,3,4,5].indexOf(2); //结果为1
    var x2 = [1,2,3,4,5].indexOf(2,3); //结果为-1

    --------------------------------------------------------------------------------------------------------------------------

    ----以下的方法是mootools提供的Array的专有扩展,和JavaScript标准无关--------

    ----------------------------------------------------------------------------

    7.each:它的用法和作用与forEach一模一样,参看上文的forEach

    8.copy:复制数组元素到新的数组中;默认是全部复制,如果指定了开始索引和长度的话,则可以按指定形式复制

    例子:

    var a = [1,2,3,4,5,6];
    var b1 = a.copy(); //[1,2,3,4,5,6]
    var b2 = a.copy(2,2); //[3,4]

    9.remove:删除数组中指定值的元素

    例子:

    var a = [1,2,2,3,4,5,6];
    var b = a.remove(4); //[1,2,2,3,5,6]
    var c = a.remove(2); //[1,3,4,5,6]

    10.test:查找数组中是否有指定的值

    例子:

    var a = [1,2,3,4,5,6];
    var b = a.test(11); //fasle
    var c = a.test(2); //true

    11.extend:把另一个数组追加到本数组后(不排除相同值的)

    例子:

    var a = [1,2,3,4];
    var b = [1,11,12];
    a.extend(b);
    alert(a); //1,2,3,4,1,11,12

    12.associate:把另一个数组中的值作为key,本数组中的值做为值,组成一个键值

    对象(长度为两者中较小的那个)

    例子:

    var v = [1,2,3,4,5];
    var k = ['one','two','three'];
    var kv = v.associate(k);
    alert(kv['one']); //1
    var v = [1,2];
    var k = ['one','two','three'];
    var kv = v.associate(k);
    alert(kv['one']); //1
    alert(kv['three']); //undefined

    13.$A:和Array的copy方法是一样的作用

    例子:

    var a = [1,2,3,4];
    var b = $A(a); //[1,2,3,4]
    var c = $A(a,1,2); //[2,3]

    14.$each:功能基本和Array的forEach方法相同,官方文档上说可用于非常规数组的迭代,如由getElemntsByTagName调用产生的结果,以及参数数组arguments等。不过管它常规不常规,用起来的形式还是一样的

    例子:

    var a = [1,2,3,4];$each(a,function(e){      alert(e);  });

  • 导言:mootools框架教程(3) -Array篇:主要方法测试实例。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title>mootools--Native: Array</title>
      <script language="javascript" type="text/javascript" src="mootools-1.2-core-jm.js"></script>
      <script language="javascript" type="text/javascript">
      {
        //forEach用法一
        var arr = [1,2,3,4,5,6];
        arr.forEach(function(e){
        alert(e);
       });
       //forEach用法二
       var arr = [1,2,3,4,5,6];
       var obj = "hello!";
       arr.forEach(function(e){
        alert(e+'--'+this); //这里的 this指后面的 obj 对象
       },obj);
       //forEach用法三
       function putElt(element, index, array) { //输出到页面
        document.write("pos [" + index + "] in array (" + array + ") is " + element + '<br>');
        }
       [2, 5, 9].forEach(putElt);

       //filter方法
       var result = [1,2,3,4,5].filter(function(e){
        return e > 3;
     });
     alert(result);  //结果为4,5

     //map方法
     var result = [1,2,3,4,5].map(function(e){
        return e + 'px';
     });
        alert(result);
        //some方法
        var result = [1,2,3,4,5].every(function(e){
        return e > 3;
     });
     alert(result);  //返回true

     //extend 方法
     var a = [1,2,3,4];
        var b = [1,11,12];
        a.extend(b);
        alert(a);
      }
      </script>
    </head>
    <body>
      <form runat="server">
      <div>
      </div>
      </form>
    </body>
    </html>

------分隔线----------------------------