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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 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页面中文乱码分析
2013/10/29 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python计算日期之间的放假日期
2018/06/05 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python框架flask表单实现详解
2019/11/04 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
python中怎么表示空值
2020/06/19 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
市场部专员岗位职责
2013/11/30 职场文书
蓝颜请假条
2014/04/11 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书