JS-5: 陣列全解析

陣列

陣列是為了儲存一筆連續的資料而宣告的。假如我今天有五個學生的成績，一一宣告成變數儲存不是一個好方法，在做資料處理時也不方便。這時如果我們宣告一個陣列運來儲存這些資料，一切都變得方便許多。

let grades = [60,70,80,90,100]; //宣告一個儲存5個數字型別的grades陣列

for(let i=0; i<5; i++)
{
  console.log(i+1,grades[i]);
}
/* 輸出
1 60
2 70
3 80
4 90
5 100
*/

• 從上面的程式碼中，我們可以學到陣列搭配迴圈讓我們很方便的輸出資料，而其中我們注意到，如果要存取陣列中的數值時，我們可以使用grade[索引值]來存取，很明顯地，你能看出陣列第一個數值的索引值為0，陣列第五個數值的索引值為4
• 另外，我們可以使用for-of 迴圈輕鬆地遍歷可迭代對象（如陣列、字串）。

let grades = [60,70,80,90,100]; //宣告一個儲存5個數字型別的grades陣列

for(let grade of grades)
{
  console.log(grade);
}
/* 輸出
60
70
80
90
100
*/

我們可以透過索引值來存取或修改陣列中的值。

let fruits = ["apple", "banana", "cherry"];
fruits[1] = "blueberry"; // 修改第二個元素
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "blueberry"
console.log(fruits[3]);  // "undefined"
fruits[3] = "papaya";  //透過為不存在的索引分配值來向陣列添加新元素，雖然合法，不過並不建議這樣做。
console.log(fruits[3]);  // "papaya"

上面程式碼中，委們透過為不存在的索引分配值來向陣列添加新元素，雖然合法，不過並不建議這樣做，因為如果你提供的索引超出太多，會導致前面被跳過索引處的數值未定義，導致不可預期的結果。

接下來，我要介紹一些常用的陣列操作方法，讓我們更方便也更安全的對陣列進行操作。

let fruits = ["apple", "banana", "cherry"];
fruits.push("date");     // 在尾部新增元素
fruits.unshift("kiwi");  // 在頭部新增元素
console.log(fruits);
fruits.pop();    // 刪除尾部元素
fruits.shift();  // 刪除頭部元素
delete fruits[1]; // 刪除指定索引的元素，位置保留為 `undefined`
for(let i of fruits) {
    console.log(i);
}
/* 主控台輸出
[ 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
apple
undefined
cherry
*/

另外，你也可以一次新增多個元素至陣列:

let arr = ['a', 'b', 'c'];
arr.unshift('x', 'y');
arr.pop();
arr.push('c', 'z');
console.log(arr);  // 輸出: [ 'x', 'y', 'a', 'b', 'c', 'z' ]

當然，一些你之前學過的屬性與方法也能應用在陣列上，以下示範:

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5
console.log(numbers.indexOf(3)); // 2

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3));  // true
console.log(arr.includes(3, 3));  // false

二維陣列

接著我們講講二維陣列。

你可以將其視為置物櫃，要訪問二維陣列中的數值，會需要兩個索引，一個用於列，一個用於行。以下示範:

let numbers = [
    [1, 2, 3, 4, 5],
    ['a', 'b', 'c', 'd', 'e']
];
console.log(numbers[0][4]); // 5 (第一列的第5行)
console.log(numbers[1][2]); // 'c' (第二列的第3行)

• 陣列中的值可以是不同資料型態，也就是說陣列中的值可以是任何型別（字串、數字、物件、函數等）。

Array destructuring

好，接著我們講一個重要的觀念，(Array destructuring)，它允許你從陣列中以更簡潔的方式提取數值。意即允許我們輕鬆地將陣列中的值解構並賦值到變數中。這種方式讓代碼更簡潔且易於閱讀。

語法:

const [var1, var2, ...rest] = array;

範例:

const fruits = ["apple", "banana", "cherry"];
const [first, second, third] = fruits;

console.log(first);  // "apple"
console.log(second); // "banana"
console.log(third);  // "cherry"

如果只需要部分值，可以使用逗號來跳過陣列的某些元素。

const fruits = ["apple", "banana", "cherry", "date"];
const [first, , third] = fruits;

console.log(first);  // "apple"
console.log(third);  // "cherry"

當陣列中某些值為 undefined 或缺少時，可以設置預設值。

const colors = ["red"];
const [primary, secondary = "blue"] = colors;

console.log(primary);   // "red"
console.log(secondary); // "blue" （預設值）

使用展開運算符 ... 收集剩餘的元素到另一個陣列中。

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

處理多層陣列時可以使用嵌套的解構賦值。

const matrix = [[1, 2], [3, 4]];
const [[a, b], [c, d]] = matrix;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

