使用arr.slice快速截取數組的部分元素

在 JavaScript 中，我們經常會對數組進行處理，比如篩選、添加、刪除、截取等。而截取部分元素是經常用到的操作之一，例如需要從一個較大的數組中截取出前幾個元素或者某個區間的元素等。本文將介紹使用數組的 slice 方法來快速截取數組的部分元素。

一、slice 方法的基本用法

slice 方法可以從數組中截取部分元素並返回一個新的數組，而原始數組並不會被改變。slice 方法的語法如下所示：

arr.slice([start], [end])

其中，arr 表示被截取的數組，start 和 end 表示截取的起始位置和結束位置。start 和 end 都是可選的，如果不提供，則默認從開始或者結尾處截取，具體如下：

• start：從哪個索引開始截取，省略則從 0 開始
• end：截取到哪個索引（不包括 end 對應的元素），省略則截取到數組結尾

以下是一些使用 slice 方法的例子：

// 原始數組
var arr = ["apple", "banana", "orange", "pear"];

// 從索引為 1 的位置開始截取，截取到索引為 3 （不包括 3）的位置
var res1 = arr.slice(1, 3);   // ["banana", "orange"]

// 從索引為 2 的位置開始截取，截取到數組結尾
var res2 = arr.slice(2);      // ["orange", "pear"]

// 從數組開始截取，截取到索引為 2 （不包括 2）的位置
var res3 = arr.slice(0, 2);   // ["apple", "banana"]

// 截取整個數組
var res4 = arr.slice();       // ["apple", "banana", "orange", "pear"]

二、快速截取數組的前幾個元素

有時候我們需要從一個較大的數組中截取前幾個元素，可以使用 slice 方法結合箭頭函數的方法來實現，例如：

var arr = [1, 2, 3, 4, 5, 6];

// 截取前 3 個元素
var res1 = arr.slice(0, 3);              // [1, 2, 3]

// 截取前 4 個元素
var res2 = arr.slice(0, 4);              // [1, 2, 3, 4]

// 截取前 5 個元素
var res3 = arr.slice(0, 5);              // [1, 2, 3, 4, 5]

// 截取前 2 個元素
var res4 = arr.slice(0, 2);              // [1, 2]

// 使用箭頭函數來簡化代碼
var take = n => arr.slice(0, n);

// 截取前 3 個元素
var res5 = take(3);                      // [1, 2, 3]

// 截取前 4 個元素
var res6 = take(4);                      // [1, 2, 3, 4]

三、快速截取數組的後幾個元素

除了截取前幾個元素之外，我們有時候還需要截取數組的後幾個元素，同樣可以使用 slice 方法結合箭頭函數的方法來實現，例如：

var arr = [1, 2, 3, 4, 5, 6];

// 截取最後 3 個元素
var res1 = arr.slice(-3);                // [4, 5, 6]

// 截取最後 4 個元素
var res2 = arr.slice(-4);                // [3, 4, 5, 6]

// 截取最後 5 個元素
var res3 = arr.slice(-5);                // [2, 3, 4, 5, 6]

// 截取最後 2 個元素
var res4 = arr.slice(-2);                // [5, 6]

// 使用箭頭函數來簡化代碼
var takeLast = n => arr.slice(-n);

// 截取最後 3 個元素
var res5 = takeLast(3);                  // [4, 5, 6]

// 截取最後 4 個元素
var res6 = takeLast(4);                  // [3, 4, 5, 6]

四、截取數組的一部分並且修改

有時候我們需要截取數組的一部分元素，並且對這些元素進行修改，例如轉換大小寫、去除空格等操作，可以使用 slice 方法結合 map 方法來實現，例如：

var arr = [" apple ", " banana ", " orange ", " pear "];

// 去除空格並轉換為小寫
var res1 = arr.slice(1, 3).map(x => x.trim().toLowerCase());    // ["banana", "orange"]

// 將所有元素轉換為大寫
var res2 = arr.slice().map(x => x.toUpperCase());              // [" APPLE ", " BANANA ", " ORANGE ", " PEAR "]

五、截取數組的一部分並且併入其它數組

有時候我們需要截取數組的一部分元素並且併入其它數組中，可以使用 spread 運算符來實現，例如：

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

// 將 arr1 的前 3 個元素和 arr2 組成新數組
var res1 = [...arr1.slice(0, 3), ...arr2];    // [1, 2, 3, 6, 7, 8, 9, 10]

// 將 arr1 的最後 2 個元素和 arr2 組成新數組
var res2 = [...arr1.slice(-2), ...arr2];      // [4, 5, 6, 7, 8, 9, 10]

六、總結

slice 方法是一個非常常用的數組方法，應用廣泛，適用性強。結合其它操作，可以輕鬆實現截取數組的部分元素，增加代碼的可讀性和可維護性。