[转]JS Array.slice 截取数组的实现方法

最新推荐文章于 2024-08-08 16:20:44 发布
最新推荐文章于 2024-08-08 16:20:44 发布
阅读量2.7k 收藏
点赞数 1
分类专栏： 前端开发 成长轨迹 文章标签： js数组

 

这篇文章主要介绍了JS Array.slice 截取数组的实现方法,因为我们需要控制一下长度，需要的朋友可以参考下

slice定义和用法

slice() 方法可从已有的数组中返回选定的元素。

语法
arrayObject.slice(start,end)

 

参数描述
start必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

 


返回值

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

说明

请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

提示和注释

注释：您可使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。


实例

例子 1

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script type="text/javascript">
     
     
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var arr = 
     
     new 
     
     Array(
     
     3)
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     0] = 
     
     "George"
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     1] = 
     
     "John"
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     2] = 
     
     "Thomas"
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(arr + 
     
     "<br />")
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(arr.slice(
     
     1) + 
     
     "<br />")
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(arr)
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>

输出：
George,John,Thomas
John,Thomas
George,John,Thomas

例子 2

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script type="text/javascript">
     
     
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var arr = 
     
     new 
     
     Array(
     
     6)
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     0] = 
     
     "George"
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     1] = 
     
     "John"
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     2] = 
     
     "Thomas"
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     3] = 
     
     "James"
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     4] = 
     
     "Adrew"
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     arr[
     
     5] = 
     
     "Martin"
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(arr + 
     
     "<br />")
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(arr.slice(
     
     2,
     
     4) + 
     
     "<br />")
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(arr)
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>

输出：
George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin

核心代码：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script type="text/javascript">
     
     
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //JS Array.slice 截取数组
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //在JavaScript中，Array对象的slice(start[,end])方法返回数组从下标[start,end)的部分（不包含下标为end的元素）如果没有指定end参数，则从start开始到数组结尾的部分，slice()方法不改变原数组，如果要删除数组的一部分，可以使用splice()方法。
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //参数：
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //（1）start:开始截取的数组下标，如果start是负数，表明从数组尾部开始计算。
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //（2）end:结束截取的数组下标，如果end是负数，表明从数组尾部开始计算。
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //例1：
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var arr = [
     
     1,
     
     2,
     
     3,
     
     4,
     
     5,
     
     6,
     
     7,
     
     8,
     
     9];
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     // [0,1,2,3,4,5,6,7,8]
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     // [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1]
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(arr.slice(
     
     5)); 
     
     // 输出：6,7,8,9
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(arr.slice(
     
     -5)); 
     
     // 输出：5,6,7,8,9
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(arr.slice(
     
     0,
     
     3)); 
     
     // 输出：1,2,3
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(arr.slice(
     
     1,
     
     2)); 
     
     // 输出：2
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(arr.slice(
     
     3,
     
     -2)); 
     
     // 输出：4,5,6,7
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(arr.slice(
     
     1,
     
     9999)); 
     
     // 输出：2,3,4,5,6,7,8,9
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //==================================================================================================
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //JS Array.splice(start,delete_count,value,...) 插入、删除、替换数组
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //参数：
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //（1）start:开始插入和（或）删除的数组元素的下标。
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //（2）delete_count:结束截取的数组下标，如果end是负数，表明从数组尾部开始计算。
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //（3）value,...：要插入数组的元素。
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //返回：如果从数组中删除了元素，则返回的是被删除的元素的数组
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //例1：
    
    
    
   
   
  28. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(
     
     "<hr>");
    
    
    
   
   
  29. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //
    
    
    
   
   
  30. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var arr = [
     
     1,
     
     2,
     
     3,
     
     4,
     
     5,
     
     6,
     
     7,
     
     8,
     
     9];
    
    
    
   
   
  31. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(
     
     "arr=" + arr); 
     
     // 输出：arr=1,2,3,4,5,6,7,8,9
    
    
    
   
   
  32. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(
     
     "arr.splice(5)=" + arr.splice(
     
     5)); 
     
     // 输出：arr.splice(5)=6,7,8,9
    
    
    
   
   
  33. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(
     
     "arr=" + arr); 
     
     // 输出：arr=1,2,3,4,5
    
    
    
   
   
  34. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(
     
     "<br>");
    
    
    
   
   
  35. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //
    
    
    
   
   
  36. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var arr = [
     
     1,
     
     2,
     
     3,
     
     4,
     
     5,
     
     6,
     
     7,
     
     8,
     
     9];
    
    
    
   
   
  37. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(
     
     "arr=" + arr); 
     
     // 输出：arr=1,2,3,4,5,6,7,8,9
    
    
    
   
   
  38. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(
     
     "arr.splice(5,1,99,100)=" + arr.splice(
     
     5,
     
     1,
     
     99,
     
     100)); 
     
     // 输出：arr.splice(5,1,99,100)=6
    
    
    
   
   
  39. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.writeln(
     
     "arr=" + arr); 
     
     // 输出：arr=1,2,3,4,5,99,100,7,8,9
    
    
    
   
   
  40. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.write(
     
     "<br>");
    
    
    
   
   
  41. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>