解構賦值應用於函式的返回值。

function getCoordinates() {
    return [10, 20];
}

const [x, y] = getCoordinates();
console.log(x); // 10
console.log(y); // 20

陣列方法

好，接著我們再介紹幾種陣列方法。

splice() ，它允許你從陣列中的任何位置添加或刪除元素。splice()方法將會返回陣列中被刪除數字的陣列，如果沒有刪除任何內容，將返回空陣列。另外，此方法會直接修改到原陣列，需要注意。

語法:

array.splice(startIndex, deleteCount, item1, item2, ...);

• startIndex: 操作開始的位置（基於索引）。
• deleteCount: 要刪除的元素數量。如果為 0，則不刪除任何元素。
• item1, item2, ...: 要插入的元素（可選）。

(1) 刪除元素

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

(2) 新增元素

const fruits = ["apple", "date"];
fruits.splice(1, 0, "banana", "cherry"); // 在索引 1 處插入新元素
console.log(fruits); // ["apple", "banana", "cherry", "date"]

(3) 替換元素

const fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 1, "blueberry"); // 在索引 1 替換 1 個元素
console.log(fruits); // ["apple", "blueberry", "cherry"]

split()， 用於將字串分割成陣列的字串方法。

語法:

string.split(separator, limit);

• separator: 分隔符，根據該符號分割字串。
• limit: 陣列的最大長度（可選）。

(1) 基本分割

const text = "apple,banana,cherry";
const result = text.split(",");
console.log(result); // ["apple", "banana", "cherry"]

(2) 限制分割長度

const text = "apple,banana,cherry";
const result = text.split(",", 2);
console.log(result); // ["apple", "banana"]

(3) 將字串拆成單個字母

const word = "hello";
const letters = word.split("");
console.log(letters); // [ 'h', 'e', 'l', 'l', 'o' ]

reverse() ，用於將陣列中的元素順序反轉的方法。它會改變原始陣列。

範例:

const numbers = [1, 2, 3, 4];
numbers.reverse();
console.log(numbers); // [4, 3, 2, 1]

join()，用於將陣列中的所有元素轉為字串並用指定的分隔符連接的方法。

語法:

array.join(separator);

• separator: 連接元素時使用的分隔符（預設為 ,）。

(1) 使用預設分隔符

const words = ["apple", "banana", "cherry"];
const result = words.join();
console.log(result); // "apple,banana,cherry"

(2) 使用自定義分隔符

const words = ["apple", "banana", "cherry"];
const result = words.join(" - ");
console.log(result); // "apple - banana - cherry"

應用範例-反轉字串:

使用 split、reverse 和 join 來反轉字串。

const word = "hello";
const reversed = word.split("").reverse().join("");
console.log(reversed); // "olleh"

最後，我們探討一些淺拷貝的複製陣列方法，不過我們要先了解淺拷貝是甚麼?

淺拷貝:

• 僅複製數據的 第一層，對於 基本類型 的數據會複製值，而對於 引用類型 的數據，只會複製引用的地址。
• 所謂引用類型，是指在使用該類型時，變數實際上儲存的是該對象的引用地址而非對象本身，也就是說，引用類型儲存的是指向對象的記憶體空間的地址。
• 改變引用類型的內容時，原始資料和拷貝資料會 相互影響。
• 以下為示範:

// 以下含有關於物件的觀念，讀者可以在讀完物件的觀念後再回來看一次。

// 原始數據
const originalArray = [1, 2, { name: "Alice" }];

// 淺拷貝
const shallowCopy = originalArray.slice();

// 修改拷貝中的引用類型
shallowCopy[2].name = "Bob";

console.log(originalArray); // [1, 2, { name: "Bob" }]
console.log(shallowCopy);   // [1, 2, { name: "Bob" }]

以下幾種為常見的拷貝陣列方法:

• slice()
• concat()
• 展開運算符 [...]

1. slice()

const arr = [1, 2, 3, 4, 5];

const newArr = arr.slice(1, 4); // 從索引 1 開始到 4（不包含 4）
console.log(newArr); // [2, 3, 4]

const str = "Hello, world!";
const newStr = str.slice(7, 12);
console.log(newStr); // "world"

2. concat()，用於將兩個或更多的陣列連接成一個新的陣列。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const combined = arr1.concat(arr2, arr3);
console.log(combined); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

3. [...]，... 允許將陣列或物件的元素「展開」，用於許多不同的場景，包括陣列的合併和複製。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

const arr = [1, 2, 3];
const copy = [...arr];
console.log(copy); // [1, 2, 3]

練習題

let arr1 = [1, 2, 3];
let arr2 = [].concat(arr1);

console.log(arr1 === arr2); // 請問輸出為何?