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栏目列表隐藏/显示简单实现
Apr 03 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
vue使用codemirror的两种用法
Aug 27 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中数组首字符过滤功能代码
2012/07/31 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
Python的requests网络编程包使用教程
2016/07/11 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
个人简历自我评价八例
2013/10/31 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
前台接待员岗位职责
2014/01/02 职场文书
卖房协议书
2014/04/11 职场文书
争先创优心得体会
2014/09/12 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2015年国培研修感言
2015/08/01 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
python中 Flask Web 表单的使用方法
2022/05/20 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python