JS 截取数组(得到数组片段)的方法有两种,分别是使用 splice() 和 slice() 方法,简单说明如下

使用 splice() 截取数组

splice() 方法可以添加元素、删除元素,也可以截取数组片段。删除元素时,将返回被删除的数组片段,因此可以使用 splice() 方法截取数组片段。

1) splice() 方法的参数是可选的。如果不给它传递参数,则该方法不执行任何操作。如果给它传递一个参数,则该方法仅执行删除操作,参数值指定删除元素的起始下标,(包含该下标元素),splice() 方法将删除后面所有元素。

  • 如果指定两个参数,则第 2 个参数值表示要删除元素的个数。
  • 如果指定三个或多个参数,则第 3 个以及后面所有参数都被视为插入的元素。
  • 如果不执行删除操作,第 2 个参数值应该设置为 0,但是不能够空缺,否则该方法无效。

2) splice() 方法的删除和插入操作是同时进行的,且是在原数组基础上执行操作。插入的元素将填充被删除元素的位置,并根据插入元素个数适当调整插入点位置。而不是在删除数组之后重新计算插入点的位置。

3) splice() 方法执行的返回值是被删除的子数组。

var a = [1,2,3,4,5];  //定义数组
var b = a.splice(2);  //从第三个元素开始执行删除
console.log(b);  //被删除的子数组是[1,2]

如果没有删除元素,则返回的是一个空数组。

var b = a.splice(2,0);  //不执行删除操作
console.log(b.constructor == Array);  //返回true,说明是一个空数组

4) 当第 1 个参数值大于 length 属性值时,被视为在数组尾部执行操作,因此删除无效,但是可以在尾部插入多个指定元素。

var a = [1,2,3,4,5];  //定义数组
var b = a.splice(6,2,2,3);  //起始值大于length属性值
console.log(a);  //返回[1,2,3,4,5,2,3]

5) 参数取负值问题。如果第 1 个参数为负值,则按绝对值从数组右侧开始向左侧定位。如果第 2 个参数为负值,则被视为 0。

var a = [1,2,3,4,5];   //定义数组
var b = a.splice(-2,-2,2,3);  //第一、二个参数都为负值
console.log(a);  //返回[1,2,3,2,3,4,5]

使用 slice() 截取数组

slice() 方法与 splice() 方法功能相近,但是它仅能够截取数组中指定区段的元素,并返回这个子数组。该方法包含两个参数,分别指定截取子数组的起始和结束位置的下标。

var a = [1,2,3,4,5];  //定义数组
var b = a.slice(2,5);  //截取第三个元素到第六个元素前的所有元素
console.log(b);  //返回[3,4,5]

使用该方法时,应该注意下面几个问题。
1) 第 1 个参数指定起始下标位置,包括该值指定的元素;第 2 个参数指定结束位置,不包括指定的元素。
2) 该方法的参数可以自由设置。如果不传递参数,则不会执行任何操作;如果仅指定一个参数,则表示从该参数值指定的下标位置开始,截取到数组的尾部所有元素。

var b = a.slice(2);  //截取数组中第三个元素,以及后面所有元素
console.log(b);   //返回[3,4,5]

3) 当参数为负值时,表示按从右到左的顺序进行定位,即倒数定位法,而不再按正数顺序定位(从左到右),但取值顺序依然是从左到右。

var b = a.slice(-4,-2);  //截取倒数第四个元素到倒数第二个元素前的元素
console.log(b);   //返回[2,3]

如果起始下标值大于或等于结束下标值,将不执行任何操作。

var b = a.slice(-2,-4);  //截取倒数第二个元素到倒数第四个元素前的元素
console.log(b);  //返回空集

上面示例说明数组在截取时,始终是按从左到右的顺序执行操作,而不会是从右到左的反向操作。

4) 当起始参数值大于或等于 length 属性值时,将不会执行任何操作,返回空数组。而如果第二个参数值大于 length 属性值时,将被视为 length属性值。

var b = a.slice(3,10);  //截取第四个元素,直到后面所有元素
console.log(b);  //返回[4,5]

5) slice() 方法将返回数组的一部分(子数组),但不会修改原数组。而 splice() 方法是在原数组基础上进行截取。如果希望在原数组基础上进行截取操作,而不是截取为新的数组,这时候就只能够使用 splice() 方法了。

