Javascript 陣列操作(一)增刪元素

陣列基本的增刪元素方法。

1. 新增1-從陣列前面新增元素：unshift()。
2. 新增2-從陣列尾端新增元素：push() 。
3. 刪除1-從陣列前面刪除元素：shift()。
4. 刪除2-從陣列尾端刪除元素：pop()。

這4個增刪元素的方法，都會直接改變原始陣列。

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.unshift('x');
console.log(arr); // ['x', 'a', 'b', 'c', 'd', 'e']

arr.pop();
console.log(arr); // ['x', 'a', 'b', 'c', 'd']

刪除元素的方法，也可以返回被刪除的元素

let arr = ['a', 'b', 'c', 'd', 'e'];
const element = arr.shift();
console.log(element); // a
console.log(arr);     // ['b', 'c', 'd', 'e']

在指定位置新增、移除或替換元素： splice()

基本語法​
array.splice(start, deleteCount, item1, item2, ...);

參數說明

1. start（必需）
   指定從哪個索引開始操作：
2. • 正數：從索引位置 start 開始。
   • 負數：從陣列末尾倒數第 start 個位置開始。
2. deleteCount（可選）
   指定要從陣列中移除的元素數量：
3. • 如果為 0，不會移除任何元素。
   • 如果省略該參數，將從 start 一直刪除到陣列末尾。
3. item1, item2, ...（可選）
   新增到陣列中的元素（從 start 的位置插入）。
   

返回值

splice() 會返回一個包含被刪除元素的新陣列。
如果沒有刪除任何元素，則返回空陣列。

1. 移除元素

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2); // 從索引 2 開始，刪除 2 個元素
console.log(arr); // [1, 2, 5]
console.log(removed); // [3, 4]

2. 新增元素

const arr = [1, 2, 5];
arr.splice(2, 0, 3, 4); // 在索引 2 處插入 3 和 4，不刪除任何元素
console.log(arr); // [1, 2, 3, 4, 5]

3. 替換元素

const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, 99, 100); // 從索引 1 開始，刪除 2 個元素，並插入 99 和 100
console.log(arr); // [1, 99, 100, 4, 5]

4. 刪除直到結尾

const arr = [1, 2, 3, 4, 5];
arr.splice(2); // 從索引 2 開始，刪除到陣列末尾
console.log(arr); // [1, 2]

5. 使用負數索引

const arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // 從倒數第二個位置開始，刪除 1 個元素
console.log(arr); // [1, 2, 3, 5]

6. 同時新增與刪除

const arr = [1, 2, 3, 5];
arr.splice(3, 0, 4); // 在索引 3 插入 4
arr.splice(1, 2, 99, 100); // 刪除兩個元素，插入 99 和 100
console.log(arr); // [1, 99, 100, 4, 5]

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

取得陣列中指定位置的元素： slice()

雖然與增刪元素無關，但為了對比splice，在此列出slice方法。

基本語法​
slice(start, end)

start(可選)：開始提取的索引(包含)，若為負數，則從陣列末尾開始計算。默認為 0。

end(可選)：結束提取的索引(不包含)，若為負數，則從陣列末尾開始計算。默認為陣列的長度。

返回值：返回一個新陣列，包含從 start 到 end（不包括 end）之間的元素。

範例

1：提取部分元素

let array = [10, 20, 30, 40, 50];
let slicedArray = array.slice(1, 3);

console.log(slicedArray); // [20, 30]

2：不提供 end 參數

若只提供 start 參數，slice() 會提取從 start 開始到陣列末尾的所有元素

let array = [10, 20, 30, 40, 50];
let slicedArray = array.slice(2);

console.log(slicedArray); // [30, 40, 50]

3：使用負數索引

slice() 方法的 start 和 end 可以是負數，表示從陣列末尾開始計算。

let array = [10, 20, 30, 40, 50];
let slicedArray = array.slice(-3, -1);

console.log(slicedArray); // [30, 40]
//slice(-3, -1)：從倒數第 3 個元素開始提取，直到倒數第 1 個元素前結束。

4：不提供參數

如果不提供任何參數，slice() 會返回整個陣列的淺拷貝。

let array = [10, 20, 30, 40, 50];
let copiedArray = array.slice();

console.log(copiedArray); // [10, 20, 30, 40, 50]

與 splice() 的區別：

slice() 不改變原始陣列，返回提取的部分。

splice() 改變原陣列，刪除或添加元素，並返回被刪除的元素。