详解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()方法截取数组不改变原数组等。这些方法可以根据实际需求使用，以实现最佳的数据截取效果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246875.html