您的位置:

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

详解JS数组截取不改变原数组

2023-05-17
JS截取数字的方法详解

2023-05-19
重学java笔记,java笔记总结

2022-11-23
数组的截取详解

2023-05-22
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
python基础学习整理笔记,Python课堂笔记

2022-11-21
js数组编程入门,数组操作方法js

本文目录一览: 1、JS 数组相关操作 2、JavaScript学习笔记之数组基本操作示例 3、js-数组-1 JS 数组相关操作 push()可以将某些值加入到数组的最后一个位置,并且不限制添加数量

2023-12-08
详解js数组slice函数

2023-05-19
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
Swift数组截取详解

2023-05-22
javascript简要笔记,JavaScript读书笔记

2022-11-17
Java数组截取详解

2023-05-23
JS获取数组长度的多方面讲解

2023-05-19
印象笔记记录java学习(Java成长笔记)

2022-11-12
c#数组截取

2023-05-20
js代码总结体会,js基础知识总结笔记

本文目录一览: 1、js到底难不难学? 2、JS 代码 求解释 可以详细的 说明一下 谢谢 3、浅谈js写轮播图的思路与心得 4、JavaScript与WEB前台开发课程实训总结怎么写 5、js中继承

2023-12-08
包含js数组concatpush的词条

本文目录一览: 1、js数组的concat和map方法都会返回新数组,你造吗? 2、JS 数组相关操作 3、“js push”可以push一个数组么? 4、js数组几种常见的操作方法 5、JS 数组的

2023-12-08
java基础知识学习笔记一,Java基础笔记

2022-11-21
js数组跟php数组的区别(js类数组和数组区别)

本文目录一览: 1、php和js关于数组比较的区别 2、js数组与php数组问题 3、详细解释js中object和php的array的区别,及js中map和forEach所传参代表的意思,及两个函数有

2023-12-08
JavaScript数组截取splice

2023-05-22