JavaScript 會改變原始陣列語法

發表於 分類於
這篇文章詳細介紹了 JavaScript 陣列中會改變原始值的所有方法，包括 push(), pop(), shift(), unshift(), reverse(), splice(), sort(), copyWithin(), 和 fill()。無論你是初學者還是有經驗的開發者，這裡都有豐富的範例和解釋，幫助你更好地理解和應用這些方法。。

push() - 將資料添加至陣列末尾

push() 方法可將一或多個值添加至陣列的末尾，並自動更新陣列的長度。

1
2
3
let a = [1, 2, 3, 4, 5, 6, 7, 8];
a.push(9, 10);
console.log(a); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

pop() - 刪除陣列最後一個元素

pop() 方法用來移除並返回陣列的最後一個元素。

1
2
3
4
let a = [1, 2, 3, 4, 5, 6, 7, 8];
let b = a.pop();
console.log(a); // [1, 2, 3, 4, 5, 6, 7]
console.log(b); // 8

shift() - 刪除陣列第一個元素

shift() 方法可移除並返回陣列的第一個元素。

1
2
3
4
let a = [1, 2, 3, 4, 5, 6, 7, 8];
let b = a.shift();
console.log(a); // [2, 3, 4, 5, 6, 7, 8]
console.log(b); // 1

unshift() - 將資料添加至陣列最前方

unshift() 方法可以將一或多個元素添加至陣列的第一個位置。

1
2
3
let a = [1, 2, 3, 4];
a.unshift(100, 200);
console.log(a); // [100, 200, 1, 2, 3, 4]

reverse() - 反轉陣列

reverse() 方法會將陣列的順序顛倒。

1
2
3
let a = [1, 2, 3, 4, 5];
a.reverse();
console.log(a); // [5, 4, 3, 2, 1]

splice() - 移除或添加陣列元素

splice() 方法可用於移除或添加陣列中的元素，其接受三個參數：

  1. 位置：要修改的開始索引（必填）
  2. 刪除數量：要刪除的元素數量（選填）
  3. 新增元素：要添加的元素（選填）
1
2
3
4
5
6
7
8
9
10
11
let a = [1, 2, 3, 4, 5, 6, 7, 8];
a.splice(5); // 移除第 5 個位置之後的所有元素
console.log(a); // [1, 2, 3, 4, 5]

let b = [1, 2, 3, 4, 5, 6, 7, 8];
b.splice(5, 2); // 移除第 5 個位置的兩個元素
console.log(b); // [1, 2, 3, 4, 5, 8]

let c = [1, 2, 3, 4, 5, 6, 7, 8];
c.splice(5, 2, 60, 70); // 移除第 5 個位置的兩個元素並新增 60 和 70
console.log(c); // [1, 2, 3, 4, 5, 60, 70, 8]

sort() - 對陣列進行排序

sort() 方法用來對陣列中的元素進行排序。它可以接受一個比較函式作為參數，以決定排序順序。

1
2
3
4
5
6
let a = [4, 3, 1, 5, 7, 6, 2];
a.sort((x, y) => y - x); // 降序排列
console.log(a); // [7, 6, 5, 4, 3, 2, 1]

a.sort((x, y) => x - y); // 升序排列
console.log(a); // [1, 2, 3, 4, 5, 6, 7]
注意：若不提供比較函式，預設會將元素轉換成字串並按照 Unicode 順序排序，可能導致不正確的數字排序。結果如下： 
1
2
3
let a = [1, 3, 22, 4, 5, 37, 6, 2, 57, 10, 11];
a.sort();
console.log(a); // [1, 10, 11, 2, 22, 3, 37, 4, 5, 57, 6]

copyWithin() - 複製陣列元素

copyWithin() 方法用於複製陣列中的某些元素，並將它們放置到同一陣列的指定位置。該方法接受三個參數：

1
a.copyWithin(target, start, end)

參數說明

  1. target：要置換的開始索引（必填）。
  2. start：從何處開始複製（選填，預設為 0）。
  3. end：停止複製的索引前一個位置（選填，預設為陣列長度）。

範例

1
2
3
let a = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
a.copyWithin(2);
console.log(a); // ['甲', '乙', '甲', '乙', '丙', '丁', '戊', '己', '庚', '辛']

運作方式

當你執行 a.copyWithin(2) 時，方法的運作流程如下：

  • 原始數組: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸']
  • target: 2 （填充從索引 2 開始）
  • start: 默認為 0（從索引 0 開始複製，即數字 '甲'）。
  • end: 默認為數組的結尾，即 10。

複製過程

  1. 複製數據: 從索引 0 開始複製到數組結尾，複製的數據為 ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸']。

  2. 填充數組: 從索引 2 開始填充：

    • a[2] 被設置為 '甲' （來自 a[0]）
    • a[3] 被設置為 '乙' （來自 a[1]）
    • a[4] 被設置為 '丙' （來自 a[2]）
    • a[5] 被設置為 '丁' （來自 a[3]）
    • a[6] 被設置為 '戊' （來自 a[4]）
    • a[7] 被設置為 '己' （來自 a[5]）
    • a[8] 被設置為 '庚' （來自 a[6]）
    • a[9] 被設置為 '辛' （來自 a[7]）

  3. 最終結果:

    • 數組變為 ['甲', '乙', '甲', '乙', '丙', '丁', '戊', '己', '庚', '辛']

fill() - 替換陣列中的所有元素

fill() 方法會將陣列中的所有元素替換為指定的值。它接受三個參數：

  1. 要填充的值（必填）
  2. 開始索引（選填，預設為 0）
  3. 結束索引（選填，預設為陣列長度）
1
2
3
let a = [1, 2, 3, 4, 5];
a.fill('a');
console.log(a); // ['a', 'a', 'a', 'a', 'a']

使用開始索引

1
2
3
let b = [1, 2, 3, 4, 5];
b.fill(3, 2);
console.log(b); // [1, 2, 3, 3, 3]

使用結束索引

1
2
3
4
5
let c = [1, 2, 3, 4, 5,

 6, 7, 8];
c.fill('c', 3, 5);
console.log(c); // [1, 2, 3, 'c', 'c', 6, 7, 8]