搜索
首页web前端前端问答es6 数组怎么移除元素

es6 数组怎么移除元素

Jan 11, 2023 pm 03:51 PM
es6js数组

方法:1、用shift()删除第一个元素,语法“数组.shift()”;2、用pop()删除最后一个元素,语法“数组.pop()”;3、用splice()删除任意位置的元素,语法“数组.splice(位置,个数)”;4、用length删除尾部的N个元素,语法“数组.length=原数组长度-N”;5、直接赋予空数组“[]”来清空元素;6、用delete删除指定下标的一个元素。

es6 数组怎么移除元素

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

方法1:使用shift()函数删除第一个数组元素

array.shift()函数可以把数组的第一个元素从其中删除,并返回第一个元素的值;然后将余下所有元素前移 1 位,以填补数组头部的空缺。

var a = [1,2,3,4,5,6,7,8];  //定义数组
a.shift();
console.log(a);

输出结果为:

es6 数组怎么移除元素

注:shift()方法会改变原数组,修改数组的长度!

方法2:使用pop()删除最后一个数组元素

array.pop()方法可以删除数组 array 中最后一个元素,并返回被删除的元素。

var a = [1,2,3,4,5,6,7,8];  //定义数组
a.pop();
console.log(a)

输出结果为:

es6 数组怎么移除元素

注:pop()方法也会改变原数组,修改数组的长度!

方法3:使用 splice() 删除任意位置的元素

使用splice()可以从指定下标位置开始删除一个或多个元素。

删除元素的语法:

array.splice(index,howmany)
  • 第1个参数 index 可以指定起始下标位置(即开始删除元素的位置);

  • 第2个参数 howmany 指定应该删除的元素数目(即需要删除的一个或多个元素)。

只需要将第2个参数 howmany 设置为1,即删除任意index位置的一个元素。

我们通过下面的例子来具体看看:

var arr= [1,2,3,4,5];
console.log(arr);

arr.splice(1,1);
console.log(arr);

es6 数组怎么移除元素

利用splice() 方法我们也可以实现在数组开头和末尾删除元素的操作:

  • 如果想要在数组开头删除元素,就设置该方法第1个参数index的值为0即可

var arr= [1,2,3,4,5];
console.log(arr);

arr.splice(0,1);
console.log(arr);

es6 数组怎么移除元素

  • 如果想要在数组末尾删除元素,就设置该方法第1个参数index的值为负数,那么就会按绝对值从数组右侧开始向左侧定位;且第2个参数 howmany的值要 等于 index的值。

var arr= [1,2,3,4,5];
console.log(arr);

//从倒数第1个元素开始,截取1个元素
arr.splice(-1,1);
console.log(arr);

es6 数组怎么移除元素

方法4:利用length属性删除数组元素(甚至清空元素)

数组的length属性一般是用来设置或返回数组中元素的数目,即设置或返回数组长度。

我们可以利用设置数组长度的特性,将length属性的设置的比原长度小,即可从数组尾部删除一个或多个元素;如果值设置为0,就会删除全部数组,即清空数组!

语法:数组对象.length=原数组长度-1;

示例1:

var a = [1,2,3,4,5,6,7,8];  //定义数组
console.log(a)
a.length=7;
console.log(a)

es6 数组怎么移除元素

示例2:

var a = [1,2,3,4,5,6,7,8];  //定义数组
console.log(a)
a.length=0;
console.log(a)

es6 数组怎么移除元素

方法5:直接赋予空数组[]

直接赋予空数组[]就会将之前的元素全部清空。

var arr=new Array(1,2,3,4,5,6,7,8,9,10);
console.log(arr);
arr=[];
console.log(arr);

es6 数组怎么移除元素

这种方法并不是严格意义的清空数组,只是将arr重新赋值为空数组。

方法6:利用delete运算符删除指定下标的一个元素

我们都知道数组中的每个元素都有一个序号,这个序号从0开始,被称为下标(Index)。根据这个数组下标,我们可以使用 数组名[下标] 的形式来访问指定下标的元素。

访问到指定元素后,就可以利用 delete运算符 来删除该元素,但数组长度不会发生改变;删除后的该元素会变为空位元素,

var arr=new Array("香蕉","苹果","梨子","橙子","橘子","榴莲");
console.log(arr);

delete arr[1];  //删除下标为1的元素(第二个元素)
console.log(arr);

es6 数组怎么移除元素

空位元素可以读写,length 属性不排斥空位,空元素位返回值为 undefined

console.log(arr[1]);

es6 数组怎么移除元素

说明:空元素与元素的值为 undefined 是两个不同的概念,即使空元素的返回值也是 undefined。JavaScript 在初始化数组时,只有真正存储有值得元素才可以分配内存。

【相关推荐:javascript视频教程web前端

以上是es6 数组怎么移除元素的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
了解usestate():综合反应国家管理指南了解usestate():综合反应国家管理指南Apr 25, 2025 am 12:21 AM

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

使用React的优点是什么?使用React的优点是什么?Apr 25, 2025 am 12:16 AM

ReactispupularduetoItsComponent基于结构结构,虚拟,Richecosystem和declarativentation.1)基于组件的harchitectureallowslowsforreusableuipieces。

在React中调试:识别和解决共同问题在React中调试:识别和解决共同问题Apr 25, 2025 am 12:09 AM

todebugreactapplicationsefectefectionfection,usethestertate:1)proppropdrillingwithcontextapiorredux.2)使用babortControllerToptopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRaceeDitions.3)intleleassynChronOusOperations.3)

反应中的usestate()是什么?反应中的usestate()是什么?Apr 25, 2025 am 12:08 AM

usestate()inrectallowsStateMangementInfunctionalComponents.1)ITSimplifiestTateMempement,MakecodeMoreConcise.2)usetheprevcountfunctionToupdateStateBasedonitspReviousViousViousviousviousVious.3)

usestate()与用户ducer():为您的状态需求选择正确的挂钩usestate()与用户ducer():为您的状态需求选择正确的挂钩Apr 24, 2025 pm 05:13 PM

selectUsestate()forsimple,独立的StateVariables; useusereducer()forcomplexstateLogicorWhenStatedIppedsonPreviousState.1)usestate()isidealForsImpleUpdatesLikeTogGlikeTogGlikGlingaBglingAboolAboolAupDatingAcount.2)

使用usestate()管理状态:实用教程使用usestate()管理状态:实用教程Apr 24, 2025 pm 05:05 PM

useState优于类组件和其它状态管理方案,因为它简化了状态管理,使代码更清晰、更易读,并与React的声明性本质一致。1)useState允许在函数组件中直接声明状态变量,2)它通过钩子机制在重新渲染间记住状态,3)使用useState可以利用React的优化如备忘录化,提升性能,4)但需注意只能在组件顶层或自定义钩子中调用,避免在循环、条件或嵌套函数中使用。

何时使用usestate()以及何时考虑替代状态管理解决方案何时使用usestate()以及何时考虑替代状态管理解决方案Apr 24, 2025 pm 04:49 PM

useUsestate()forlocalComponentStateMangementighatighation; 1)usestate()isidealforsimple,localforsimple.2)useglobalstate.2)useglobalstateSolutionsLikErcontExtforsharedState.3)

React的可重复使用的组件:增强代码可维护性和效率React的可重复使用的组件:增强代码可维护性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionComponcontRossDifferentPartsofanApplicationorprojects.1)heSredunceReDunceNundSimplifyUpdates.2)yessistensistencyInusErexperience.3)

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境