Javascript數組Array方法解讀，javascript數組array

Javascript數組Array方法解讀，javascript數組array

接上一篇《Javascript數組Array基礎介紹》，這一篇詳細介紹Array的所有方法。

所有數組的方法都定義在Array.prototype上,而Array.prototype本身也是一個數組。

array.concat()

淺複製一份當前數組，並把接收到的參數附加到新數組的末尾。原數組不改變。

文法

array.concat(value1, value2, ..., valueN)
參數為需要合并的數組或非數組值

var arr1 = [1, 2, 3];var obj = {animal : 'monkey'};var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);// arr1 [1, 2, 3]// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]obj.animal = 'tiger';// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

可以合并數組或非數組值，但是要注意如果包含對象，對象還是引用原來的對象。

array.join()

返回一個將數組所有元素用分隔字元拼接成的字串，預設分隔符號為逗號。

文法

array.join(seperator)
參數為分割符

var arr1 = [1, 2, 3];var str = arr1.join(); // 1,2,3str = arr1.join('#'); // 1#2#3

當將大量字串片段組裝時，join方法比+元素運算子要快。

利用new Array(3)將產生一個長度為三的空數組，同時結合join()方法，可以實現重複某段字串。

var str = new Array(3).join('-+'); // -+-+

重複的次數就是數組長度減一，因為字串是分隔字元。

由於數組本身是對象，擁有toString()方法，利用它也能實現將數組拼接成一個字串，只不過分隔字元只能是逗號了。

var arr1 = [1, 2, 3];arr1.toString(); // 1,2,3

實際上它會先調用每一個元素的toString()方法。

array.push()

把一個或多個參數附加在數組末尾，返回數組長度。改變數組自身。

文法

array.push(value1, value2, ..., valueN);
執行個體

var arr1 = [1, 2, 3];var len = arr1.push(4, 5);console.log(len); // 5console.log(arr1); // [1, 2, 3, 4, 5]

另一種方法也可以實現在數組末尾插入值。

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  array.pop()

將數組最後一項刪除，並返回刪除項。改變數組自身。

var arr1 = [1, 2, 3];arr.pop(); // [1, 2] 返回 3

如果數組為空白，返回undefined。

array.unshift()

把一個或多個參數插入到數組頭部，返回數組長度。改變數組自身。

var arr1 = [1, 2, 3];var len = arr1.unshift(4, 5);console.log(len); // 5console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

將數組的第一項刪除，並返回刪除項。改變數組自身。

var arr1 = [1, 2, 3];arr.shift(); // [2, 3] 返回 1

如果數組為空白，返回undefined。

array.sort()

這個方法按照每個元素的toString()方法返回的值進行排序，所以一般得不到期望的結果。

var arr1 = [1, 2, 3, 14, 24];arr1.sort(); // [1, 14, 2, 24, 3]

但是sort()方法可以接收一個我們自訂的函數進行比較。比較函數接受兩個參數，尤其sort()預設是升序，所以如果想讓第一個參數位於第二個參數前面就要返回負數，相等返回0，位於後面返回正數。

var compare = function(a, b){  return a - b;}var arr2 = [1, 12, 2, 23, 3 , 5, 4];arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

比較字串可以結合string.localeCompare()方法來用。

var arr3 = ['F', 'e', 'f', 'E'];arr3.sort(function(a, b){  return a.localeCompare(b);});// ['e', 'E', 'f', 'F'] 

array.reverse()

反轉數組元素順序，返回數組自身。

var arr1 = [1, 4, 3, 2];arr1.reverse(); // [2, 3, 4, 1]

array.slice()

對數組淺複製其中的一段，不改變數組自身。

array.slice(start, end);
方法接受兩個參數，最後一個可以省略，預設是數組自身長度。

var arr1 = [1, 2, 3, 4, 5, 6];arr1.slice(4); // [5, 6]arr1.slice(2, 4); // [3, 4]arr1.slice(-3); // [4, 5, 6]

如果傳入負數，那麼會被自動加上數組的長度，試圖變成非負數。
傳入一個絕對值小於數組長度的值，就是從後向前取負數絕對值個數的元素。例如例子中取了後三個元素。

array.splice()

這是數組中最強大也最常用對的方法了，可以實現刪除，插入，替換。

文法

array.slice(start, count, item);
該方法移除一個或多個元素，並用新的元素替代他們。start是開始的位置，count是刪除的數量，item是新增加的元素（item不止一個，也可省略)，以數組形式返回刪除的元素。

var arr1 = [1, 2, 3, 4, 5];//刪除arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]//插入arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]//替換arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

下面介紹一些ECMAScript5新增的方法，主要是ie8不支援。

indexOf() 與 lastIndexOf()

尋找對應項在數組中的索引位置，第二個參數表示對應尋找方向的起始位置，返回第一個匹配的位置，如果沒有找到則返回-1;
indexOf()是從前往後尋找，lastIndexOf()是從後往前尋找。

var arr1 = [1, 2, 3, 4, 3, 2, 1];arr1.indexOf(2); // 1arr1.indexOf(2, 3); // 5arr1.lastIndexOf(3); // 4arr1.lastIndexOf(3, 4) // 2

迭代方法

以下方法接受兩個參數，第一個是每一項啟動並執行函數，第二個函數啟動並執行範圍。
運行函數有三個參數，分別是當前項，位置，數組本身。

array.every()

運行給定函數，如果迭代每一項都返回true,則最終返回true。

var arr1 = [1, 2, 3, 4, 5];arr1.every(function(item, index, array){  return item > 3;});// false

array.some()

運行給定函數，如果迭代中有一項返回true,則最終返回true。

arr1.some(function(item, index, array){  return item > 3;});// true

array.map()

運行給定函數，將迭代中返回的值組成數組，返回該數組。

arr1.map(function(item, index, array){  return item * 2;});// [2, 4, 6, 8, 10]

array.filter()

運行給定函數，將迭代中返回true的元素以數組形式返回

arr1.filter(function(item, index, array){  return item > 3;});// [4, 5]

array.forEach()

運行給定函數，不返回任何值。類似於普通的for迴圈的功能。

歸併方法

函數接受兩個參數，第一個參數是每一個啟動並執行自訂函數，第二項是作為歸併基礎的初始值。
自訂函數接受四個參數，分別是前一項，當前項，位置，數組。

array.reduce() 與 array.reduceRight()var splitstr = function(prev, item, index, array){  return prev + '#' + item;}var arr1 = [1, 2, 3, 4, 5];arr1.reduce(splitstr, 8); // 8#1#2#3#4#5arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小結

這一篇介紹了數組方法的種種細節和注意問題，下一篇將會介紹數組更進階的用法。本篇後續會添加ECMAScript6 新增加的數組方法的介紹。

您可能感興趣的文章:

• js中數組Array的一些常用方法總結
• 以JSON形式將JS中Array對象數組傳至背景方法
• JS 操作Array數組的方法及屬性執行個體解析
• js使用Array.prototype.sort()對數組對象排序的方法