ok了，其实就是使用array.alice(0,20);截取前20个。

LTIven
关注
专栏目录
JS Array.slice 截取数组的实现方法
11-24
`JS Array.slice` 是JavaScript中处理数组的一个重要方法，它允许开发者从原始数组中提取出一个子集，形成一个新的数组，而不会改变原始数组。这个方法对于数组操作来说非常实用，尤其是在需要复制数组或者提取部分...
JavaScript——数组——slice方法
realzhangsan的博客
09-12 2万+
JavaScript——数组——slice方法 JavaScript中的slice方法类似于字符串的substring方法，作用是对数组进行截取。 slice方法有两个参数，indexStart 和 indexEnd，分别表示截取的起始位置和结束位置，indexStart是必选的，indexEnd是可选的。 如果填写了indexEnd，方法会对数组从下标 indexStart 到下标 indexEnd 以左闭右开的方式进行截取；如果不填写indexEnd，方法会截取数组的从下标 indexStart 到末尾
slice 截取
最新发布
weixin_38225763的博客
08-08 413
JavaScript中的一个数组方法。然而，在Vue 3的应用开发中，slice方法经常被用于处理数组数据，特别是在需要实现分页、数据截取或数据展示等场景时。
JS 截取数组操作
sunshineTing2的博客
03-09 1万+
slice和splice
js方法数组内置方法slice()，js数组截取，js数组内置方法slice()详解
guojixin12的博客
07-25 1973
（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。，这一对象是一个由 start 和 end 决定的原数组的。一起使用，用于创建一个实用方法，将类数组对象转换为数组。slice() 方法返。本文代码片段参考mdn。
你必须记住的Javascript知识：数组截取之 slice() 方法
gavincz的博客
07-09 1985
slice() 方法： slice() 方法，能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法接受一或两个参数：即要返回项的起始和结束位置。 当只有一个参数时，slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项； 如果有两个参数，该方法返回起始和结束位置之间的项，但，不包括结束位置的项； slice() 方法不会影响原始数组。 var color...
js Array.slice的8种不同用法示例
10-16
标题《js Array.slice的8种不同用法示例》意味着本文将会向读者介绍如何利用JavaScript中的Array.slice方法，实现数组操作的多种技巧。Array.slice是JavaScript数组自带的一个方法，它能够在不改变原数组的情况下，...
javascript Array.prototype.slice使用说明
12-01
JavaScript中的`Array.prototype.slice`方法是一个非常实用的工具，它允许你从数组中提取一部分元素并返回一个新的数组，而不会改变原始数组。这个方法在处理数组或者类似数组对象时尤其有用，因为它能处理那些拥有`...
javascript Array.prototype.slice的使用示例
12-01
总的来说，`Array.prototype.slice`在JavaScript中是一个强大且灵活的方法，不仅用于截取数组，还能处理类数组对象，为我们的编程带来很多便利。理解并熟练掌握它的使用，能够提升代码的可读性和可维护性。
初识react（5）——怎么截取数组中部分数据
小R.的博客
04-01 3646
  最近做react项目时，遇到这样一个问题：遍历数据为23条，我想分别提取前20条，第21条，第22条，和第23条数据。可能是java和js学的不好，第一时间没想到怎么写。   后来知道可以用arr.slice(start,end)实现。   slice 方法返回的是一个 Array 对象，其中start指的是想要截取的头部下标，end是尾部下标，但不包括end元素。例如： let exam_o...
js数组截取
qq965359889的博客
08-10 2万+
1.js取数组前3个一个长度是5的数组，只取前三个数组对象2.string.split(',') //将字符串以，分割成数组3.splice() 方法执行的返回值是被删除的子数组。
JavaScript slice()方法详解
NHB234567的博客
03-17 2万+
slice()是 JavaScript 中用于提取数组片段的强大方法。通过指定起始索引和结束索引，你可以创建新的子数组，用于各种操作和场景。它不仅能够帮助你轻松地处理数组的子集，还能保持原始数组的不变。掌握了slice()方法，你将更加自信地操作和处理数组数据。这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！
js数组里的方法30个总合
z2428478096的博客
02-20 727
1.concat() concat() 方法用于连接两个或多个数组。方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。 var str1 = [1,2,3,4,5,6] var str2 = ['a','b','c','d','e'] console.log(str1.concat(str2));//[1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd', 'e'] 2.copyWithin() copyWithin() 复制数组的一部分数据覆盖到数组的另一个.
js中实现截取数组的前几个元素以及后几个元素作为一个新数组的方法
热门推荐
qsj0606的博客
04-21 4万+
数组中的slice()和splice()方法都可以实现对数组截取 const arr=[1,2,3,4,5,6,7,8] //截取数组前三个元素 const sliceA=arr.slice(0,3) console.log('sliceA',sliceA)//得到[1,2,3] //截取数组后三个元素 slice方法 const sliceArr=arr.slice(-3) console.log('sliceArr',sliceArr)//得到[6,7,8] //slice(start,end)
js 数据截取
leng0920的博客
06-18 2340
getList(){ fast_request.get(`/api/applet/activity/top`,{},(res)=>{ letdata=res.data.data;//获取到数据 //data=data.slice(0,3);截取第一条到第三条数据 data=data.slice(3,data.length);//截取第四条到最后一条数据 if(res.data.code==0){ t...
截取数组对象
听闻青春丶
07-31 3509
需求： var arr = [{ a: 1 }, { b: 2 }, { c: 3 }, { a: 1 }, { b: 2 }, { c: 3 }, { d: 4 }, { a: 1 }, { b: 2 }, { c: 3 }, { d: 4 }, { e: 5 }]; /**方案一 * 获取某个属性值 * @param {[string]} atr [属性...
javascript实现斐波那契数列前20位
tiaowuji的博客
07-24 1073
javascript实现斐波那契数列前20位
ES6数组操作方法
qq_66390045的博客
04-21 1972
1. forEach （1）没有返回值 （2）不能return，会返回undefinde var arr = [1, 2, 3, 4, 5, 4, 2] arr.forEach((item) => { console.log(item) }) 1, 2, 3, 4, 5, 4, 2 2. map （1）有返回值，返回一个新数组 （2）可以return，可以自定义返回值 var arr2 = [ { id: 1, name: 'jack', age: 18 }, { id
array.prototype.slice.call()
09-12
### 回答1： array.prototype.slice.call()是一种将类数组对象转换为数组的方法。它通过调用Array原型上的slice方法，并将类数组对象作为其上下文来实现。这个方法可以用于将一些类似数组的对象（比如arguments对象）转换为真正的数组，以便于进行数组操作。 ### 回答2： array.prototype.slice.call()是JavaScript中的一个方法，用于将类数组对象（如arguments对象）转换为真正的数组。 array.prototype.slice是数组的一个内置方法，用于从已有的数组中返回选定的元素。这个方法通常用于截取数组中的一部分元素创建一个新的数组，不会对原数组产生影响。 而调用call()方法将slice方法中的this指向传入的对象。由于类数组对象并不具有slice方法，因此需要通过这种方式将slice方法应用在类数组对象上。 使用array.prototype.slice.call()方法，可以将类数组对象转换为真正的数组。它的工作原理是通过在调用slice方法时将类数组对象作为this参数传入，使得slice方法可以在类数组对象上正确地运行并返回一个新的数组。 使用array.prototype.slice.call()方法的一个常见场景是将类数组对象转换为真正的数组以方便进行数组操作，例如使用数组的forEach、map等方法进行遍历或处理。另外，使用该方法还可以将字符串转换为数组，因为字符串也是类数组对象。 总结来说，array.prototype.slice.call()是将类数组对象转换为真正的数组的一种常用方法，它通过在调用slice方法时将类数组对象作为this参数传入，使得slice方法可以正确地运行并返回一个新的数组。 ### 回答3： array.prototype.slice.call() 是一种将类数组对象（array-like object）转化为真正的数组的方法。类数组对象是指具有与数组类似的结构，但却不是真正的数组，比如 arguments 对象，DOM 元素集合等。 array.prototype.slice.call() 的作用是将类数组对象转化为数组，并返回一个新的数组。该方法利用了 Array.prototype.slice() 方法，将其绑定到类数组对象上，然后调用该方法进行数组转化。由于 slice() 方法可以接收参数来指定切片的起始和结束位置，所以可以将整个类数组对象拷贝到新的数组中。 具体来说，使用 array.prototype.slice.call() 的步骤如下： 1.在类数组对象上调用 call() 方法，并将 Array.prototype.slice() 方法作为该方法的参数； 2.通过该调用，将类数组对象绑定到 Array.prototype.slice() 方法上，使其成为该方法的执行环境； 3.执行 Array.prototype.slice() 方法，将类数组对象转化为数组，并返回新的数组。 例如，我们可以使用 array.prototype.slice.call(arguments) 将函数参数对象 arguments 转化为数组。 需要注意的是，array.prototype.slice.call() 方法只能将具有索引属性（index property）的类数组对象转化为数组，而不能转化不具有索引属性的对象。 总之，array.prototype.slice.call() 是一种将类数组对象转化为数组的常用方法，可以方便地处理一些本应使用数组操作的对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值