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页面滚动浮动层智能定位实例代码
Aug 23 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
js实现简单点赞操作
Mar 17 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python ddt实现数据驱动
2018/03/14 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
使用python绘制二维图形示例
2019/11/22 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
内科护士节演讲稿
2014/09/11 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
文明班级申报材料
2014/12/24 职场文书
感恩母亲节活动总结
2015/02/10 职场文书