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

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模块可以兼容新的和旧的阵列方法之间的差距，让你可以快速有效地用更少的代码做更多的事。