MooTools Native Extensions之Arrays篇

Arrays

这些native Array prototype在MooTools中是很受欢迎的。

Arrays不需要任何实例就能获得这些方法(除非在你的工作与iterable object不是一个真正的Aarry,

比如 arguments object————在我的MooTools的Core类的介绍 的“ 枚举助手和快捷函数: $arguments, $each, $splat, $A, and $H “ 小节中有说明。

这意味着你可以(应该)使用语句初始化在arrays中。

For example:

1
2
3
4
5
 var numbers = [1,2,3]; 
 numbers.each(function(value){ 
   alert(value); 
    //Alerts 1, 2, 3 
 });

Array Methods

Arrays有许多的本地方法(push, slice, pop, etc.),但并非所有的这些方法都是容易使用的,而且其中许多人都放弃了使用它们。

由于JavaScript1.5对Array增加了一些比较好用的方法,如 forEach,filter,map,every,som,indexOf, 它们都在比较流行的浏览器( Firefox和Safari , Opera等)中得到了应用 。

但是在还不支持JavaScript1.5的浏览器里是不能用得,所以,mootools它通过扩展Array来使其实现对这些方法的支持,但是MooTools不会改变它们,对于旧版本的浏览器不支持他们, MooTools增加,从而使您能够安全地使用它们,而不必担心他们是否在场。

这里有一个 关于Array methods 的 quick rundown :

METHOD TYPE (方法类型) METHOD NAME (方法名称)
Iteration(迭代) each, filter, some, every, map
Introspection (自省,自我测试) indexOf, getLast, getRandom
Manipulation (操纵) erase, extend,empty, include, combine, associate, clean,flatten
Less commonly used(不常用的) rgbToHex, link

Array :: Iteration Methods

The most used methods on Array will no doubt be employed to iterate over thier properties. All of the iteration methods have the following in common:

  • They take two arguments: a function to execute for each item in the array and an optional object to which that function should be bound.
  • The function passed as the first argument is passed two arguments: the item for that iteration and the index of it.

Array.each 对应的原型

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

作用:对数组进行迭代操作,它有两个参数,第一个参数callBack是每次迭代所执行的函数,第二个参数thisObject可选,是要绑定到迭代执行的函数上的对象(也就是函数callBack中的this所指向的对象)

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 //用法一
 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);
 },obj);
 
 //用法三
 function putElt(element, index, array) {
        document.write("pos [" + index + "] in array (" + array + ") is " + element + '<br>');
 }
 [2, 5, 9].forEach(putElt);

Array.each 分析:

在处理数组时,.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理。

用法:

myArray.each(function, bind);

参数详解: function

语法: function(item, index, array)

Example:

1
2
3
4
5
[1,2,3].each(function(value, index){ 
   alert('the item at position ' + index + ' is ' + value);  
   //Alerts "the item at position 0 is 1",  
   //"...1 is 2", etc. 
});

一个真实的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="menu">
    <h1>我的导航条</h1>          
    <ul id="nav">
       <li><a href="#">HOME</a></li>
       <li><a href="#">(X)Html / Css</a></li>
       <li><a href="#">Ajax / RIA</a></li>
       <li><a href="#">GoF</a></li>
       <li><a href="#">JavaScript</a></li>
       <li><a href="#">JavaWeb</a></li>
       <li><a href="#">jQuery</a></li>
       <li><a href="#">MooTools</a></li>
       <li><a href="#">Python</a></li>
       <li><a href="#">Resources</a></li>
    </ul>
</div>

在下面的例子中我会提前用到MooTools 中关于DOM选择器的几个方法,如 $$(),$(),Elemesnt.getElements()方法。

如果有不明白的地方请查看MooTools1.2 文档中的数组部分

1
2
3
4
//一个普通的遍历
var nav_list=$$('#nav li');
 