(基础)JavaScript截取数组:使用splice()和slice()方法相关推荐

  1. js数组截取方式splice()和slice()方法

    js数组截取方式splice()和slice()方法 1.splice() splice() 方法可以添加元素.删除元素,也可以截取数组片段.删除元素时,将返回被删除的数组片段,因此可以使用 spli ...

  2. javascript删除数组元素的几个方法

    javascript删除数组元素的7个方法 文章目录 一.length属性 二.delete关键字 三.pop()栈方法 四.shift()队列方法 五.splice()操作方法 六.迭代方法 七.p ...

  3. 【JavaScript 基础】-- 数组切割splice和slice

    1.slice(start,end):方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素.(该方法不会改变原数组) 2.splice():该方法向或者 ...

  4. JS截取数组:使用splice()和slice()方法

    splice() 方法 splice() 方法可以添加元素.删除元素,也可以截取数组片段.删除元素时,将返回被删除的数组片段,因此可以使用 splice() 方法截取数组片段. 由于 splice() ...

  5. (1)js数组常用方法 splice()、slice()、push()、unshift()、pop()、shift()、join()、reverse()、sort()、concat()、split()

    splice() 方法向数组中添加,删除 元素,然后返回被删除的元素:会改变原数组. var arr = [1,2,3,4,5,6,7,8,9,10]; var arr1 = arr.splice(0 ...

  6. js数组中splice和slice的区别

    相同点: slice()和splice()都可以用来根据数组的下标截取数组,它们都是数组中的方法. 不同点: 1.slice() slice()方法会返回一个新的数组对象,slice(begin,en ...

  7. JavaScript 截取数组

    ** 截取数组 ** 通过重新定义数组的 length 属性来实现截取 var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; array.length = 4; c ...

  8. JavaScript截取数组常用方法

    1.shif(),删除数组的第一个元素 2.unshift(),在数组的开头添加新元素 3.pop(),删除数组的最后一个元素 4.push(),数组的末尾添加新的元素 5.slice() ,截取数组 ...

  9. 总结JavaScript常用数组操作方法,包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...

最新文章

  1. SecureCRT 遇到一个致命的错误且必须关闭
  2. 前端学习(1645):前端系列实战课程之留言板功能实现
  3. c++中关于初始化型参列表的一些问题
  4. Flask-SQLALchemy 连接数据库
  5. iPhone iPhoneSimulator.platform/Developer/usr/bin/clang++ failed with exit code 1 出现这种错误的原因是...
  6. 游戏筑基开发之结构体(数组、指针)、枚举、共用体、typdef(C语言)
  7. 百度普通收录正式下线,大量草根站长收录难
  8. bitvise terminal 中文乱码
  9. 计算机防止检查清理软件吗,清除电脑垃圾用什么软件好 如何预防电脑卡顿
  10. Milk-Tea解析工具(DJ音乐解析)
  11. 渗透测试-灰鸽子远控木马
  12. SQL Injection的猥琐技巧
  13. 多次调用 BAPI 之后,最后一次性 COMMIT WORK,会有什么问题吗?
  14. kubectl 命令详解(三十三):rollout resume
  15. 3an推客CPC怎么设置?3an推客推广效果怎么样
  16. dns遭到劫持什么意思、dns遭到劫持怎么办有什么方法解决
  17. 希尔伯特黄变换(Hilbert-Huang)原理、HHT求时频谱、边际谱,及MATLAB(2018rb)实现
  18. Appium简介与原理
  19. web前端笔记2js部分
  20. 张量中有关矩阵的Kronecker乘积和Khatri-Rao乘积

热门文章

  1. 【详情页优惠券数据】淘宝app商品详情原数据item_get_app
  2. Js实现简单的计时器功能
  3. CSS-transition-过渡特效
  4. Vue-app之H5基于Vue初始化一个移动端项目H5APP
  5. adb shell 命令大全
  6. 交通运输部办公厅关于印发《智慧交通让出行更便捷行动方案(2017—2020年)》的通知...
  7. 米晓彬获IT博客《北京欢迎你》最佳歌手奖
  8. saltstack中grains详解
  9. 如何使用Python访问和查询Google BigQuery数据
  10. 关于host文件配置,hosts配置的作用,多个域名对应一个ip