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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
js常用DOM方法详解
Feb 04 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Node.js Express安装与使用教程
May 11 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 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实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php的socket编程详解
2016/11/20 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
安装docker-compose的两种最简方法
2019/07/30 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
旷课检讨书大全
2014/01/21 职场文书
大专生自我评价
2014/01/28 职场文书
幼儿园家长寄语
2014/04/02 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2015暑假假期总结
2015/07/13 职场文书
七夕情人节问候语
2015/11/11 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
python中sys模块的介绍与实例
2021/04/17 Python