for(var i=0;i

以上例子的另一种实现方式。

1
2
var navElements=$('nav').getElements('li');//每一个元素的所有子元素的集合
navElements.each(function(item){alert(item.innerHTML);});

Anonymous Methods vs. Named Functions

The preceding examples use an anonymous function, but there’s no reason why you can’t pass the method a function that’s already defined.

如果你可能想把你的函数从选择器中独立出来。

function test(item,index){alert(index+" = "+item.innerHTML);}

var navElements=$('nav').getElements('li');//每一个元素的所有子元素的集合
navElements.each(test);

Other Iteration Methods

Array :: Introspection Methods

So each lets you iterate over the objects in an array, but what of the other methods? So long as you understand how each works, you can apply the same methodology to the other iteration methods.

Array.filter 对应的原型:

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

作用:迭代数组,每个元素作为参数执行callBack方法,由callBack方法作为数据过滤网,最后返回过滤后的一个数组

1
2
3
4
5
// Firefox和Safari , Opera 中得到支持,IE中不支持
 var result = [1,2,3,4,5].filter(function(e){
         return e > 3;
 });
 alert(result);   //结果为4,5

Array.filter分析:

将所有在给定过滤函数中过滤通过的数组项创建一个新数组.
这个方法只提供给没有原生Array:filter方法支持的浏览器

用法:

var filteredArray = myArray.filter(function, bind);

参数详解: function

语法: function(item, index, array)

返回值: (array) 过滤后的新数组

Example:

1
2
3
4
5
// 在导入MooTools库以后,执行 .filter()方法,它将支持所有的主流浏览器(IE也可以了)
 var result = [1,2,3,4,5].filter(function(e){
         return e > 3;
 });
 alert(result);   //结果为4,5

Array.filter can take a second argument for binding:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var exampleObj = {
  setNumbers: function(numbers){
    this.numbers = numbers;
  },
  filterValue: 10,
  filterBigEnough: function(){
    this.numbers = this.numbers.filter(this.isBigEnough, this);
    /*	the second arg filter() binds this (exampleObj)	*/
  },
  isBigEnough: function(element, index, array) {
    return (element >= this.filterValue); 
    /*	this has to == exampleObj	*/
  }
};
exampleObj.setNumbers([1,10,100]);
exampleObj.filterBigEnough();
console.log(exampleObj.numbers);
/*	logs [10,100]	*/

Array.every 对应的原型:

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

作用:它的意思就是:是否数组中的每个元素都通过了callBack的处理?如果是,则返回true,如果有一个不是,则立马返回false

1
2
3
4
5
/*// Firefox和Safari , Opera 中得到支持,IE中不支持
var result = [1,2,3,4,5].every(function(e){
      return e > 3;
});
alert(result); //返回false

Array.every 分析:

如果数组中的每一项都通过给定函数的测试,则返回true.

这个方法只提供给没有原生Array:every方法支持的浏览器

用法:

var filteredArray = myArray.every(function, bind);

参数详解: function

语法:function(item, index, array)

返回值:(boolean) 如果数组中的每一项都通过给定函数的测试,则返回true; 否则,返回false

Example:

1
2
3
4
// 在导入MooTools库以后,执行 .every()方法,它将支持所有的主流浏览器
[1,2,3].every(function(num){
  return $type(num) == "number";
}); //returns true because 1, 2, and 3 are all numbers
1
2
3
4
// 在导入MooTools库以后,执行 .every()方法,它将支持所有的主流浏览器
[1,2,'foo'].every(function(num){
  return $type(num) == "number";
}); //returns false because 'foo' is not a number

Array.some 对应的原型:

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

作用:它的意思就是:是否数组中至少有一个项元素通过了callBack的处理?如果有,则立马返回true,如果一个都没有,则返回false

1
2
3
4
5
// Firefox和Safari , Opera 中得到支持,IE中不支持
var result = [1,2,3,4,5].some(function(e){
     return e > 3;
});
alert(result);  //Returns true because 3 > 2

Array.some 分析:

如果数组中至少有一个项通过了给出的函数的测试,则返回true.

这个方法只提供给没有原生Array:some方法支持的浏览器

用法:

var somePassed = myArray.some(function, bind);

参数详解: function

语法:function(item, index, array)

返回值:(boolean) 如果数组中至少有一个项通过了给出的函数的测试,则返回true; 否则返回false

Example:

1
2
3
4
// 在导入MooTools库以后,执行 .some()方法,它将支持所有的主流浏览器
[1,2,'foo'].some(function(num){
  return $type(num) == "number";
}); //returns true because 1 and 2 are numbers, even though 'foo' isn't

Array.map 对应的原型:

原型:Array.prototype.map(callBack: Function, thisObject: Object)
作用:迭代数组,每个元素作为参数执行callBack方法,由callBack方法对每个元素进行处理,最后返回处理后的一个数组

1
2
3
4
5
// Firefox和Safari , Opera 中得到支持,IE中不支持
var result = [1,2,3,4,5].map(function(e){
return e + 'px';
});
alert(result);     //结果为1px,2px,3px,4px,5px

Array.map 分析:

返回一个由经过给定函数处理返回的值所创建的新数组.

这个方法只提供给没有原生Array:map方法支持的浏览器

用法:

var mappedArray = myArray.map(fn[, bind]);

参数详解: function

语法:function(item, index, array)

返回值:(array) 处理后的新数组

Example:

1
2
3
4
// 在导入MooTools库以后,执行 .map()方法,它将支持所有的主流浏览器
[1,2,3].map(function(num){
  return num*2;
}); //returns [2,4,6];

Just like .each, .map takes an optional binding element as its second input.
Also, the function you call in .map can take two inputs; the object and its index.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 在导入MooTools库以后,执行 .map()方法,它将支持所有的主流浏览器
var exampleObj = {
  setNumbers: function(numbers){
    this.numbers = numbers;
  },
  multiplier: 2,
  calcNumbers: function(){
    this.numbers = this.numbers.map(function(number){
      return number*this.multiplier; 
      /* note here that we return the result of the calculation
      also note that we refer to "this", so we need to bind this
      function	*/
    }, this); /*here is the interesting bit*/
    /*.map will execute this on each item in the 
     array, and then return the entire result set.*/
  }
};
exampleObj.setNumbers([1,2,3]);
exampleObj.calcNumbers();
alert(exampleObj.numbers); //alerts 2,4,6

