3.2 Array 對象 · JavaScript 標準參考教程

[TOC] ## 概述 Array是JavaScript的內置對象，同時也是一個構造函數，可以用它生成新的數組。作為構造函數時，Array可以接受參數，但是不同的參數，會使得Array產生不同的行為。 * 無參數時，返回一個空數組。 * 單個參數時，如果該參數是正整數，則這個正整數表示新數組的長度；如果該參數是非正整數（比如字符串、布爾值、對象等），則該值是新數組的成員。 * 多個參數時，這些參數都是新數組的成員。 ~~~ var a1 = new Array(); var a2 = new Array(1); var a3 = new Array('abc'); var a4 = new Array([1]); var a5 = new Array(1,2); a1 // [] a2 // [undefined × 1] a3 // ['abc'] a4 // [Array[1]] a5 // [1, 2] ~~~ 從上面代碼可以看到，Array的構造函數行為很不一致。因此，不建議使用它生成新數組，直接使用數組的字面量是更好的方法。 ## Array對象的靜態方法 ### isArray方法 Array.isArray方法用來判斷一個值是否為數組。它可以彌補typeof運算符的不足。 ~~~ var a = [1,2,3]; typeof a // "object" Array.isArray(a) // true ~~~ 上面代碼表示，typeof運算符只能顯示數組的類型是Object，而Array.isArray方法可以對數組返回true。 ## Array實例的方法以下這些Array實例對象的方法，都是數組實例才能使用。如果不想創建實例，只是想單純調用這些方法，可以寫成 [].method.call(調用對象，參數) 的形式，或者 Array.prototype.method.call(調用對象，參數)的形式。 ### valueOf方法，toString方法 valueOf方法返回數組本身。 ~~~ var a = [1,2,3]; a.valueOf() // [1,2,3] ~~~ toString 方法返回數組的字符串形式。 ~~~ var a = [1,2,3]; a.toString() // "1,2,3" var a = [1,2,3,[4,5,6]]; a.toString() // "1,2,3,4,5,6" ~~~ ### push方法，pop方法 push方法用于在數組的末端添加一個或多個元素，并返回添加后的數組的長度。 ~~~ var a = []; a.push(1) // 1 a.push("a") // 2 a.push(true, {}) // 4 a // [1, "a", true, {}] ~~~ 上面代碼使用push方法，先后往數組中添加了四個成員。如果需要合并兩個數組，可以這樣寫。 ~~~ var a = [1,2,3]; var b = [4,5,6]; Array.prototype.push.apply(a, b) // 或者 a.push.apply(a,b) // 上面兩種寫法等同于 a.push(4,5,6) a // [1, 2, 3, 4, 5, 6] ~~~ push方法還可以用于向對象添加元素，添加后的對象變成“類似數組的”對象，即新加入元素的鍵對應數組的索引，并且對象有一個length屬性。 ~~~ var a = { a: 1 }; [].push.call(a, 2); a // {a:1, 0:2, length: 1} [].push.call(a, [3]); a // {a:1, 0:2, 1:[3], length: 2} ~~~ pop方法用于刪除數組的最后一個元素，并返回該元素。 ~~~ var a = ['a', 'b', 'c']; a.pop() // 'c' a // ['a', 'b'] ~~~ 對空數組使用pop方法，不會報錯，而是返回undefined。 ~~~ [].pop() // undefined ~~~ ### join方法，concat方法 join方法以參數作為分隔符，將所有數組成員組成一個字符串返回。如果不提供參數，默認用逗號分隔。 ~~~ var a = [1,2,3,4]; a.join() // "1,2,3,4" a.join('') // '1234' a.join("|") // "1|2|3|4" ~~~ 通過函數的call方法，join方法（即Array.prototype.join）也可以用于字符串。 ~~~ Array.prototype.join.call('hello', '-') // "h-e-l-l-o" ~~~ concat方法將新數組的成員，添加到原數組的尾部，然后返回一個新數組，常用于連接多個數組。 ~~~ ["hello"].concat(["world"]) // ["hello", "world"] [1,2,3].concat(4,5,6) // [1, 2, 3, 4, 5, 6] ~~~ 上面代碼表明，concat方法的參數可以是一個或多個數組，以及原始類型的值。如果不提供參數，concat方法返回當前數組的一個淺拷貝。所謂“淺拷貝”，指的是如果數組成員包括復合類型的值（比如對象），則新數組拷貝的是該值的引用。 ~~~ var o = {a:1}; var oldArray = [o]; var newArray = oldArray.concat(); o.a = 2; newArray[0].a // 2 ~~~ 上面代碼中，原數組包含一個對象，concat方法生成的新數組包含這個對象的引用。所以，改變原對象以后，新數組跟著改變。事實上，只要原數組的成員中包含對象，concat方法不管有沒有參數，總是返回該對象的引用。 concat方法也可以用于將對象合并為數組，但是必須借助call方法。 ~~~ [].concat.call({ a: 1 }, [2]) // [{a:1}, 2] // 等同于 [2].concat({a:1}) ~~~ ### shift方法，unshift方法 shift方法用于刪除數組的第一個元素，并返回該元素。 ~~~ var a = ['a', 'b', 'c']; a.shift() // 'a' a // ['b', 'c'] ~~~ shift方法可以遍歷并清空一個數組。 ~~~ var list = [1,2,3,4,5,6,7,8,9,10]; var item; while (item = list.shift()) { console.log(item); } list // [] ~~~ unshift方法用于在數組的第一個位置添加元素，并返回添加新元素后的數組長度。 ~~~ var a = ['a', 'b', 'c']; a.unshift('x'); // 4 a // ['x', 'a', 'b', 'c'] ~~~ ### reverse方法 reverse方法用于顛倒數組中元素的順序，使用這個方法以后，返回改變后的原數組。 ~~~ var a = ['a', 'b', 'c']; a.reverse() // ["c", "b", "a"] a // ["c", "b", "a"] ~~~ ### slice方法 slice方法返回指定位置的數組成員組成的新數組，原數組不變。它的第一個參數為起始位置（從0開始），第二個參數為終止位置（但該位置的元素本身不包括在內）。如果省略第二個參數，則一直返回到原數組的最后一個成員。 ~~~ var a = ["a","b","c"]; a.slice(1,2) // ["b"] a.slice(1) // ["b", "c"] a.slice(0) // ["a","b","c"] a.slice(-2) // ["b", "c"] a.slice(4) // [] a.slice(2, 6) // ["c"] a.slice(2, 1) // [] ~~~ 上面代碼表示，如果slice方法的參數是負數，則從尾部開始選擇的成員個數；如果參數值大于數組成員的個數，或者第二個參數小于第一個參數，則返回空數組。 slice方法的一個重要應用，是將類似數組的對象轉為真正的數組。 ~~~ Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }) // ['a', 'b'] Array.prototype.slice.call(document.querySelectorAll("div")); Array.prototype.slice.call(arguments); ~~~ 上面代碼的參數都不是數組，但是通過call方法，在它們上面調用slice方法，就可以把它們轉為真正的數組。 ### splice() splice方法用于刪除元素，并可以在被刪除的位置添加入新的數組元素。它的返回值是被刪除的元素。需要特別注意的是，該方法會改變原數組。 splice的第一個參數是刪除的起始位置，第二個參數是被刪除的元素個數。如果后面還有更多的參數，則表示這些就是要被插入數組的新元素。 ~~~ var a = ["a","b","c","d","e","f"]; a.splice(4,2) // ["e", "f"] a // ["a", "b", "c", "d"] ~~~ 上面代碼從原數組位置4開始，刪除了兩個數組成員。 ~~~ var a = ["a","b","c","d","e","f"]; a.splice(4,2,1,2) // ["e", "f"] a // ["a", "b", "c", "d", 1, 2] ~~~ 上面代碼除了刪除成員，還插入了兩個新成員。如果只是單純地插入元素，splice方法的第二個參數可以設為0。 ~~~ var a = [1,1,1]; a.splice(1,0,2) // [] a // [1, 2, 1, 1] ~~~ 如果只提供第一個參數，則實際上等同于將原數組在指定位置拆分成兩個數組。 ~~~ var a = [1,2,3,4]; a.splice(2) // [3, 4] a // [1, 2] ~~~ ### sort() sort方法對數組元素進行排序，默認是按照字典順序排序。排序后，原數組將被改變。 ~~~ ["d","c","b","a"].sort() // ["a", "b", "c", "d"] [4,3,2,1].sort() // [1, 2, 3, 4] [11,101].sort() // [101, 11] [10111,1101,111].sort() // [10111, 1101, 111] ~~~ 上面代碼的最后兩個例子，需要特殊注意。sort方法不是按照大小排序，而是按照對應字符串的字典順序排序，所以101排在11的前面。如果想讓sort方法按照大小排序，可以傳入一個函數作為參數，表示按照自定義方法進行排序。該函數本身又接受兩個參數，表示進行比較的兩個元素。如果返回值大于0，表示第一個元素排在第二個元素后面；其他情況下，都是第一個元素排在第二個元素前面。 ~~~ [10111,1101,111].sort(function (a,b){ return a-b; }) // [111, 1101, 10111] [ { name: "張三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function(o1, o2) { return o1.age - o2.age; }) // [ // { name: "李四", age: 24 }, // { name: "王五", age: 28 }, // { name: "張三", age: 30 } // ] ~~~ ## ECMAScript 5 新加入的數組方法 ECMAScript 5新增了9個數組實例的方法，分別是map、forEach、filter、every、some、reduce、reduceRight、indexOf和lastIndexOf。其中，前7個與函數式（functional）操作有關。這些方法可以在數組上使用，也可以在字符串和類似數組的對象上使用，這是它們不同于傳統數組方法的一個地方。在用法上，這些方法的參數是一個函數，這個作為參數的函數本身又接受三個參數：數組的當前元素elem、該元素的位置index和整個數組arr（詳見下面的實例）。另外，上下文對象（context）可以作為第二個參數，傳入forEach(), every(), some(), filter(), map()方法，用來綁定函數運行時的上下文。對于不支持這些方法的老式瀏覽器（主要是IE 8及以下版本），可以使用函數庫[es5-shim](https://github.com/kriskowal/es5-shim)，或者[Underscore](http://underscorejs.org/#filter)和[Lo-Dash](http://lodash.com/docs#filter)。 ### map方法，forEach方法 map方法對數組的所有成員依次調用一個函數，根據函數結果返回一個新數組。 ~~~ var numbers = [1, 2, 3]; numbers.map(function(n){ return n+1 }); // [2, 3, 4] numbers // [1, 2, 3] ~~~ 上面代碼中，原數組的成員都加上1，組成一個新數組返回，原數組沒有變化。只要數組的成員可以被索引到，map方法就不會跳過它。 ~~~ var f = function(n){ return n+1 }; [1, undefined, 2].map(f) // [2, NaN, 3] [1, null, 2].map(f) // [2, 1, 3] [1, , 2].map(f) // [2, undefined, 3] ~~~ 上面代碼中，數組的成員分別是undefined、null和空位，map方法都不會跳過它們。 map方法的回調函數依次接受三個參數，分別是當前的數組成員、當前成員的位置和數組本身。 ~~~ [1, 2, 3].map(function(elem, index, arr){ return elem * elem; }); // [1, 4, 9] ~~~ 有時，我們需要對字符串的每個字符進行遍歷。這時可以通過函數的call方法，將map方法用于字符串。 ~~~ var upper = function (x) { return x.toUpperCase() }; [].map.call('abc', upper) // [ 'A', 'B', 'C' ] // 或者 'abc'.split('').map(upper) // [ 'A', 'B', 'C' ] ~~~ 其他類似數組的對象（比如querySelectorAll方法返回DOM節點集合），也可以用上面的方法遍歷。 map方法還可以接受第二個參數，表示回調函數執行時this所指向的對象。數組實例的forEach方法與map方法很相似，也是遍歷數組的所有成員，執行某種操作，但是forEach方法沒有返回值。如果需要有返回值，一般使用map方法，如果只是單純操作數據，一般使用forEach方法。 ~~~ function log(element, index, array) { console.log('[' + index + '] = ' + element); } [2, 5, , 9].forEach(log); // [0] = 2 // [1] = 5 // [3] = 9 ~~~ 從上面代碼可以看到，forEach方法和map方法的參數格式是一樣的，第一個參數都是一個函數。該函數接受三個參數，分別是當前元素、當前元素的位置（從0開始）、整個數組。 forEach方法會跳過數組的空位。 ~~~ var log = function(n){ console.log(n + 1) }; [1, undefined, 2].forEach(log) // 2 // NaN // 3 [1, null, 2].forEach(log) // 2 // 1 // 3 [1, , 2].map(f) // 2 // 3 ~~~ 上面代碼中，forEach方法不會跳過undefined和null，但會跳過空位。 forEach方法也可以接受第二個參數，用來綁定回調函數的this關鍵字。 ~~~ var out = []; [1, 2, 3].map(function(elem, index, arr){ this.push(elem * elem); }, out); out // [1, 4, 9] ~~~ 上面代碼表示，如果提供一個數組作為第二個參數，則函數內部的this關鍵字就指向這個數組。 ### filter方法 filter方法依次對所有數組成員調用一個測試函數，返回結果為true的成員組成一個新數組返回。 ~~~ [1, 2, 3, 4, 5].filter(function (elem){ return (elem > 3); }) // [4,5] ~~~ 上面代碼將大于3的原數組成員，作為一個新數組返回。 filter方法的測試函數可以接受三個參數，第一個參數是當前數組成員的值，這是必需的，后兩個參數是可選的，分別是當前數組成員的位置和整個數組。 ~~~ [1, 2, 3, 4, 5].filter(function(elem, index, arr){ return index % 2 === 0; }); // [1, 3, 5] ~~~ 上面代碼返回原數組偶數位置的成員組成的新數組。 filter方法還可以接受第二個參數，指定測試函數所在的上下文對象（即this對象）。 ~~~ var Obj = function () { this.MAX = 3; }; var myFilter = function(item) { if (item > this.MAX) { return true; } }; var arr = [2,8,3,4,1,3,2,9]; arr.filter(myFilter, new Obj()) // [8, 4, 9] ~~~ 上面代碼中，測試函數myFilter內部有this對象，它可以被filter方法的第二個參數綁定。 ### some方法，every方法這兩個方法類似“斷言”（assert），用來判斷數組成員是否符合某種條件。 some方法對所有元素調用一個測試函數，只要有一個元素通過該測試，就返回true，否則返回false。 ~~~ [1, 2, 3, 4, 5].some(function(elem, index, arr){ return elem >= 3; }); // 返回true ~~~ 上面代碼表示，如果存在大于等于3的數組成員，就返回true。 every方法對所有元素調用一個測試函數，只有所有元素通過該測試，才返回true，否則返回false。 ~~~ [1, 2, 3, 4, 5].every(function(elem, index, arr){ return elem >= 3; }); // 返回false ~~~ 上面代碼表示，只有所有數組成員大于等于3，才返回true。從上面的代碼可以看到，some和every的使用方法與map和forEach是一致的，參數完全一模一樣。也就是說，它們也可以使用第二個參數，用來綁定函數中的this關鍵字。 ### reduce方法，reduceRight方法 reduce方法和reduceRight方法的作用，是依次處理數組的每個元素，最終累計為一個值。這兩個方法的差別在于，reduce對數組元素的處理順序是從左到右（從第一個成員到最后一個成員），reduceRight則是從右到左（從最后一個成員到第一個成員），其他地方完全一樣。 reduce方法的第一個參數是一個處理函數。該函數接受四個參數，分別是： 1. 用來累計的變量（即當前狀態），默認值為0 2. 數組的當前元素 3. 當前元素在數組中的序號（從0開始） 4. 原數組這四個參數之中，只有前兩個是必須的，后兩個則是可選的。 ~~~ [1, 2, 3, 4, 5].reduce(function(x, y){ return x+y; }); // 15 ~~~ 上面代碼的參數x表示累計變量，默認為0，y則是數組的當前元素。reduce方法依次將每個數組元素加入x，最終返回它們的總和15。利用reduce方法，可以寫一個數組求和的sum方法。 ~~~ Array.prototype.sum = function (){ return this.reduce(function (partial, value){ return partial + value; }) }; [3,4,5,6,10].sum() // 28 ~~~ 如果要對累計變量指定初值，可以把它放在reduce方法的第二個參數。 ~~~ [1, 2, 3, 4, 5].reduce(function(x, y){ return x+y; }, 10); // 25 ~~~ 上面代碼指定參數x的初值為10，所以數組元素從10開始累加，最終結果為25。由于reduce方法依次處理每個元素，所以實際上還可以用它來搜索某個元素。比如，下面代碼是找出長度最長的數組元素。 ~~~ function findLongest(entries) { return entries.reduce(function (longest, entry) { return entry.length > longest.length ? entry : longest; }, ''); } ~~~ ### indexOf 和 lastIndexOf ECMAScript 5新增的9個方法之中，有2個與函數式編程無關，分別是indexOf和lastIndexOf。 indexOf方法返回給定元素在數組中第一次出現的位置，如果沒有出現則返回-1。 ~~~ var a = ['a','b','c']; a.indexOf('b') // 1 a.indexOf('y') // -1 ~~~ indexOf方法還可以接受第二個參數，表示搜索的開始位置。 ~~~ ['a','b','c'].indexOf('a', 1) // -1 ~~~ 上面代碼從位置1開始搜索字符a，結果為-1，表示沒有搜索到。 lastIndexOf方法返回給定元素在數組中最后一次出現的位置，如果沒有出現則返回-1。 ~~~ var a = [2, 5, 9, 2]; a.lastIndexOf(2) // 3 a.lastIndexOf(7) // -1 ~~~ 注意，如果數組中包含NaN，這兩個方法不適用。 ~~~ [NaN].indexOf(NaN) // -1 [NaN].lastIndexOf(NaN) // -1 ~~~ 這是因為這兩個方法內部，使用嚴格相等運算符（===）進行比較，而NaN是唯一一個不等于自身的值。 ### 鏈式使用上面這些數組方法之中，有不少返回的還是數組，所以可以鏈式使用。 ~~~ var users = [{name:"tom", email:"tom@example.com"}, {name:"peter", email:"peter@example.com"}]; users .map(function (user){ return user.email; }) .filter(function (email) { return /^t/.test(email); }) .forEach(alert); // 彈出tom@example.com ~~~ ## 參考鏈接 * Nicolas Bevacqua,?[Fun with JavaScript Native Array Functions](http://flippinawesome.org/2013/11/25/fun-with-javascript-native-array-functions/)