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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JS继承用法实例分析
Feb 05 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
Vue项目环境搭建详细总结
Sep 26 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-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
使用python实现画AR模型时序图
2019/11/20 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
网站编辑求职信
2013/10/17 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
导游词之河北邯郸
2019/09/12 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