Array :: Manipulation Methods

The following shortcut methods are mostly used for introspection. For instance, indexOf doesn’t alter the array or iterate over it, it just returns the index of an item in the array.

====查找某一对象在数组的里索引位置====

Array.indexOf 对应的原型:

原型:indexOf(searchElement: Object, fromIndex: Number)
作用:在数组中查找是否含有指定对象,如果有,返回对象所在的索引,否则返回-1;第二个参数是可选参数,如果指定的话,比如指定3,则表示从数组的第4个元素开始查找;默认从第0个元素开始查找。

1
2
3
// Firefox和Safari , Opera 中得到支持,IE中不支持
var x1 = [1,2,3,4,5].indexOf(2);        //结果为1
var x2 = [1,2,3,4,5].indexOf(2,3);     //结果为-1

Array.indexOf 分析:

返回数组中和给出参数值相等的项的索引号; 如果未找到相等的项, 则返回-1.

这个方法只提供给没有原生Array:indexOf方法支持的浏览器

用法:

var index = myArray.indexOf(item,index);

返回值:
(number) 数组中和给出参数值相等的项的索引号; 如果未找到相等的项, 则返回-1

Example:

一个参数时

1
2
['apple','lemon','banana'].indexOf('apple');
//index is 0

二个参数时

1
2
['apple','lemon','banana'].indexOf('apple',1);
//index is -1, because apple is not found in indexes >= 1

====从数组中获取指定的元素====

Array.getLast 对应的原型:

Array.getLast 分析:

返回数组中的最后一项

用法:

myArray.getLast();

返回值:

(mixed) 数组中的最后一项
(false) 如果是空数组,则返回null

Example:

1
 [0,1,2,3].getLast(); //Returns 3

Array.getRandom 对应的原型:

Array.getRandom 分析:

返回从数组中随机抽取的一项

用法:

myArray.getRandom();

返回值:

(mixed) 从数组中随机抽取的一项; 如果是空数组,则返回null

Example:

1
[0,1,2,3].getRandom(); //Returns a random value

Array :: Manipulation Methods

Finally, you have the methods that alter the array. As noted earlier, JavaScript already has numerous methods for doing this, including splice, unshift, pop, push, and so forth. MooTools adds a few more to your toolbox. All of these methods return the array to you, but in the case of erase, empty, and include, the array is also altered. So, for example, myArray.erase(foo) alters myArray.

====删除 与 清空====

Array.erase

删除数组中所有的指定项

作用:This method erases an item from the array.

用法:myArray.erase(item);

返回值:(array) 进行删除后的主调数组

Example:

1
2
['Cow', 'Pig', 'Dog', 'Cat', 'Dog'].erase('Dog') //返回 ['Cow', 'Pig', 'Cat']
['Cow', 'Pig', 'Dog'].erase('Cat') //返回 ['Cow', 'Pig', 'Dog']

Array.empty

清空数组

作用: This method removes all the items from the array.

用法:myArray.empty();

返回值:(array) 清空后的主调数组

Example:

1
2
3
4
5
var x = [1,2,3];
x.empty();//x变成[]
 
//等同于
x = [];

====向数组中添加一个元素====

Array.include

向数组中添加一项,只要把该项传给.include()方法,它就会包含到你的数组中 。如果该项在数组中已经存在,则不再添加.

作用: This method pushes the value into the array if it’s not already present.

