博主信息
笑颜常开的博客
博文
61
粉丝
0
评论
0
访问量
28055
积分:0
P豆:211.5

JS数组的常用函数(slice()和splice())—2019年1月16日

2019年02月14日 18:03:05阅读数:434博客 / 笑颜常开的博客/ 前端知识

    使用slice()和splice()可以对数组进行增删查改操作。计算机编程中一般是从0开始计数,例如:Array[0]表示数组中第一个元素。

示例代码与运行结果

1、slice函数的删除操作(不会改变原始数组)

       slice函数有两个参数:第一个参数声明删除元素的起始位置(必选),第二个参数声明删除元素的终止位置(可选)。参数是正数代表顺序,参数是负数代表逆序。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

       举个两个例子,两个例子都实现了相同的功能。

       第一个例子。首先,定义一个数组arr[1,2,3,4,5,6]。然后,使用slice函数删除数组arr第2个至第5个元素。在Chrome浏览器中的console控制台中输入以下代码:

var arr=[1,2,3,4,5,6];
arr.slice(1,4);

运行结果如下:

捕获.PNG

       第二个例子。首先,定义一个数组arr[1,2,3,4,5,6]。然后,使用slice函数删除数组arr第2个至倒数第二个元素。在Chrome浏览器中的console控制台中输入以下代码:

var arr=[1,2,3,4,5,6];
arr.slice(1,-2);

运行结果如下:

捕获.PNG


2、splice函数的增删查改操作(会改变原始数组)

       splice函数有三个参数:第一个参数声明删除元素的起始位置(必选),第二个参数声明要删除的元素个数(必选),第三个参数声明向数组添加的新项目(可选)。参数是正数代表顺序,参数是负数代表逆序。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

(1)第二个参数设置为0,就可以向数组中增加一个元素。有如下例子。

       首先,定义一个数组arr[1,2,3,4,5,6]。然后,使用splice函数在第三个元素中插入字符串'js'。在Chrome浏览器中的console控制台中输入以下代码:

  var arr=[1,2,3,4,5,6];
  arr.splice(2,0,'js');
  arr

运行结果如下:

捕获.PNG

(2)第二个参数设为非0值,就可以删除数组中的元素。有如下例子。

      首先,定义一个数组arr[1,2,3,4,5,6]。然后,使用splice函数在从五个元素开始删除两个元素。在Chrome浏览器中的console控制台中输入以下代码:

  var arr=[1,2,3,4,5,6];
  arr.splice(4,2);
  arr

运行结果如下:

捕获.PNG

(3)第三个参数设为1,就可以更新数组中的元素。更新其实是先删除再添加元素。有如下例子。

      首先,定义一个数组arr[1,2,3,4,5,6]。然后,使用splice函数把三个元素从数字3更新为字符串'css'。在Chrome浏览器中的console控制台中输入以下代码:

  var arr=[1,2,3,4,5,6];
  arr.splice(2,1,'css');
  arr

运行结果如下:

捕获.PNG

       手写代码

QQ图片20190210154304.jpg

 

    总结

1、slice函数可从已有的数组中返回选定的元素(不会改变原始数组)。

语法:arrayObject.slice(start,end)

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

2、splice函数向从数组中添加/删除项目,然后返回被删除的项目(会改变原始数组)。

语法:arrayObject.splice(index,howmany,item1,.....,itemX)

参数意义:(1)index参数必选。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

(2)howmany参数可选。要删除的项目数量。如果设置为 0,则不会删除项目。

(3)item1,.....,itemX参数可选。向数组添加的新项目。

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论