JS在Array数组中按指定位置删除或添加元素对象方法示例


Posted in Javascript onNovember 19, 2019

JavaScript的数据中可通过splice/slice在指定位置添加或删除元素。另外还有slice、delete等方法实现。

splice简介

splice方法向/从数组中添加/删除项目,然后返回被删除的项目。 该方法会改变原始数组。

arrayObject.splice(index, howmany, item1, ..., itemX)

参数 描述

index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。

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

使用示例

删除第3个元素

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

删除开始的3个元素

var arr = [1, 2, 3, 4, 5];
arr.splice(0, 3);
console.log(arr); //[4, 5]

在第2个元素后,添加新数字 9

var arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 9);
console.log(arr) //[1, 2, 9, 3, 4, 5]

Array.insert 添加

借助splice可以在array上面添加一个原生的insert方法,直接操作数组:

Array.prototype.insert = function(index) {
 index = Math.min(index, this.length);
 arguments.length > 1
 && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
 && this.insert.apply(this, arguments);
 return this;
};

使用示例

var arr = [1, 2, 3, 4, 5];
arr.insert(2, -1, -2, -3);
console.log(arr); // [1, 2, -1, -2, -3, 3, 4, 5]

Array.remove 删除

也可以用slice在array上面添加一个原生的remove方法

Array.prototype.remove = function(from, to) {
 var rest = this.slice((to || from) + 1 || this.length);
 this.length = from < 0 ? this.length + from : from;
 return this.push.apply(this, rest);
};

使用,删除第3个元素

var arr = [1, 2, 3, 4, 5];
arr.remove(2); //第3个元素索引是2
console.log(arr); //[1, 2, 4, 5]

这里使用了slice方法,简介如下:

slice简介

slice() 方法可从已有的数组中返回选定的元素。 返回一个新数组,不修改原有数组。

arrayObject.slice(start,end)

参数描述

start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery 操作/获取table具体代码
Jun 13 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
浅谈关于iview表单验证的问题
Sep 29 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 #Javascript
VUEX-action可以修改state吗
Nov 19 #Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
webpack常用配置总览(小结)
Nov 18 #Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 #Javascript
You might like
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
Shell编程面试题
2012/05/30 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
大学生思想汇报范文
2013/12/31 职场文书
运动会入场式解说词
2014/02/18 职场文书
开业庆典主持词
2014/03/21 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle
HTML中的表格元素介绍
2022/02/28 HTML / CSS