陣列 在

關於 陣列

在 JavaScript 中，陣列是一種類似清單的結構，長度並不固定，可以存放任何型別的基本值或物件，甚至混合不同型別。 它帶有length屬性，還有許多實用的方法，可用來走訪與修改陣列。

要建立陣列，把元素放在方括號[]之間即可。 要從陣列讀取資料，把索引放在識別碼後面的方括號[]中。陣列的索引從零開始。

例如：

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura

也可以使用建構子語法建立陣列，但大多數用途建議使用陣列實字語法。

const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');

names[1];
// => Laura

陣列不能使用strings當作元素的索引，必須使用整數（number）。 以非整數透過方括號表示法（或點表示法）設定或存取時，並不會設定或取出陣列清單本身的元素，而是設定或存取與該陣列之物件屬性集合相關的變數。 陣列的物件屬性和陣列元素的清單是分開的，陣列的走訪與修改操作無法套用到這些具名屬性。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4

// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.

names.magician = 'Elyse';
names.length;
// => 4

// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.

names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]

// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.

names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan

從陣列刪除項目

JavaScript 中的陣列是普通的objects，可以使用delete關鍵字刪除項目。 不過，這不會改變陣列的_length_，而且會留下empty的空洞。 在其他語言中，這類似於稀疏陣列。 使用走訪或修改操作時，empty空洞會被略過。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];

names;
// =>  ["Jack", empty, "Paul", "Megan"]

names.length;
// => 4

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

如果不希望留下空洞，而且希望length能反映會被走訪或修改的項目數量，請改用splice。

splice() 方法會移除或取代現有元素及／或就地新增元素，藉此改變陣列的內容。¹

例如：

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);

names;
// =>  ["Jack", "Paul", "Megan"]

names.length;
// => 3

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

陣列長度可以被修改

陣列的length屬性與陣列所持有的項目清單相連。 它可以被修改。 當長度增加時，會產生empty空洞，走訪或修改陣列時不會列入考慮。 當長度減少時，會_移除_陣列末尾的元素。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;

names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]

names.length = 2;
// =>  ["Jack", "Laura"]

檢查某個東西是不是陣列

因為陣列是objects，所以typeof names會得到"object"。 要檢查某個東西是不是陣列，請使用Array.isArray：

const names = ['Jack', 'Laura', 'Paul', 'Megan'];

typeof names;
// => "object"

Array.isArray(names);
// => true

const object = {};
Array.isArray(object);
// => false

你可能會想用names instanceof Array，這在某些情況下可行，但並非所有情況都適用。 更多資訊請參閱這篇文章。

陣列方法

每個陣列物件都有一些方法可用來在陣列中新增或移除元素。 以下是其中幾個：

push

push()方法會將一個或多個元素加到陣列的末尾，並回傳陣列的新長度。²

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']

pop

pop()方法會移除陣列的最後一個元素並回傳該元素。 這個方法會改變陣列的長度。³

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']

shift

shift()方法會移除陣列的第一個元素並回傳被移除的元素。 這個方法會改變陣列的長度。⁴

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']

unshift

unshift() 方法會將一個或多個元素加到陣列的開頭，並回傳陣列的新長度。⁵

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']

splice

splice() 方法會移除或取代現有元素及／或就地新增元素，藉此改變陣列的內容。 這個方法會回傳一個包含被刪除元素的陣列。¹

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']

---

1. splice，MDN。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice（參考於 2021 年 9 月 29 日） ↩

2. push，MDN。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push（參考於 2021 年 9 月 29 日） ↩

3. pop，MDN。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop（參考於 2021 年 9 月 29 日） ↩

4. shift，MDN。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift（參考於 2021 年 9 月 29 日） ↩

5. unshift，MDN。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift（參考於 2021 年 9 月 29 日） ↩