当前位置: 代码迷 >> Web前端 >> dojo1.7通译 数组工具(Arrays Made Easy)
  详细解决方案

dojo1.7通译 数组工具(Arrays Made Easy)

热度:791   发布时间:2012-06-27 14:20:08.0
dojo1.7翻译 数组工具(Arrays Made Easy)

?

英文地址:http://dojotoolkit.org/documentation/tutorials/1.7/arrays/

难度:初级

Dojo的版本:1.7

?

?

在本教程中,您将了解使用JavaScript数组: dojo/_base/array 的Dojo的跨平台解决方案。

?

?

入门

在建立你的web应用时,数据访问和操纵是一个非常重要的方面。 JavaScript的开发者知道这一点所以增加了数组的一些方法,以便更容易地处理数据。 可悲的是,并不是所有的浏览器和环境都采用这些新方法。 好消息是,Dojo提供了新新的阵列的辅助方法,所以无论你在什么环境,你都能够很容易地使用数组。

?

?

搜索

一个操作数组的常用功能是找到一个数组中内的一个元素。 Dojo提供了两个函数: dojo/_base/array模块中的 indexOf lastIndexOf。indexOf是通过一个数组从最低到最高下标的搜索,lastIndexOf是从最高到最低搜索。 都采取相同的参数:一个数组,要搜索的元素,从开始的下标。 让我们来看看一些例子:

?

require(["dojo/_base/array"], function(baseArray) {
    var arr1 = [1,2,3,4,3,2,1,2,3,4,3,2,1];
    baseArray.indexOf(arr1, 2); // returns 1
    baseArray.indexOf(arr1, 2, 2); // returns 5
    baseArray.lastIndexOf(arr1, 2); // returns 11
});
?

?

如果要搜索的元素没有被发现,这两个函数将返回-1 。 内部有一件事要注意的是,这两个函数使用进行严格比较( === ),所以要注意搜索的值:

?

var obj1 = { id: 1 },
    arr2 = [{ id: 0 }, obj1, { id: 2 }, { id: 3 }];
 
// This search returns 1, as obj1 is the second item
// in the array.
baseArray.indexOf(arr2, obj1);
 
// This search returns -1. While the objects may look similar,
// they are entirely different objects, and so this object
// isn't found in the array.
baseArray.indexOf(arr2, { id: 1 });
?

?

运行示例

循环

另一个频繁的操作是循环数组。 通常情况下,这是与以下类似:

?

var item;
for(var i = 0; i < arr.length; i++){
    item = arr[i];
    // do something with item
}
?

?

?

设置这样循环的一个缺点是,如果您在事件处理程序访问item,它不会是你期望的元素,而是将数组的最后一个元素。 forEach方法为我们提供了一种标准的循环,同时也保留元素,以便在在范围链中查找。 它符合Array.prototype.forEach,但有两个例外:

?

  • 它会遍历未分配的下标。 这意味着,如果你有一个未定义的值在您的数组中,它仍然会执行该指数的功能,而不是只跳过。
  • 循环是做了数组本身。 如果使用本地的forEach方法,它遍历数组的一个副本,而不是该数组本身。 这意味着您在基础数组的任何更改都是可见的。

?

让我们来看看一个例子:

?

var arr = ["one", "two", "three", "four"],
    // dom is from dojo/dom
    list1 = dom.byId("list1");
 
// Skip over index 4, leaving it undefined
arr[5] = "six";
 
baseArray.forEach(arr, function(item, index){
    // This function is called for every item in the array
    if(index == 3){
        // this changes the original array,
        // which changes the item passed to
        // the sixth invocation of this function
        arr[5] = "seven";
    }
     
    // domConstruct is available at dojo/dom-construct
    domConstruct.create("li", {
        innerHTML: item + " (" + index + ")"
    }, list1);
});
?

?

?

baseArray.forEach方法接受3个参数:要遍历的数组,回调函数(包括如上所述之间分配的,未分配的下标),和一个可选的对象使用的范围。

