JavaScript中splice方法的使用「建议收藏」

JavaScript中splice方法的使用「建议收藏」JavaScript中splice方法的使用splice的基本用法删除操作插入操作替换操作splice一次性删除多个元素splice的基本用法在JavaScript中,arrObject.splice()方法是处理数组的利器,利用它可以实现在指定位置删除、替换、插入指定数量的元素。其语法为:arrayObject.splice(index,howmany,item1,…,itemX)含义为从index开始,删除howmanry个元素,并在原地插入item1,…,itemN,最后返回被删除的数组


Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

splice的基本用法

在JavaScript中,arrObject.splice()方法是处理数组的利器,利用它可以实现在指定位置删除、替换、插入指定数量的元素。
其语法为: arrayObject.splice(index,howmany,item1,…,itemX)
含义为从index开始,删除howmanry个元素,并在原地插入item1, …, itemN,最后返回被删除的数组。

删除操作

let myArray=["html","css","javascript","jQuery"];
let myDel=myArray.splice(1,1);   //从索引1开始删除1个元素
console.log(myArray)      //['html','javascript','jQuery'];
console.log(myDel);   //['css']

插入操作

执行插入操作时,第二个参数howmanyt传入0即可。

let myArray=["html","css","javascript","jQuery"];
let myDel=myArray.splice(1,0,'html5','css3');   //从索引1开始,删除0个元素,然后插入'html5'和css3
console.log(myArray)      //['html','css','html5','css3','javascript','jQuery'];

替换操作

执行替换操作时,第二个参数howmary传入几,后面就添加几个元素,则为替换操作。

let myArray=["html","css","javascript","jQuery"];
let myDel=myArray.splice(0,2,'html5','css3');   //从索引1开始,删除2个元素,然后插入'html5'和css3
console.log(myArray)      //['html5','css3','javascript','jQuery'];

splice一次性删除多个元素

通过判断数组中的所有元素,删除满足特定条件的元素。大部人想到的是使用循环语句,再配合splice方法。但此操作存在一个问题,在循环数组体内使用array.splice()方法删除一个元素后,会导致循环数组的下标发生改变,从而该方法无效。

//案例:删除数组中值为1的无素
let myArray=[1,2,3,1,1,1,4,5,6];
for(let i=0;i<myArray.length;i++){
	if(myArray[i]==1){
		myArray.splice(i,1);
	}				
}
console.log(myArray)    //2,3,1,4,5,6,此答案错误

解决方法1:将数组改为倒着循环

let myArray=[1,2,3,1,1,1,4,5,6];
for(let i=myArray.length-1;i>=0;i--){
	if(myArray[i]==1){
		myArray.splice(i,1);
	}				
}
console.log(myArray)    //2,3,4,5,6

解决方法2:使用Array的filter()方法

let myArray=[1,2,3,1,1,1,4,5,6];
myArray=myArray.filter(item => item!=1);
console.log(myArray)    //2,3,4,5,6	
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/194113.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 2022年最新前端面试题,持续更新「建议收藏」

    2022年最新前端面试题,持续更新「建议收藏」2022年最新前端面试题适合初/中级前端开发工程师

    2022年10月17日
  • RecyclerView 实现横向滚动效果

    RecyclerView 实现横向滚动效果我相信很久以前,大家在谈横向图片轮播是时候,优先会选择具有HorizontalScrollView效果和ViewPager来做,不过自从Google大会之后,系统为我们提供了另一个控件RecyclerView。RecyclerView是listview之后的又一利器,它可以实现高度的定制。今天就利用RecyclerView实现我们需要的相册效果。先上一个图:主要实现就是一个RecyclerView

    2022年9月18日
  • 微信小程序轮播图实现 含小圆点 图片下方显示标题

    微信小程序轮播图实现 含小圆点 图片下方显示标题实现结果html代码<viewclass=”lb”><swiperindicator-dots=”true”autoplay=”true”interval=”3000″current=”0″circular=”true”style=”width:100%;”><swiper-item><imagesrc=”../image/im1.jpg

    2022年5月11日
  • fflush与fsync

    fflush与fsync区别:1、头文件不同fflush包含在头文件中;fsync包含在头文件中;2、参数不同fflush函数原型是:intfflush(FILE*fp);   即,fflush的参数时文件指针。fsync函数原型是:intfsync(intfd);   即,fsync的参数时文件描述符。2、应用层次不同fflush函数应用于用户层,将C语言函数库中的函数提

    2022年5月27日
  • 数据库 casewhen 的用法「建议收藏」

    数据库 casewhen 的用法「建议收藏」select[Id],[TrainNumber],[SupplierId],casewarehouseTypewhen0then[Amount]else[Amount]*-1endasIsOut//数据对比,[Amount],[ClassId],[WarehouseType],[Remark],[SetInDate]fromWWeiqinWarehousing

    2022年9月6日
  • unity3d的入门教程_unity菜鸟教程

    unity3d的入门教程_unity菜鸟教程Unity3D新手入门初级教程U3D是由UnityTechnologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。可发布游戏至Windows、Mac、Wii、iPhone、Windowsphone8和Android平台。也可以利用Unitywebplayer插件发布网页游戏,支持Mac和Windows的网页浏览。它的网页播放器也被Macwidgets所支持!U3D现已经占领了国内85%的手游

    2022年9月19日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号