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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
jQuery autocomplete插件修改
Apr 17 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
babel基本使用详解
Feb 17 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
MySQL中create table语句的基本语法是
2007/01/15 PHP
php 读取文件乱码问题
2010/02/20 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
JS的document.all函数使用示例
2013/12/30 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
一年级语文教学反思
2014/02/13 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
通知书大全
2015/04/27 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书