首頁 > web前端 > js教程 > Javascript數組Array方法解讀_基礎知識

Javascript數組Array方法解讀_基礎知識

WBOY
發布: 2016-05-16 15:10:48
原創
1277 人瀏覽過

接上一篇《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,3
str = 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); // 5
console.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); // 5
console.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); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.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#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

登入後複製

小结

这一篇介绍了数组方法的种种细节和注意问题,下一篇将会介绍数组更高级的用法。本篇后续会添加ECMAScript6 新增加的数组方法的介绍。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板