Yakim shu Hi, 這是我擴充腦內海馬體的地方。

【筆記】Javascript大全 - 05(一) 陣列

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長度永遠大於陣列最高索引數,所以為了保持這個不變式,陣列會自動做以下行為:

var a = [1,2,3];
a[100] = 0;
a.length // 101
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迴圈。 但假設陣列是稀疏的,或你想要排除nullundefined,預想測試陣列的有效性,你可以這樣寫:

// 欲把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中定義了數個實用的陣列操作函式,這代表他們是任何陣列都可以使用的方法,以下列出幾種:


.join( )

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('-'); // "---------"

.reverse( )

※ 在原本陣列上進行,並不會重新創建一個新陣列
Array.reverse( )會倒轉陣列元素的順序,並回傳結果

var a = [1,2,3];
a.reverse(); // a → [3, 2, 1]

.sort( )

※ 在原本陣列上進行,並不會重新創建一個新陣列
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”前面,所以當遇到數字元素的比較時,我們可以使用傳入函式的方式:

var a = [5,3,1];
a.sort(function(a,b) {
  return a-b; // 大於0,排序變b、a
});

a // [1,3,5]

.concat( )

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]]

.slice( )

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]

.splice( )

※ 在原本陣列上進行,並不會重新創建一個新陣列
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]

.push( ) 與 .pop( )

※ 在原本陣列上進行,並不會重新創建一個新陣列
Array.push( ) & Array.pop( ) 會把陣列當作堆疊(stacks)用。

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]

.unshift( ) 與 .shift( )

※ 在原本陣列上進行,並不會重新創建一個新陣列
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]

.toString( )

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"

.toLocaleString( )

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大全(第六版)