用法:myArray.include(item);

返回值:(array) 添加元素后的主调数组

Example:

1
2
['Cow', 'Pig', 'Dog'].include('Cat'); //返回 ['Cow', 'Pig', 'Dog', 'Cat']
['Cow', 'Pig', 'Dog'].include('Dog'); //返回 ['Cow', 'Pig', 'Dog']

Array.combine

和.include()方法一样,不过它可以让你把一个数组添加到一个已经存在的数组中,而不用担心有重复的内容组合(重复的项将不会加入)。

作用: This method combines two arrays without duplicates. Note that combine will exclude any duplicates found in the array passed in.

用法:myArray.combine(array);

返回值:(array) 组合后的主调数组

Example:

1
2
var animals = ['Cow', 'Pig', 'Dog'];
animals.combine(['Cat', 'Dog']); //animals = ['Cow', 'Pig', 'Dog', 'Cat'];

====其它的应用====

Array.extend

将另一个数组中的所有元素纳入本数组

作用: This method adds all the items in one array to the other (allows duplicates).

用法:myArray.extend(array);

返回值:(array) 纳入新项后的主调数组

Example:

1
2
var animals = ['Cow', 'Pig', 'Dog'];
animals.extend(['Cat', 'Dog']); //animals = ['Cow', 'Pig', 'Dog', 'Cat', 'Dog'];

Array.associate

创建一个键值对对象,该对象中的键由作为参数传入的一个数组决定,值由主调数组决定

作用:This method returns an object of keys/values where the passed-in array becomes the keys.

用法:var associated = myArray.associate(obj);

返回值:(object) 合成后的键值对对象

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
var animals = ['Cow', 'Pig', 'Dog', 'Cat'];
var sounds = ['Moo', 'Oink', 'Woof', 'Miao'];
sounds.associate(animals);
 
/**
 * 返回 
 * {
 *   'Cow': 'Moo', 
 *   'Pig': 'Oink', 
 *   'Dog': 'Woof', 
 *   'Cat': 'Miao'
 * }
 */

Array.clean

Array.clean removes from the array all items that are null or undefined.

作用:This method is a shortcut to a version of Array.filter that simply returns the value as its condition.

用法:var cleanedArray = myArray.clean();

返回值:array) 过滤后的新数组

Example:

1
var cleanedArray = [0, 3, null, false, true, "foo", ""].clean(); //cleanedArray = [0, 3, false, true, "foo", ""]

Array.flatten

将多维数组扁平化(即变为一维数组)

作用: This method flattens an array of arrays into a single array, returning a new array.

用法:myArray.flatten();

返回值:(array) 扁平化后的主调数组

Example:

1
2
var myArray = [1,2,3,[4,5, [6,7]], [[[8]]]];
myArray.flatten(); //returns [1,2,3,4,5,6,7,8]

Array ::Less commonly used

Array.rgbToHex

Takes an array with three hexidecimal color values and converts them to an rgb value; mostly used by MooTools to set css color values.

Example:

1
['63','64','65'].hexToRgb() //returns "rgb(99,100,101)"

Array.rgbToHex

将RGB格式的颜色代码转换成十六进制的代码. 输入的RGB代码需要类似如下的其中一种格式:[255,255,255] 或 [255,255,255,1]
Takes an array with three color values and converts them to an RGB value; mostly used by MooTools to set css color values.

Example:

1
[99,100,101].rgbToHex() //returns "#636465"

Array.link

根据给出的 ‘键/测试函数’对 来创建一个新的键值对对象

This somewhat abstract method helps you map an array of values to an object based on their type. It only works if theres no more than one of each type in the array (so there’s no more than one string, or number, etc). It’s useful if you want to have a method or function accept different kinds of values in different orders. Here’s the example from the MooTools docs:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var el = document.createElement('div');
var arr2 = [100, 'Hello', {foo: 'bar'}, el, false, 300];
arr2.link({
    myNumber: Number.type,
    myNumber2: function(item){
        if(item >= 200) return true;
    }, 
    myElement: Element.type, 
    myObject: Object.type, 
    myString: String.type, 
    myBoolean: $defined
});
 
/**
 *  返回 
 *  {
 *      myNumber: 100,
 *      myNumber2: 300,
 *      myElement: el, 
 *      myObject: {
 *          foo: 'bar'
 *      }, 
 *      myString: 'Hello', 
 *      myBoolean: false
 *  }
 *  
 *  备注说明: 当前键的取值搜索范围是前一个键的测试挑选剩余后的数组项(而不是整个数组项)
 */

站点统计