Javascript陣列是一種特殊型式的物件,陣列(array)是一組有序的值,其中的值稱為元素,其索引是為整數的特性名稱。這篇也會提到陣列的操作方法。
如果一組陣列字面值有多個逗號,逗號間又沒有值,這個陣列是稀疏的。
值被省略的陣列元素並不存在,查用會得到undefined
var A = [1,,3];
var B = [,,];
A[1] // undefined
A.length; // 3
B.length; //2 → 陣列允許額外的尾端逗號,所以length值是2,不是3
陣列特殊之處,當特性名稱是小於 2的32次方的非負整數(即特性索引),陣列會自動補上length
值
分別 陣列索引 與 特性名稱:
var a = [1, 2, 3]; // a.length → 3
a["10"] = 0; // 索引 a.length → 11
a[-100] = 0; // 名稱 a.length → 11 (不會變)
length
長度永遠大於陣列最高索引數,所以為了保持這個不變式,陣列會自動做以下行為:
a[i] = x
,如果i 大於a.length
,length
會被設為i+1var a = [1,2,3];
a[100] = 0;
a.length // 101
length
設為 i,並且小於目前值,length
會把大於a[i]的值刪掉var a = [1,2,3,4,5];
a.length = 3; // a → [1,2,3]
a.length = 0; // a → []
a.length = 5; // a → [,,,,] (長度為5,但沒有元素)
在ES5後,可以用
Object.defineProperty()
把陣列的length
值設為唯獨。
var a = [];
// 新增
a[0] = "zero";
a[1] = "one"; // a → ["zero", "one"]
// 刪除
delete a[1]; // a → ["zero", undefined];
a.length; // 2 (注意:刪除一陣列元素相似於指定undefined給該元素,length並不會改變)
逐一查用陣列元素最常用的就是使用for迴圈。
但假設陣列是稀疏的,或你想要排除null
、undefined
,預想測試陣列的有效性,你可以這樣寫:
// 欲把a(稀疏陣列)中的可用元素複製到b
var a = [1, 2, undefined, null, 3, 4, 5, , ,];
var b = [];
// if裡的條件式視篩選的性質而定
for(var i=key=0; i<a.length; i++){
if (!a[i]) continue; // 如果該元素為null、undefined、空元素就跳過!
b[key] = a[i];
key++;
}
a // [1, 2, undefined, null, 3, 4, 5, undefined, undefined]
b // [1, 2, 3, 4, 5]
Array.prototype
中定義了數個實用的陣列操作函式,這代表他們是任何陣列都可以使用的方法,以下列出幾種:
Array.join( )
把所有元素轉成字串,串接回傳結果字串(預設用逗號分割)。
var a = [1, 2, 3];
a.join(); // "1,2,3"
a.join(" "); // "1 2 3"
a.join(""); // "123"
var b = new Array(10);
b.join('-'); // "---------"
※ 在原本陣列上進行,並不會重新創建一個新陣列
Array.reverse( )
會倒轉陣列元素的順序,並回傳結果
var a = [1,2,3];
a.reverse(); // a → [3, 2, 1]
※ 在原本陣列上進行,並不會重新創建一個新陣列
Array.reverse( )
會以兩種方式重新排列陣列的元素順序
var a = ["banana", "orange", "apple"];
a.sort(); // a → ["apple", "banana", "orange"]
注意,用
.sort( )
來排序數字可能會遇到一個問題,請看以下範例
var a = [10,2,1,3,5];
a.sort(); // a會變成什麼呢??
我們會預期 a 應該要要是 [1, 2, 3, 5, 10],但如果照範例實做一次,會發現回傳的是 [1, 10, 2, 3, 5]
那是因為數字會被轉換成字串,在Unicode順序中”10”在”2”前面,所以當遇到數字元素的比較時,我們可以使用傳入函式的方式:
function(a,b)
var a = [5,3,1];
a.sort(function(a,b) {
return a-b; // 大於0,排序變b、a
});
a // [1,3,5]
Array.concat( )
會把引數值加入並回傳一個新陣列
如果引數值有陣列,那就串接陣列元素而非陣列本身
var a = [1,2,3];
var b = a.concat(4,5); // [1, 2, 3, 4, 5]
var c = a.concat([4,5]); // [1, 2, 3, 4, 5]
var d = a.concat([4,5],[6,7]); // [1, 2, 3, 4, 5, 6, 7]
var e = a.concat(4,[5,[6,7]]); // [1, 2, 3, 4, 5, [6, 7]]
Array.slice( )
會回傳擷取出的元素
a.slice(1); // [2,3]
// 序:0,1,2
// ↓
var a = [1,2,3];
var a = [1,2,3,4,5];
a.slice(1,4); // [2,3,4]
a.slice(1,-1); // [2,3,4]
a.slice(-3,-2); // [3]
※ 在原本陣列上進行,並不會重新創建一個新陣列
Array.splice( )
與 slice( )
名稱很像,但其作用是大不相同
他會回傳擷取出的元素,也可以在指定位置插入新元素,有三個參數可以填:
var a = [1,2,3,4,5];
a.splice(3); // 回傳:[4, 5] , a:[1, 2, 3]
a.splice(1, 1); // 回傳:[2] , a:[1, 3]
a.splice(1, 0, 'a', 'b'); // 回傳:[] , a:[1, "a", "b", 3]
※ 在原本陣列上進行,並不會重新創建一個新陣列
Array.push( )
& Array.pop( )
會把陣列當作堆疊(stacks)用。
.push( )
會在陣列尾端加一個或多個元素,並回傳新陣列長度.pop( )
則是刪除陣列最後一個元素,並回傳他移除的值。var a = [];
var b = a.push(1,2,3,4); // b:4
a.push(5); // 回傳:5 , a:[1, 2, 3, 4, 5]
a.pop(); // 回傳:5 , a:[1, 2, 3, 4]
a.push(5, [456,789]); // 回傳:6 , a:[1, 2, 3, 4, 5, [456, 789]]
a.pop(); // 回傳:[456, 789] , a:[1, 2, 3, 4, 5]
※ 在原本陣列上進行,並不會重新創建一個新陣列
Array.unshift( )
& Array.shift( )
行為非常類似.push( )
& .pop( )
,不過是從陣列開頭插入或刪除。
var a = [];
var b = a.unshift(1,2,3,4); // b:4
a.unshift(5); // 回傳:5 , a:[5, 1, 2, 3, 4]
a.shift(); // 回傳:5 , a:[1, 2, 3, 4]
a.unshift([6,7], 8); // 回傳:6 , a:[[6,7], 8, 1, 2, 3, 4]
a.shift(); // 回傳:[6,7] , a:[8, 1, 2, 3, 4]
Array.toString( )
把陣列元素轉成字串,用逗號分隔輸出一字串
※ Array.join( )
不帶引數時,也會傳回一樣的結果
var a = [];
["a", "b", "c"].toString(); // "a,b,c"
[1, [2, 3], 4].toString(); // "1,2,3,4"
["a", "b", "c"].join(); // "a,b,c"
[1, [2, 3], 4].join(); // "1,2,3,4"
Array.toLicaleString( )
是toString( )
的本地化
簡單來說就是翻譯成各國的表示方法,詳細方法可以看
MDN的文檔說明
var num = 123456.789;
num.toLocaleString("en-IN");
// "123,456.789"
num.toLocaleString("zh-Hans-CN-u-nu-hanidec");
// "一二三,四五六.七八九"
num.toLocaleString("ja-JP", {style: "currency", currency: "JPY"});
// "¥123,457"
資料來源:
JavaScript大全(第六版)