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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
php流量统计功能的实现代码
2012/09/29 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
python GUI实例学习
2017/11/21 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
大学军训自我鉴定
2013/12/15 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
《四季》教学反思
2014/04/08 职场文书
初中学校对照检查材料
2014/08/19 职场文书
死者家属慰问信
2015/03/24 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
小学庆六一主持词
2015/06/30 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书