Javascript数组的 splice方法介绍
Javascript数组的 splice 方法介绍
splice()
方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
语法格式
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
参数
start
必选指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于
array.length-n
);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。deleteCount
可选整数,表示要移除的数组元素的个数。如果
deleteCount
大于start
之后的元素的总数,则从start
后面的元素都将被删除(含第start
位)。如果deleteCount
被省略了,或者它的值大于等于array.length - start
(也就是说,如果它大于或者等于start
之后的所有元素的数量),那么start
之后数组的所有元素都会被删除。如果deleteCount
是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。item1, item2, *...*
可选要添加进数组的元素,从
start
位置开始。如果不指定,则splice()
将只删除数组元素。
返回值
由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
描述
如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变。
牛刀小试
现在有一个场景,我和我的室友们,现在在一个数组里面。 按照排行分别为: 老大,老二,老三, … ,老六, 小七.
这里 我用 下面的数组进行举例
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank','Guan laowu','Yang laoliu','Li xiaoqi'];
删除元素
删除一个元素,删除 某个位置的元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];// start 开始位置,从零开始 , deleteCount 删除个数,从1 开始
// arr.splice(start,count)
// 删除第0位置的一个元素
arr.splice(0,1);
console.log('arr=',arr);
可以看到 第0号位置 'Liu laoda'
被删除了。
删除前面两个元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// 删除 前两个元素
arr.splice(0,2);
console.log('arr=',arr); // ['Wei laosan', 'Frank']
添加元素 并且替换元素
splice 删除元素后 会返回被删除的元素,返回类型是一个 Array 类型.
example1
这里可以进行元素替换,替换之后直接会影响 原来的数组的。返回的是删除的数组元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];// 添加元素,删除元素 用 Guan laowu 替换掉
// 从1号位置删除一个元素,插入 元素 'Guan laowu'
// 返回被删除的元素
console.log('before arr=',arr);
var removed = arr.splice(1, 1, 'Guan laowu');
console.log('arr=',arr);
console.log('removed=',removed); // removed.constructor.name == Array
example2
删除的个数和添加的元素的个数可以是不一样的。
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
console.log('before arr=',arr);
// 删除 idx=1的元素,并且 添加 在此位置 依次添加4个元素。
var removed = arr.splice(1, 1, 'Guan laowu','A','B','C');
console.log('arr=',arr);
console.log('removed=',removed); // removed.constructor.name == Array
example3
删除元素的例子,如果没有在第三个参数上有任何元素,则表示删除元素了。
start 开始位置 ,deleteCount 删除个数,如果删除的个数大于数组本身长度,则全部删除了。
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];
console.log('before arr=', arr);
// 从数组 下标为2的位置, 删除3个元素
var removed = arr.splice(2, 3); // ['Wei laosan', 'Frank', 'Guan Laowu']
console.log('arr=', arr); //['Liu laoda', 'Li laoer', 'Yang Laoliu', 'Li xiaoqi']
console.log('removed=', removed);// ['Wei laosan', 'Frank', 'Guan Laowu']
注意这里删除元素 直接对原来的数组修改, 返回值 就是删除的元素的数组。
同时数组的length 属性,维护成正确的值。
example4
如果删除的元素个数,超过了后面到数组的最大长度,则后面的元素全部被删除了。
比如 从下标2 后面有 5个元素, 此时 deleteCount = 10 ,那么 后面的元素下标>=2 ,全部删除掉
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];console.log('before arr=', arr);// 从数组 下标为2的位置, 删除10个元素var removed = arr.splice(2, 10); // ['Wei laosan', 'Frank', 'Guan Laowu']console.log('arr=', arr); // ['Liu laoda', 'Li laoer']console.log('removed=', removed);// ['Wei laosan', 'Frank', 'Guan Laowu', 'Yang Laoliu', 'Li xiaoqi']
添加元素
example1
在idx=2 的位置 添加 ‘Frank’ 元素,
此时 只要把 deleteCount = 0,表示 删除0个元素 ,表示在此位置上添加元素。
var arr = ['Liu laoda','Li laoer','Wei laosan',];
console.log('before arr=',arr);
// 在 idex=2 的位置 添加 'Frank' 元素
var removed = arr.splice(2, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed);
example2
在数组的头部添加元素, Frank
var arr = ['Liu laoda','Li laoer','Wei laosan',];
console.log('before arr=',arr);
// 在 idex=0 的位置 添加 'Frank' 元素
var removed = arr.splice(0, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed); // []
在数组尾部添加元素, Frank
var arr = ['Liu laoda','Li laoer','Wei laosan'];
console.log('before arr=',arr);
// 在数组 尾部 添加 Frank
var removed = arr.splice(arr.length, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed); // []
负数索引支持
删除后面两个元素
// 负数索引
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 删除后两个元素
var removed = arr.splice(-2);
console.log('arr=', arr); // ['Liu laoda', 'Li laoer', 'Wei laosan']
console.log('removed=', removed); // ['Frank', 'Guan Laowu']
删除数组最后一个元素
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 删除后1个元素
var removed = arr.splice(-1);
console.log('arr=', arr); // ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank']
console.log('removed=', removed); // ['Guan Laowu']
总结一下
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
这个函数 可以实现 对数组的增加,删除 ,替换。
start 就是开始的下标位置,必选参数.
deleteCount 删除多少个元素 , 如果没有指定那么 一直会删除到数组的最后位置。
最后 一个参数,表示 删除后要填充其他的元素,如果要就写入填入的元素即可。如果不需要,就是单纯的删除元素。
参考链接
MDN array splice
分享快乐,留住感动. '2022-04-05 19:35:10' --frank
Javascript数组的 splice方法介绍相关推荐
- Javascript 数组求和的方法
1.应用场景 主要用于数组求和. 2.学习/操作 JavaScript 数组求和的方法 var array = [1, 2, 3, 4, 5]; var sum = 0; 1.for循环 for (l ...
- -js中json数组 以表格形式_为什么js类数组加上splice方法就是数组形式,不加就是对象形式?...
var array_like = {};array_like[0] = "test 0";array_like[1] = "test 1";array_like ...
- JavaScript数组常用的方法总结
导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者数组,下面对常用的数组的使用方法进行总结,方便在开发中手到擒来! ...
- Javascript数组常见的方法
分为两种:原型(实例)方法和静态函数 第一类:原型方法: 栈方法(后进先出) push 参数:任意个 作用:将任意数量的参数逐个添加到数组尾部 返回值: 新数组的长度 影响:破坏了原数组 pop 参数 ...
- JavaScript数组属性和方法
数组 字面量声明数组 let arr = [1,2,3,4] 构造函数声明数组 let arr = new Array(1,2,3) arr[0] = "a" arr[1] = & ...
- JavaScript数组内置方法-知识
/* * 数组中常用的内置方法:基于这些方法可以让我们有效的对数组进行操作 * console.dir(Array.prototype) 查看数组内置方法 ...
- 【基础恶补】JavaScript数组的一些方法,reduce,filter,reverse,map等
reduce reduce方法会对数组中的每个元素按序执行由你提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值. 用法,两个参数cal ...
- Jquery遍历数组之$.inArray()方法介绍
$.inArray()函数用于在数组中搜索指定的值,并返回其索引值.如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值,array是被查 ...
- javascript数组查重方法总结
文章参考地址:http://blog.csdn.net/chengxuyuan20100425/article/details/8497277 题目 对下列数组去重: var arr = ['aa', ...
最新文章
- CSS布局之品字布局
- 互联网团队协作:可追溯【连载三】
- yum -y --downloadonly --downloaddir=/ruiy upggrde;
- 算法习题---线性表之单链表逆序打印
- PL/SQL复合数据类型
- 程序员过关斩将--请不要误会redis 6.0 的多线程
- 将Spring集成到旧版应用程序中
- AVFoundation – AVAsset 加载媒体
- Redis 中的过期元素是如何被处理的?「视频版」——面试突击 002 期
- 机器学习 —— 概率图模型(推理:采样算法)
- 乔致庸晚年有白银一千万两,相当于现在多少钱?
- android 外接键盘 五笔 百度输入法
- Python实现QQ游戏连连看外挂秒杀
- 面试mysql索引底层_面试必备之MYSQL索引底层原理分析
- 【Echarts】Echarts给title添加背景图片
- 决斗小游戏代码html,《游戏王:决斗链接》的基础玩法介绍
- 汇编--call和ret指令
- 凡人修真3D(1)坐骑
- java关键字的用法_JAVA总结(一)-----关键字分类及使用
- 采集到竞争对手公司信息的10个经典方法
热门文章
- csv文件导入mysql乱码解决
- 【ShawnZhang】带你看蓝桥杯—— 算法提高 阮小二买彩票
- 伦敦地铁不再拥挤的原因是?TfL利用Wi-Fi 追踪用户位置
- 苹果悬浮球_使用iPhone手机,还不知道悬浮球功能?难怪被说成土鳖
- Windows Azure pack 升级填坑路--1 (SC2012R2套件升级)
- 弘辽科技:想要成为优秀的直通车手,这些知识你一定要知道。
- Spark报错:The pivot column feature has more than 10000 distinct values
- 蓝图类型(6) —— 关卡蓝图
- JAVA抓取中国外汇交易中心各币别对RMB汇率
- 前端js实现路由切换页面 pushState replaceState