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