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 相关文章推荐
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
深入理解node.js http模块
Jan 24 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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 一个比较完善的简单文件上传
2010/03/25 PHP
php5.3 废弃函数小结
2010/05/16 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
利用python获得时间的实例说明
2013/03/25 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Django 批量插入数据的实现方法
2020/01/12 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Django 返回json数据的实现示例
2020/03/05 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
从python读取sql的实例方法
2020/07/21 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
医院总经理岗位职责
2014/02/04 职场文书
2014年政教处工作总结
2014/12/20 职场文书
三方合作意向书范本
2015/05/09 职场文书
初中语文教学随笔
2015/08/15 职场文书
初中政治教学反思
2016/02/23 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python