?

回调函数会传入当前元素对象,当前的下标。 第三个参数是baseArray.forEach范围 ,如果不提供第三个参数则指全局对象( window在浏览器的情况下)。 让我们来看看在范围参数:

?

var list2 = dom.byId("list2"),
    myObject = {
        prefix: "ITEM: ",
        formatItem: function(item, index){
            return this.prefix + item + " (" + index + ")";
        },
        outputItems: function(arr, node){
            baseArray.forEach(arr, function(item, index){
                domConstruct.create("li", {
                    innerHTML: this.formatItem(item, index)
                }, node);
            }, this);
        }
    };
 
myObject.outputItems(arr, list2);

?

?

这是可能的范围参数中最常用的模式之一:通过this可以在相同的范围内调用回调函数。 这种模式是非常有用的。

运行示例

?

操纵

dojo使循环很容易,但往往你会想取得一个数组中的数据,做了一些操作,结果你发现做的操作是作用于一个新的数组中。 比方说,我们有一个字符串数组,我们要与他们的值转换为为对象。 鉴于我们所知道的,我们可能会做一些类似这样的:

?

var original = ["one", "two", "three", "four", "five"],
    transformed = [];
 
baseArray.forEach(original, function(item, index){
    transformed.push({
        id: index * 100,
        text: item
    });
}); // [ { id: 0, text: "one" }, { id: 100, text: "two" }, ... ]
?

?

这不是一个好的解决方案,但它也可以在新版本的JavaScript处理。其中Dojo有: baseArray.map的东西。 让我们一起来看看:

?

var mapped = baseArray.map(original, function(item, index){
    return {
        id: index * 100,
        text: item
    };
}); // [ { id: 0, text: "one" }, { id: 100, text: "two" }, ... ]
?

?

map的参数与forEach是一样 。 不同的是,回调的返回值将存储一个新的阵列。

?

另一个常见的功能是filter 。 filter背后的想法是,你有一个数组,你可能只想基于某种条件选择出它的某些元素。 这可以使用forEach foreach ,但使用的filter有助于大大简化。

?

map参数不改变,但filter的返回值已经进行了判断,如果它是truthy,该项目被追加到filter返回的数组。 让我们来看看另一个例子:

?

var filtered = baseArray.filter(mapped, function(item, index){
    return item.id > 50 && item.id < 350;
}); // [ { id: 100, text: "two" }, { id: 200, text: "three" },
    //   { id: 300, text: "four" } ]

?运行示例

?

匹配

有时候你会想知道,如果一个数组中的元素是否符合一定条件:也许你想知道如果某些对象是否有一个错误信息,或者你想确保所有对象都具有一个文本属性。 这里可以使用some方法了。 every 函数的使用与filter一模一样 (包括回调应该返回什么),但不是返回一个数组,而是返回一个布尔值: every将判断数组中的每一个元素是否符合条件,如果都符合返回true, 对于some来说将判断数组中至少有一个元素符合条件。 下面的例子中,应明确这一点:

?

var arr1 = [1,2,3,4,5],
    arr2 = [1,1,1,1,1];
 
baseArray.every(arr1, function(item){ return item == 1; }); // returns false
baseArray.some(arr1, function(item){ return item == 1; });  // returns true
 
baseArray.every(arr2, function(item){ return item == 1; }); // returns true
baseArray.some(arr2, function(item){ return item == 1; });  // returns true
 
baseArray.every(arr2, function(item){ return item == 2; }); // returns false
baseArray.some(arr2, function(item){ return item == 2; });  // returns false
?

?

判断这两个函数的一个简单的方法是, every一样使用&&运算符和if语句,而some喜欢使用||运算符

运行示例

?

结论

JavaScript规范已给了我们不少强大的阵列的方法,但不是所有的浏览器和环境支持他们。 Dojo的dojo/_base/array模块可以兼容新的和旧的阵列方法之间的差距,让你可以快速有效地用更少的代码做更多的事。

?

  相关解决方案