The Most Familiar Stranger - JavaScript - 陣列

分享記錄檔 YouTube

JS 的陣列是一種有序的數據集合，其內部存儲的元素可以是任意類型的數據。

它有以下的特點：

1. 有序性：陣列中的每個元素都有一個索引，可以通過索引來訪問和修改其中的元素。
2. 長度可變：陣列的長度是可變的，可以動態添加或刪除元素。
3. 可存儲不同數據類型：JS 的陣列可以存儲任何數據類型，包括字串、數字、物件等。

創建陣列

直接創建：使用方括號[]，在其中添加元素，每個元素之間用逗號隔開

const arr = [1, 2, 3, 'four', {name: 'John'}];

使用Array()構造函數創建：

const arr = new Array(1, 2, 3, 'four', {name: 'John'});

操作陣列

push()：在陣列的末尾添加一個或多個元素

const arr = [1, 2, 3];
arr.push(4);

console.log(arr);   // [1, 2, 3, 4]

pop()：從陣列的末尾刪除一個元素

const arr = [1, 2, 3];
arr.pop();

console.log(arr);   // [1, 2]

shift()：從陣列的開始刪除一個元素

const arr = [1, 2, 3];
arr.shift();

console.log(arr);   // [2, 3]

unshift()：在陣列的開始添加一個或多個元素

const arr = [1, 2, 3];
arr.unshift(0);

console.log(arr);   // [0, 1, 2, 3]

splice()：在陣列的任意位置添加或刪除元素

const arr = [1, 2, 3];
arr.splice(1, 1, 4);

console.log(arr);   // [1, 4, 3]

reverse()：將陣列元素順序反轉

const arr = [1, 2, 3, 4, 5];
arr.reverse();

console.log(arr);   // output: [5, 4, 3, 2, 1]

⚠️ 以上的操作都會直接異動原始陣列

💡 在 forEach() 執行中異動 array 會怎樣呢?

1. 減少陣列元素：部分元素將不會被遍歷到
2. 增加陣列元素：在執行 forEach 前要執行的長度就已經被設定了，所以在陣列後面加入的元素將不會被遍歷到

slice()：回傳一個新陣列，其中包含原陣列的指定部分，可傳入兩個參數，第一個為起始索引 ( 包含 )，第二個為結束索引 ( 不包含 )

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4);

console.log(newArr);   // [2, 3, 4]

concat()：回傳一個新陣列，其中包含原陣列和傳入的陣列或元素

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2, 5);

console.log(newArr);   // [1, 2, 3, 4, 5]

map()：回傳一個新陣列，其中包含將原陣列每個元素經過回調函式處理後的結果

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => item * 2);

console.log(newArr);   // [2, 4, 6, 8, 10]

⚠️ 以上的操作都會回傳一個新陣列