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 相关文章推荐
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 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
PHP开发大型项目的一点经验
2006/10/09 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
用ODBC的分页显示
2006/10/09 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Python 递归函数详解及实例
2016/12/27 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
新闻专业推荐信范文
2013/11/20 职场文书
党校学习自我鉴定
2014/02/24 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
公务员个人总结
2015/02/12 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
小学数学教师研修日志
2015/11/13 职场文书