初學者指南:深入了解 JavaScript 陣列操作

更新日期: 2024 年 11 月 1 日

在 JavaScript 中,陣列(Array)是一種用來存儲多個值的資料結構。

陣列可以包含各種類型的值,如數字、字串、甚至是其他物件。

對於初學者來說,掌握如何在陣列中新增修改刪除元素,是寫作程式時的基本技能。

在這篇文章中,我們將介紹如何在 JavaScript 陣列中進行這些操作,並通過範例來說明每個步驟。


什麼是陣列?

JavaScript 的陣列是一個可以存放多個值的特殊物件。

這些值可以是任何類型的數據,包括數字、字串、物件,甚至是函數。

陣列中的元素按順序排列,每個元素都有一個唯一的索引(從 0 開始)。

透過這些索引,我們可以對陣列進行操作,如新增、修改或刪除元素。

範例:

let fruits = ["apple", "banana", "cherry"];
console.log(fruits); // 輸出:["apple", "banana", "cherry"]

在這個範例中,fruits 陣列包含了三個字串:"apple""banana""cherry"


如何新增陣列元素

在 JavaScript 中,有多種方式可以向陣列新增元素。

我們可以根據具體需求,選擇最適合的方式。

使用 push() 方法

push() 方法可以將一個或多個元素新增到陣列的末尾

範例:

let fruits = ["apple", "banana"];
fruits.push("cherry");
console.log(fruits); // 輸出:["apple", "banana", "cherry"]

在這裡,"cherry" 被新增到了 fruits 陣列的末尾。

使用 unshift() 方法

unshift() 方法會將一個或多個元素新增到陣列的開頭,並將其他元素向後移動。

範例:

let fruits = ["banana", "cherry"];
fruits.unshift("apple");
console.log(fruits); // 輸出:["apple", "banana", "cherry"]

在這裡,"apple" 被新增到了陣列的開頭,其他元素被依次往後移動。

直接使用索引新增元素

我們還可以直接透過索引來新增元素,這會將元素放置在指定位置,並覆蓋該位置的值(如果已有元素)。

範例:

let fruits = ["apple", "banana"];
fruits[2] = "cherry";
console.log(fruits); // 輸出:["apple", "banana", "cherry"]

在這裡,我們直接在索引 2 處新增了 "cherry"


如何修改陣列中的元素

修改陣列中的元素非常簡單,我們可以使用元素的索引來直接對其進行修改。

使用索引修改元素

通過直接使用索引,我們可以將指定位置的元素替換為新的值。

範例:

let fruits = ["apple", "banana", "cherry"];
fruits[1] = "blueberry";
console.log(fruits); // 輸出:["apple", "blueberry", "cherry"]

在這裡,我們將索引 1 的 "banana" 修改為 "blueberry"


如何刪除陣列中的元素

在 JavaScript 中,可以使用多種方法來刪除陣列中的元素。常見的方法包括 pop()shift()splice()

使用 pop() 方法

pop() 方法會刪除陣列的最後一個元素,並返回被刪除的元素。

範例:

let fruits = ["apple", "banana", "cherry"];
let lastFruit = fruits.pop();
console.log(fruits);    // 輸出:["apple", "banana"]
console.log(lastFruit); // 輸出:"cherry"

在這裡,"cherry" 被刪除了,並且它被返回給變數 lastFruit

使用 shift() 方法

shift() 方法會刪除陣列的第一個元素,並返回被刪除的元素。

範例:

let fruits = ["apple", "banana", "cherry"];
let firstFruit = fruits.shift();
console.log(fruits);    // 輸出:["banana", "cherry"]
console.log(firstFruit); // 輸出:"apple"

在這裡,"apple" 被刪除了,並且它被返回給變數 firstFruit

使用 splice() 方法

splice() 方法可以從陣列的任意位置刪除元素,還可以同時新增新元素。

這是功能非常強大的方法。

範例:

let fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 1); // 從索引 1 開始刪除 1 個元素
console.log(fruits);  // 輸出:["apple", "cherry"]

在這個範例中,我們從索引 1 開始刪除了 1 個元素,也就是 "banana"

使用 delete 關鍵字

雖然可以使用 delete 關鍵字來刪除陣列中的某個元素,但這會留下空洞,而不是調整陣列的長度。因此,這種方法通常不推薦使用。

範例:

let fruits = ["apple", "banana", "cherry"];
delete fruits[1];
console.log(fruits);  // 輸出:["apple", undefined, "cherry"]

在這個範例中,"banana" 被刪除了,但它的索引位置被 undefined 取代,陣列長度不變。


結語

陣列是 JavaScript 中非常重要的資料結構,理解如何操作陣列中的元素是編寫程式碼的基本技能。

本文介紹了如何在陣列中新增、修改和刪除元素,這些方法可以幫助你靈活操作陣列中的數據。

隨著學習的深入,你將發現陣列還有更多強大的功能,可以用來處理大量的資料。

熟練掌握這些操作,將讓你在處理資料時更加得心應手。


參考資料

Similar Posts