詳解JS數組截取不改變原數組

一、JS改變原數組和返回新數組

在JS中，截取數組可以使用數組的slice()方法，這個方法不會改變原數組，而是返回一個包含指定位置元素的新數組。這個方法的語法如下所示：

array.slice(start, end)

其中，start參數表示起始位置，end參數表示結束位置。start和end都是可選參數，start默認從0開始取，end默認去到數組結尾。

如果end是負數，它表示從末尾開始的位置。如果start和end都是負數，則將它們轉換為相應的正數，例如，-3將轉換為array.length – 3。

需要注意的是，截取後的數組是不包含end位置的，這也是與slice方法的不同之處。

二、截取數組數據不改變元素值

除了返回新數組，JS中還有一種方法可以截取數組不改變原數組的元素值，它就是使用concat()方法。該方法創建一個新數組，該數組是由兩個或多個數組組合而成的。這個方法的語法如下所示：

array.concat(array1, array2, ..., arrayX)

其中，array1, array2, …, arrayX是要合併的數組。如果想要截取指定位置的元素值，我們可以將原數組截取成兩個部分，再將兩個部分按需要合併起來。例如，取出原數組下標為2到下標為4的元素值如下所示：

var arr = [0, 1, 2, 3, 4, 5, 6];
var arr1 = arr.slice(2, 5);
var arr2 = arr.slice(5);
var result = arr1.concat(arr2);
console.log(result); // [2, 3, 4, 5, 6]

這裡使用了slice()方法截取了arr數組的2~4下標位置的元素，同時也截取了5~6位置的元素，再將這兩個部分合併起來就得到了結果。

三、JS裁剪數組改變原數組

JS中還有一種數組截取方法是通過截取原數組來改變其值。這個方法是Array.prototype.splice()方法。splice()方法修改原數組並返回刪除的元素，它的語法如下所示：

array.splice(start, deleteCount, item1, item2, ...)

其中，start表示一個整數，在該位置插入/刪除元素。如果start大於數組的長度，則不會刪除任何元素。deleteCount表示要刪除的元素個數。如果deleteCount為0，則不會移除元素。

如果要插入一些元素，則需要在start和deleteCount參數之後指定這些元素，注意：這些元素將成為數組的新元素，並置於刪除的元素的位置。如果指定了多個元素，則將依次插入每個元素。

例如，刪除原數組下標為2~4的元素值如下所示：

var arr = [0, 1, 2, 3, 4, 5, 6];
var removed = arr.splice(2, 3);
console.log(arr); // [0, 1, 5, 6]
console.log(removed); // [2, 3, 4]

這裡通過splice()方法截取了arr數組的下標為2~4的元素值，並返回了被刪除的元素。此時原數組arr已經改變了。

四、不改變原數組的截取方法

除了上述三種截取數組的方法之外，JS中還有其他不改變原數組的截取方法，這裡我們將介紹其中的三種。

1、使用map()方法

map()方法會創建一個新數組，該數組將調用每個元素上的函數的結果作為新數組的元素。

var arr = [1, 2, 3];
var result = arr.map(function(item){
  return item * 2;
});
console.log(result); // [2, 4, 6]

2、使用filter()方法

filter()方法創建一個新數組，其中包含滿足某個條件的原數組中的所有元素。它的語法如下所示：

array.filter(callback[, thisArg])

其中，callback是用於測試每個元素的函數，返回true時保留該元素，false則刪除該元素。thisArg是執行callback函數時使用的this對象。

var arr = [1, 2, 3, 4, 5, 6];
var result = arr.filter(function(item){
  return item % 2 === 0;
});
console.log(result); // [2, 4, 6]

3、使用reduce()方法

reduce()方法對數組中的每個元素執行一個提供的函數，並將結果匯總為單個值。它的語法如下所示：

array.reduce(callback[, initialValue])

其中，callback是一個函數，接受四個參數：accumulator(累加器)，currentValue(當前值)，currentIndex(當前索引)，array(原數組)。initialValue是作為第一次調用callback函數時的第一個參數值。如果沒有提供initialValue，則使用數組的第一個元素作為累加器的初始值。

var arr = [1, 2, 3, 4];
var result = arr.reduce(function(accumulator, currentValue){
  return accumulator + currentValue;
});
console.log(result); // 10

總結

以上就是JS數組截取不改變原數組的一些方法，它們分別是使用slice()方法返回新數組、使用concat()方法截取數組不改變元素值、使用splice()方法裁剪數組改變原數組、使用map()、filter()和reduce()方法截取數組不改變原數組等。這些方法可以根據實際需求使用，以實現最佳的數據截取效果。