跳轉到內容

JavaScript/陣列

來自華夏公益教科書




在 JavaScript 中,陣列是一個物件,您可以在其中儲存一組值,並使用單個變數名稱來引用它們。到目前為止,這與許多其他語言相同。但也有區別。

  • 這些值不必是相同的資料型別。您可以將您想要的一切放入陣列,並在稍後處理資料型別。(但也有 型別化陣列,其中所有值都具有相同的資料型別。)
  • 建立陣列時,您不需要宣告大小 - 但您可以。陣列會自動增長。這使得陣列非常方便使用,但不適合數值分析中的應用程式。
  • 由於陣列是物件,因此它們具有可以隨意呼叫的方法和屬性。例如,.length 屬性表示陣列中當前有多少個元素。如果您向陣列中新增更多元素,.length 的值會變大。
  • 元素計數從 0 開始,這意味著,例如,第 5 個元素位於 [4] 中。

(提示:使用陣列時,您應該始終使用帶非負整數的方括號表示法,例如 arr[3] = 42;。從技術上講,使用點表示法也是可以的,但這會 - 至少對於初學者 - 導致意想不到的行為。)

建立陣列

[編輯 | 編輯原始碼]

首先,與所有物件一樣,有一個建構函式。

"use strict";

const arr_1 = new Array(); // empty array
alert(arr_1.length);
const arr_2 = new Array(0, 2, 4); // 3 elements
alert(arr_2);

接下來,JavaScript 語法在建立或使用陣列時支援方括號。

"use strict";

const arr_1 = []; // empty array
alert(arr_1.length);
const arr_2 = [0, 2, 4]; // 3 elements
alert(arr_2);

您可以在宣告陣列時預先定義其大小。

"use strict";

const arr_3 = new Array(50); // 50 elements
alert(arr_3.length);

訪問陣列元素

[編輯 | 編輯原始碼]

使用常用的方括號表示法訪問陣列元素進行讀寫。

"use strict";

const arr_4 = [0, 2, 4, 6, 8];
alert(arr_4[3]);  // 6
arr_4[0] = 9;
alert(arr_4); // 9, 2, 4, 6, 8

當您訪問陣列實際長度之外的元素時,陣列的大小會增長,並且會建立新元素。

"use strict";

const arr_5 = [0, 2, 4, 6, 8];
arr_5[10] = 9;
alert(arr_5); // 0,2,4,6,8,,,,,,9
alert(arr_5.length); // 11

不同資料型別

[編輯 | 編輯原始碼]

您可以在陣列中儲存不同資料型別的值。

"use strict";

const arr_6 = [0, "two", 4]; // number and string
console.log(arr_6);        // [0, "two", 4]

// and even values of data type 'array' can be stored
const arr_7 = [10, 11];
arr_7[2] = arr_6;          // array in array
console.log(arr_7);        // [10, 11, [0, "two", 4]]
console.log(arr_7.length); // 3

巢狀陣列

[編輯 | 編輯原始碼]

如前所述,陣列元素可能是陣列(它本身可能包含型別為陣列的元素(它本身可能包含...))。這可能在執行時或初始化期間發生。要直接訪問較低級別,您必須根據需要指定儘可能多的方括號對 [] 來到達該級別。

"use strict";

const arr_8 = [ [0, 1], [10, 11, 12, 13], [20, 21] ];
console.log(arr_8[2]);    // one level goes to an array of numbers: [20, 21]
console.log(arr_8[1][1]); // two levels go to a number: 11

// same with assignments ...
arr_8[2][0] = "twenty";
console.log(arr_8[2]); // ["twenty", 21]

... 以及更復雜的情況

"use strict";

const arr_9 = []; // empty
arr_9[0] = [];
arr_9[0][0] = [];
arr_9[0][0][2] = "Hallo world!";
console.log(arr_9);  // [[[undefined, undefined, "Hallo world!"]]]

arr_9[2] = "Third element of first level";
console.log(arr_9);
// [[[undefined, undefined, "Hallo world!"]], undefined, "Third element of first level"]

屬性和方法

[編輯 | 編輯原始碼]

length 是每個陣列的屬性(它不是方法)。它表示該陣列中的元素數量。

alert([0, 1, 2].length);  // 3

請注意,陣列索引是從零開始的。因此,陣列的長度比最後一個索引大。

concat 方法返回兩個或多個數組的組合。要使用它,首先,您需要兩個或多個要組合的陣列。

const arr1 = ["a","b","c"];
const arr2 = ["d","e","f"];

然後,建立一個第三個陣列,並將它的值設定為 arr1.concat(arr2)

const arr3 = arr1.concat(arr2); //arr3 now is: ["a","b","c","d","e","f"]

請注意,在本示例中,新的 arr3 陣列包含 arr1 陣列和 arr2 陣列的內容。

joinsplit

[編輯 | 編輯原始碼]

join 方法返回一個包含陣列所有元素的單個字串 - 由指定的分隔符隔開。如果未指定分隔符,則將其設定為逗號。

還有一個 split 方法,它執行與 join 相反的操作:它對字串進行操作,根據指定的分隔符將其劃分為元素,並返回包含這些元素的陣列。(提示:split字串資料型別的方法,而不是陣列的方法。)

要使用 join,首先建立一個數組。

const abc = ["a", "b", "c"];

然後,建立一個新變數,並將其賦值為 abc.join()

const a = abc.join();  // "a,b,c"

您也可以使用專用的分隔符。

// use 'semicolon' plus 'space' as delimiter
const b = abc.join("; ");  // "a; b; c"

使用字串的 split 方法將其轉換回陣列。

const a2 = a.split(",");  // ["a", "b", "c"]
const b2 = b.split("; "); // ["a", "b", "c"]

push 方法將一個或多個元素新增到陣列的末尾,並返回陣列的新長度。

"use strict";
const arr = [0, 1, 2, 3];

alert(arr);                // 0, 1, 2, 3
const len = arr.push(100);
alert(len);                // 5
alert(arr);                // 0, 1, 2, 3, 100

pop 方法刪除陣列的最後一個元素,並返回該元素。

"use strict";
const arr = [0, 1, 2, 3];

alert(arr);                // 0, 1, 2, 3
const elem = arr.pop();
alert(elem);               // 3
alert(arr);                // 0, 1, 2

pushpop 在陣列的末尾起作用;它們互為逆運算。

unshift 方法將一個或多個新元素新增到陣列的開頭,並返回陣列的新長度。它的工作原理是將每個舊元素從其舊索引 移到 ,將新元素新增到索引 ,並採用陣列的 length 屬性。它類似於 push,但在陣列的開頭起作用。

"use strict";
const arr = [0, 1, 2, 3];

alert(arr);                // 0, 1, 2, 3
const len = arr.unshift(100);
alert(len);                // 5
alert(arr);                // 100, 0, 1, 2, 3

shift 方法移除陣列的第一個元素並返回被移除的元素。它的工作原理是將每個舊元素從其舊索引 “移位” 到 ,採用陣列的 length 屬性,並返回舊的第一個元素。它類似於 pop,但在陣列的開頭工作。

"use strict";
const arr = [0, 1, 2, 3];

alert(arr);                // 0, 1, 2, 3
const elem = arr.shift();
alert(elem);               // 0
alert(arr);                // 1, 2, 3

unshiftshift 在陣列的開頭工作;它們的作用相反。

... 在另一個頁面上可用(點選這裡)。

另請參閱

[編輯 | 編輯原始碼]
華夏公益教科書