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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
javascript运行机制之执行顺序理解
Aug 03 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
SONY ICF-F10中波修复记
2021/03/02 无线电
MySQL相关说明
2007/01/15 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
环境建设实施方案
2014/03/14 职场文书
2014年母亲节寄语
2014/05/07 职场文书
2014年团工作总结
2014/11/27 职场文书
解除租房协议书
2014/12/03 职场文书
个人自荐书范文
2015/03/09 职场文书
让子弹飞观后感
2015/06/11 职场文书
物业管理交接协议书
2016/03/24 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android