首页
技术知识库
Task工作计划
网站简介
DON框架
后台管理
文章分类
JAVA
框架知识
操作系统
容器相关
数据库层
优化技术
界面编程
网络编程
开发工具
GO语言
其他
读书随笔
观影随笔
每日随笔
APP
不翻译DOJO了
所属分类
：[界面编程] |
创建时间
：2013-01-13 |
文章属性
：原创 |
文章来源
：http://windfly.cn |
作者
：windfly
<p>   </p> <p> 英文地址:<a href="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/">http://dojotoolkit.org/documentation/tutorials/1.7/arrays/</a> </p> <p> 难度：初级 </p> <p> Dojo的版本：1.7 </p> <p>   </p> <p>   </p> <p> 在本教程中，您将了解使用JavaScript数组： dojo/_base/array 的Dojo的跨平台解决方案。 </p> <p>   </p> <p>   </p> <h2> 入门 </h2> <p> 在建立你的web应用时，数据访问和操纵是一个非常重要的方面。 JavaScript的开发者知道这一点所以增加了数组的一些方法，以便更容易地处理数据。 可悲的是，并不是所有的浏览器和环境都采用这些新方法。 好消息是，Dojo提供了新新的阵列的辅助方法，所以无论你在什么环境，你都能够很容易地使用数组。 </p> <p>   </p> <p>   </p> <h2> 搜索 </h2> <p> 一个操作数组的常用功能是找到一个数组中内的一个元素。 Dojo提供了两个函数： dojo/_base/array模块中的 indexOf lastIndexOf。indexOf是通过一个数组从最低到最高下标的搜索，lastIndexOf是从最高到最低搜索。 都采取相同的参数：一个数组，要搜索的元素，从开始的下标。 让我们来看看一些例子： </p> <p>   </p> <pre class="js" name="code">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 });</pre>   <p>   </p> <p> 如果要搜索的元素没有被发现，这两个函数将返回-1 。 内部有一件事要注意的是，这两个函数使用进行严格比较（ === ），所以要注意搜索的值： </p> <p>   </p> <pre class="js" name="code">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 });</pre>   <p>   </p> <p> <a href="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/searching.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/searching.html">运行示例</a> </p> <h2> 循环 </h2> <p> 另一个频繁的操作是循环数组。 通常情况下，这是与以下类似： </p> <p>   </p> <pre class="js" name="code">var item; for(var i = 0; i < arr.length; i++){ item = arr[i]; // do something with item }</pre>   <p>   </p> <p>   </p> <p> 设置这样循环的一个缺点是，如果您在事件处理程序访问item，它不会是你期望的元素，而是将数组的最后一个元素。 forEach方法为我们提供了一种标准的循环，同时也保留元素，以便在在范围链中查找。 它符合Array.prototype.forEach，但有两个例外： </p> <p>   </p> <ul> <li> 它会遍历未分配的下标。 这意味着，如果你有一个未定义的值在您的数组中，它仍然会执行该指数的功能，而不是只跳过。 </li> <li> 循环是做了数组本身。 如果使用本地的forEach方法，它遍历数组的一个副本，而不是该数组本身。 这意味着您在基础数组的任何更改都是可见的。 </li> </ul> <p>   </p> <p> 让我们来看看一个例子： </p> <p>   </p> <pre class="js" name="code">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); });</pre>   <p>   </p> <p>   </p> <p> baseArray.forEach方法接受3个参数：要遍历的数组，回调函数（包括如上所述之间分配的，未分配的下标），和一个可选的对象使用的范围。 </p> <p>   </p> <p> 回调函数会传入当前元素对象，当前的下标。 第三个参数是baseArray.forEach范围 ，如果不提供第三个参数则指全局对象（ window在浏览器的情况下）。 让我们来看看在范围参数： </p> <p>   </p> <pre class="js" name="code">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);</pre> <p>   </p> <p>   </p> <p> 这是可能的范围参数中最常用的模式之一：通过this可以在相同的范围内调用回调函数。 这种模式是非常有用的。 </p> <p> <a href="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/looping.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/looping.html">运行示例</a> </p> <p>   </p> <h2> 操纵 </h2> <p> dojo使循环很容易，但往往你会想取得一个数组中的数据，做了一些操作，结果你发现做的操作是作用于一个新的数组中。 比方说，我们有一个字符串数组，我们要与他们的值转换为为对象。 鉴于我们所知道的，我们可能会做一些类似这样的： </p> <p>   </p> <pre class="js" name="code">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" }, ... ]</pre>   <p>   </p> <p> 这不是一个好的解决方案，但它也可以在新版本的JavaScript处理。其中Dojo有： baseArray.map的东西。 让我们一起来看看： </p> <p>   </p> <pre class="js" name="code">var mapped = baseArray.map(original, function(item, index){ return { id: index * 100, text: item }; }); // [ { id: 0, text: "one" }, { id: 100, text: "two" }, ... ]</pre>   <p>   </p> <p> map的参数与forEach是一样 。 不同的是，回调的返回值将存储一个新的阵列。 </p> <p>   </p> <p> 另一个常见的功能是filter 。 filter背后的想法是，你有一个数组，你可能只想基于某种条件选择出它的某些元素。 这可以使用forEach foreach ，但使用的filter有助于大大简化。 </p> <p>   </p> <p> map参数不改变，但filter的返回值已经进行了判断，如果它是truthy，该项目被追加到filter返回的数组。 让我们来看看另一个例子： </p> <p>   </p> <pre class="js" name="code">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" } ]</pre> <p> <a href="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/manipulating.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/manipulating.html"> 运行示例</a> </p> <p>   </p> <h2> 匹配 </h2> <p> 有时候你会想知道，如果一个数组中的元素是否符合一定条件：也许你想知道如果某些对象是否有一个错误信息，或者你想确保所有对象都具有一个文本属性。 这里可以使用some方法了。 every 函数的使用与filter一模一样 （包括回调应该返回什么），但不是返回一个数组，而是返回一个布尔值： every将判断数组中的每一个元素是否符合条件，如果都符合返回true， 对于some来说将判断数组中至少有一个元素符合条件。 下面的例子中，应明确这一点： </p> <p>   </p> <pre class="js" name="code">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</pre>   <p>   </p> <p> 判断这两个函数的一个简单的方法是， every一样使用&&运算符和if语句，而some喜欢使用||运算符 </p> <p> <a href="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/matching.html" target="_blank" title="http://dojotoolkit.org/documentation/tutorials/1.7/arrays/demo/matching.html">运行示例</a> </p> <p>   </p> <h2> 结论 </h2> <p> JavaScript规范已给了我们不少强大的阵列的方法，但不是所有的浏览器和环境支持他们。 Dojo的dojo/_base/array模块可以兼容新的和旧的阵列方法之间的差距，让你可以快速有效地用更少的代码做更多的事。 </p> <p>   </p>
返回
