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 相关文章推荐
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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中将网址转换为超链接的函数
2011/09/02 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
jquery实现excel导出的方法
2013/04/04 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python读写文件方法总结
2015/06/09 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
护士自荐信范文
2013/12/15 职场文书
文体活动实施方案
2014/03/27 职场文书
工商干部先进事迹
2014/05/14 职场文书
2015年统战工作总结
2015/05/19 职场文书
博物馆观后感
2015/06/05 职场文书
在js中修改html body的样式
2021/11/11 Javascript
python数字类型和占位符详情
2022/03/13 Python