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函数般调用正则
Apr 08 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
详解JavaScript 作用域
Jul 14 Javascript
Node.JS如何实现JWT原理
Sep 18 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检测用户语言的方法
2015/06/15 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
会计专业导师推荐信
2014/03/08 职场文书
英文推荐信格式范文
2014/05/09 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
扬州个园导游词
2015/02/06 职场文书
教师年度考核个人总结
2015/02/12 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
早恋主题班会
2015/08/14 职场文书