JAVA技术
返回
登录/注册
JavaScript中数组对象的那些自带方法
楼主
chongxiao20 于 2013-03-12 20:30:15
JavaScript中数组对象的那些自带方法
[P]JavaScript中数组对象的那些自带方法[/P][P][SIZE=14px]/**[/SIZE][/P][P][SIZE=14px] * 本文纯粹是梳理一下目前W3C标准中Array对象的自带Method。[/SIZE][/P][P][SIZE=14px] * 全文没啥营养，不过最后性能测试的部分，倒是抛出了一些疑问。[/SIZE][/P][P][SIZE=14px] */[/SIZE][/P][P] [/P][P] [/P][P][b][SIZE=medium]赋值方法 （Mutator methods）[/SIZE][/b][/P][P] [/P][P]这些方法直接修改数组自身[/P][P] [/P][P][b]pop 和 push[/b][/P][P][b] [/b][i]Array[/i][i].pop(); // 删除数组最后一个元素，返回被删除的元素[/i][/P][P][i] Array[/i][i].push(element1, ..., elementN); // 在数组尾部插入1-N个元素，返回操作后数组的length[/i][/P][P][i] [/i][/P][P]通过这 pop 和 push ，就能把数组模拟成 堆栈(stack) 来进行操作。[/P][P]堆栈这种数据结构的特点，就是“后进先出”（LIFO, Last In First Out）。[/P][P] [/P][P] [/P][P][b]shift 和 unshift[/b][/P][P] [i]Array[/i][i].shift(); // [/i][i]删除数组第一个元素，返回被删除的元素[/i][/P][P][i] Array[/i][i].unshift(element1, ..., elementN) ; [/i][i]// 在数组头部插入1-N个元素，返回操作后数组的length[/i][/P][P] [/P][P]利用 shift 和 unshift 则可以实现 队列(queue) 的操作。[/P][P]队列的操作方式和堆栈相反，采用“先进先出”（FIFO, First-In-First-Out）。[/P][P] [/P][P] [/P][P][P][b]splice[/b][/P][P][i] Array[/i][i].splice(index , howMany[, element1[, ...[, elementN]]]);[/i][/P][P][/P][P][i] [/i][i]Array[/i][i].splice(index);[/i][/P][P] [/P][P]参数：[/P][P][P] index：规定从何处添加/删除元素。[/P][P] howmany：规定应该删除多少元素。[/P][P] elements：规定要添加到数组的新元素，从 index 所指的下标处开始插入。[/P][P] [/P][P][/P][P]splice方法是对 pop、push、shift、unshift 的一个补充。[/P][P]返回值是被删除的元素。[/P][P] [/P][P] [/P][P][b]reverse[/b][/P][P][i] Array[/i][i].reverse(); // 颠倒数组中元素的顺序，并返回逆序后的数组[/i][/P][P] [/P][P] [/P][P][b]sort[/b][/P][P][i] Array[/i][i].sort([compareFunction]);[/i][/P][P][b] [/b][/P][P]如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序。[/P][P]说得更精确点，是按照字符编码的顺序进行排序。[/P][P] [/P][P][P]如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：[/P][P][ul][li]若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。[/li][li]若 a 等于 b，则返回 0。[/li][li]若 a 大于 b，则返回一个大于 0 的值。[/li][/ul][P] [/P][hr][P] [/P][P][b][SIZE=medium]访问方法（Accessor methods）[/SIZE][/b][/P][P] [/P][P]这些方法只是返回相应的结果，而不会修改数组本身[/P][P] [/P][P] [/P][P][b]concat[/b][/P][P] [i]Array.concat(value1, value2, ..., valueN); // 链接2个或多个数组，并返回合并后的数组[/i][/P][P] [/P][P]但有一个需要注意的地方，用下面的例子说明：[/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [COLOR=rgb(0, 0, 255)]var[/COLOR] arr = [1, 2, 3[COLOR=rgb(0, 0, 0)]];[/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] arr.concat(4, 5); [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return [1, 2, 3, 4, 5][/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] arr.concat([4, 5]); [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return [1, 2, 3, 4, 5][/COLOR][COLOR=rgb(0, 128, 128)]4[/COLOR] arr.concat([4, 5], [6, 7]); [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return [1, 2, 3, 4, 5, 6, 7][/COLOR][COLOR=rgb(0, 128, 128)]5[/COLOR] arr.concat(4, [5, [6, 7]]); [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return [1, 2, 3, 4, 5, [6, 7]][/COLOR][/P][P][/P][P] [/P][P] [/P][P][b]join[/b][/P][P] [i] string = Array.join(separator); [/i][/P][P] [/P][P]把数组中的所有元素放入一个字符串。其中，元素之间是通过指定的分隔符进行分隔的。[/P][P]默认的分隔符是逗号(,)，返回值是合并后字符串。[/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [1, 2, 3].join(); [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return "1,2,3"[/COLOR][/P][P][/P][P]Array.join()方法，实际上是String.splite()的逆向操作。[/P][P] [/P][P] [/P][P][b]slice[/b][/P][P] [i] Array.slice(begin[, end]); // 数组中返回选定的元素[/i][/P][P] [/P][P] [/P][P][b]toString [/b][/P][P] [i] Array.toString(); // 这个就不说了，所有JavaScript都有toString这个方法[/i][/P][P] [/P][P] [/P][P][b]indexOf 和 lastIndexOf *[/b][i][ECMAScript 5][/i][/P][P][i] Array.indexOf(searchElement[, fromIndex]); // 从头开始搜索[/i][/P][P][i] Array.lastIndexOf(searchElement[, fromIndex]); // 从尾开始搜索[/i][/P][P] [/P][P]searchElement：需要搜索的值[/P][P]fromIndex：索引，指示搜索从哪里开始[/P][P] [/P][P] [/P][P] [/P][P][/P][P][/P][P][hr][P][/P][P] [/P][P] [/P][P][P][b][SIZE=medium]迭代方法（Iteration methods）[/SIZE][/b][/P][P] [/P][P][b]forEach [/b][b] *[/b][i][ECMAScript 5][/i][/P][P] [i] Array.forEach(callback[, thisArg]); // 从头到尾遍历一次数组，并为数组中的每个元素，调用指定的函数[/i][/P][P] [/P][P]参数：[/P][P] callback：遍历数组时调用的函数[/P][P] thisArg：指定 callback 的作用域[/P][P] [/P][P]另外，callback会调用三个参数：[/P][P] value：数组元素[/P][P] index：数组索引[/P][P] array：数组本身[/P][P] [/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [1, 2].forEach([COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)](value, index, array) {[/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] [COLOR=rgb(0, 0, 0)] console.log(value, index, array); [/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] [COLOR=rgb(0, 0, 0)]});[/COLOR][COLOR=rgb(0, 128, 128)]4[/COLOR] [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return [/COLOR][COLOR=rgb(0, 128, 128)]5[/COLOR] [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] 1 0 [1, 2][/COLOR][COLOR=rgb(0, 128, 128)]6[/COLOR] [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] 2 1 [1, 2][/COLOR][/P][P] [/P][P][/P][P]Note：forEach是无法通过break来中断数组的遍历。[/P][P]解决方法：利用try方法来抛出异常，终止遍历。[/P][P][P][P][URL=javascript%3avoid(0);]javascript:void(0);[/URL][/P][COLOR=rgb(0, 128, 128)]1[/COLOR] [COLOR=rgb(0, 0, 255)]try[/COLOR][COLOR=rgb(0, 0, 0)] {[/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] [1,2,3].forEach([COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)](val) {[/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] [COLOR=rgb(0, 0, 0)] console.log(val);[/COLOR][COLOR=rgb(0, 128, 128)]4[/COLOR] [COLOR=rgb(0, 0, 255)]throw[/COLOR][COLOR=rgb(0, 0, 0)](e)[/COLOR][COLOR=rgb(0, 128, 128)]5[/COLOR] [COLOR=rgb(0, 0, 0)] });[/COLOR][COLOR=rgb(0, 128, 128)]6[/COLOR] } [COLOR=rgb(0, 0, 255)]catch[/COLOR][COLOR=rgb(0, 0, 0)](e) {[/COLOR][COLOR=rgb(0, 128, 128)]7[/COLOR] [COLOR=rgb(0, 0, 0)] console.log(e);[/COLOR][COLOR=rgb(0, 128, 128)]8[/COLOR] }[P][URL=javascript%3avoid(0);]javascript:void(0);[/URL][/P][P][/P][P][/P][P] [/P][P] [/P][P][P][b]map [/b][b] *[/b][i][ECMAScript 5][/i][/P][P] [i]Array.map(callback[, thisArg]); // 遍历数组元素，调用指定函数，并以数组返回所有结果[/i][/P][P] [/P][P][P]参数：[/P][P] callback：遍历数组时调用的函数[/P][P] thisObject ：指定 callback 的作用域[/P][P][/P][P] [/P][P]例子：[/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [1, 2, 3].map([COLOR=rgb(0, 0, 255)]function[/COLOR](num) { [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return [2, 3, 4][/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] [COLOR=rgb(0, 0, 255)]return[/COLOR] num + 1[COLOR=rgb(0, 0, 0)];[/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] });[/P][P][/P][P] [/P][P] [/P][P][b]filter [/b][b] *[/b][i][ECMAScript 5][/i][/P][P] [i]Array.filter(callback[, thisObject]); // 遍历数组调用方法，满足条件(返回true)的元素，将被添加到返回值的数组中[/i][/P][P] [/P][P][P]参数：[/P][P] callback：遍历数组时调用的函数[/P][P] thisObject ：指定 callback 的作用域[/P][P][/P][P] [/P][P][P]例子：[/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [1, 2, 3].filter([COLOR=rgb(0, 0, 255)]function[/COLOR](num) { [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return [1][/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] [COLOR=rgb(0, 0, 255)]return[/COLOR] num < 2[COLOR=rgb(0, 0, 0)];[/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] });[/P][P] [/P][P][/P][P][/P][P][/P][P][b]every 和 some[/b] [b] *[/b][i][ECMAScript 5][/i][/P][P] [i] Array.every(callback[, thisObject]); // “与”[/i][/P][P] [i] Array.some(callback[, thisObject]); // “或”[/i][/P][P] [/P][P]参数：[/P][P] callback：遍历数组时调用的函数[/P][P] thisObject：指定 callback 的作用域[/P][P] [/P][P]every：当所有元素调用函数都返回true，结果才返回true，不然均返回false。[/P][P]some：当所有元素调用函数都返回false，结果才返回false，不然均返回true。[/P][P]一旦every和some的返回值确定，就会立刻停止遍历。[/P][P] [/P][P][P]例子：[/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [1, 2, 3]. every([COLOR=rgb(0, 0, 255)]function[/COLOR](num) { [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return false[/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] [COLOR=rgb(0, 0, 255)]return[/COLOR] num > 1[COLOR=rgb(0, 0, 0)];[/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] [COLOR=rgb(0, 0, 0)]});[/COLOR][COLOR=rgb(0, 128, 128)]4[/COLOR] [1, 2, 3]. some([COLOR=rgb(0, 0, 255)]function[/COLOR](num) { [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return true[/COLOR][COLOR=rgb(0, 128, 128)]5[/COLOR] [COLOR=rgb(0, 0, 255)]return[/COLOR] num > 2[COLOR=rgb(0, 0, 0)];[/COLOR][COLOR=rgb(0, 128, 128)]6[/COLOR] });[/P][P] [/P][P][/P][P][/P][P][b]reduce 和 reduceRight [/b][b] *[/b][i][ECMAScript 5][/i][/P][P][i] Array.reduce(callback[, initialValue]); // 使用指定的方法将数组元素进行组合，按索引从低到高（从左到右）[/i][/P][P][i] Array.reduceRight(callback[, initialValue]); // 使用指定的方法将数组元素进行组合，按索引从高到低（从右到左）[/i][/P][P] [/P][P]参数：[/P][P] callback：遍历数组时调用的函数[/P][P] initialValue：第一个次调用callback时传入的previousValue[/P][P] [/P][P]另外，callback会调用四个参数：[/P][P] previousValue：到目前为止的操作累积结果[/P][P] currentValue：数组元素[/P][P] index：数组索引[/P][P] array：数组本身[/P][P] [/P][P][P]例子：[/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [1, 2, 3]. reduce([COLOR=rgb(0, 0, 255)]function[/COLOR](x, y) { [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)] return 106[/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] [COLOR=rgb(0, 0, 255)]return[/COLOR] x +[COLOR=rgb(0, 0, 0)] y;[/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] }, 100);[/P][P] [/P][P][/P][P][hr][P][/P][P] [/P][P][P][b][SIZE=medium]性能测试[/SIZE][/b][/P][P][b][SIZE=medium] [/SIZE][/b][/P][P][P]测试系统：Windows 7[/P][P]测试浏览器：Chrome 26.0.1386.0[/P][P][/P][P][/P][P] [/P][P][P][COLOR=rgb(0, 128, 128)]1[/COLOR] [COLOR=rgb(0, 0, 255)]var[/COLOR] arr =[COLOR=rgb(0, 0, 0)] [];[/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] [COLOR=rgb(0, 128, 128)]3[/COLOR] [COLOR=rgb(0, 0, 255)]for[/COLOR]([COLOR=rgb(0, 0, 255)]var[/COLOR] i = 0; i < 999999; i++[COLOR=rgb(0, 0, 0)]) {[/COLOR][COLOR=rgb(0, 128, 128)]4[/COLOR] [COLOR=rgb(0, 0, 0)] arr.push(i);[/COLOR][COLOR=rgb(0, 128, 128)]5[/COLOR] }[/P][P] [/P][P][/P][P][b]forEach[/b][/P][P][P][P][URL=javascript%3avoid(0);]javascript:void(0);[/URL][/P][COLOR=rgb(0, 128, 128)] 1[/COLOR] [COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)] forEachTest() {[/COLOR][COLOR=rgb(0, 128, 128)] 2[/COLOR] howTime("forEach", [COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)]() {[/COLOR][COLOR=rgb(0, 128, 128)] 3[/COLOR] [COLOR=rgb(0, 0, 255)]var[/COLOR] num = 0[COLOR=rgb(0, 0, 0)];[/COLOR][COLOR=rgb(0, 128, 128)] 4[/COLOR] arr.forEach([COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)](val, key) {[/COLOR][COLOR=rgb(0, 128, 128)] 5[/COLOR] num +=[COLOR=rgb(0, 0, 0)] val;[/COLOR][COLOR=rgb(0, 128, 128)] 6[/COLOR] [COLOR=rgb(0, 0, 0)] });[/COLOR][COLOR=rgb(0, 128, 128)] 7[/COLOR] [COLOR=rgb(0, 0, 0)] });[/COLOR][COLOR=rgb(0, 128, 128)] 8[/COLOR] [COLOR=rgb(0, 128, 128)] 9[/COLOR] howTime("for", [COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)]() {[/COLOR][COLOR=rgb(0, 128, 128)]10[/COLOR] [COLOR=rgb(0, 0, 255)]var[/COLOR] num = 0[COLOR=rgb(0, 0, 0)];[/COLOR][COLOR=rgb(0, 128, 128)]11[/COLOR] [COLOR=rgb(0, 0, 255)]for[/COLOR]([COLOR=rgb(0, 0, 255)]var[/COLOR] i = 0, len = arr.length; i < len; i++[COLOR=rgb(0, 0, 0)]) {[/COLOR][COLOR=rgb(0, 128, 128)]12[/COLOR] num +=[COLOR=rgb(0, 0, 0)] arr[i];[/i][/COLOR][i][COLOR=rgb(0, 128, 128)]13[/COLOR] [COLOR=rgb(0, 0, 0)] }[/COLOR][COLOR=rgb(0, 128, 128)]14[/COLOR] [COLOR=rgb(0, 0, 0)] });[/COLOR][COLOR=rgb(0, 128, 128)]15[/COLOR] }[P][URL=javascript%3avoid(0);]javascript:void(0);[/URL][/P][P][/P][P] 下面是随机进行的3次测试结果（具体结果与电脑配置有关，结果越小则性能越好）：[/P][TABLE=transparent,0,0,320px,left,transparent,0,none][b]time_forEach[/b][b]time_for[/b]1421.000ms 64.000ms 1641.000ms 63.000ms 1525.000ms 63.000ms [/TABLE][P] [/P][P] [/P][P] [/P][P] [/P][P]可以看到，Chrome并没有对forEach做专门的优化，和直接用for循环遍历相比，性能还是有很大的差距。[/P][P]因为forEach是 ECMAScript 5 的东西，旧版浏览器并不支持。[/P][P]不过MDN都有给出向下兼容的解决方法：[/P][P][P][URL=javascript%3avoid(0);]javascript:void(0);[/URL][/P][COLOR=rgb(0, 128, 128)]1[/COLOR] [COLOR=rgb(0, 0, 255)]if[/COLOR](![COLOR=rgb(0, 0, 0)]Array.prototype.forEach) {[/COLOR][COLOR=rgb(0, 128, 128)]2[/COLOR] Array.prototype.forEach = [COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)](fn, scope) {[/COLOR][COLOR=rgb(0, 128, 128)]3[/COLOR] [COLOR=rgb(0, 0, 255)]for[/COLOR]([COLOR=rgb(0, 0, 255)]var[/COLOR] i = 0, len = [COLOR=rgb(0, 0, 255)]this[/COLOR].length; i < len; ++[COLOR=rgb(0, 0, 0)]i) {[/COLOR][COLOR=rgb(0, 128, 128)]4[/COLOR] fn.call(scope, [COLOR=rgb(0, 0, 255)]this[/COLOR][i], i, [COLOR=rgb(0, 0, 255)]this[/COLOR][COLOR=rgb(0, 0, 0)]);[/COLOR][COLOR=rgb(0, 128, 128)]5[/COLOR] [COLOR=rgb(0, 0, 0)] }[/COLOR][COLOR=rgb(0, 128, 128)]6[/COLOR] [COLOR=rgb(0, 0, 0)] }[/COLOR][COLOR=rgb(0, 128, 128)]7[/COLOR] }[P][URL=javascript%3avoid(0);]javascript:void(0);[/URL][/P][P][/P][P] [/P][P]离谱的是，原生的 forEach 方法，在性能上，居然比不上自己构造的 forEach！[/P][P]还有，其他Array对象其他的迭代方法呢？[/P][P]大家看看这个Demo就基本清楚了[/P][P][/P][P][/P][P][/P][/i][/i]
回复
1
电脑版
Page created in 0.0234 seconds with 2 queries.