·

JavaScript中数组元素删除的八种方法汇总

Published at 2024-08-28 17:21:32Viewed 94 times
Professional article
Please reprint with source link

在JavaScript中,Array类型是非常常用的类型。与其他语言的数组不同,JavaScript给Array数组提供了大量的方法,因此在JavaScript中,对数组进行操作其实非常灵活。在本文中,我总结了一下JavaScript中Array删除的方法。

一、length

JavaScript中Array的length属性非常有特点一一它不是只读的。因此,通过设置这个属性可以从数组的末尾移除项或添加新项,请看下面例子:

//移除元素
var arr=[1,2,3,4];   //创建一个包含4个数字的数组
arr.length = 2;
console.log(arr);  //[1, 2]

//添加元素
var arr=[1,2,3,4];   //创建一个包含4个数字的数组
arr.length = 5;
console.log(arr);  //[1, 2, 3, 4, undefined]
console.log(arr[4]) //undefined

二、delete关键字

JavaScript本身的delete关键字,可以用来删除(清除)数组元素。

var arr = [1, 2, 3, 4];
delete arr[0];

console.log(arr);   //[undefined, 2, 3, 4]

可以看出来,delete删除之后数组长度不变,只是被删除元素被置为undefined了。

三、pop()方法

调用pop()方法会删除数组最后一个元素,并返回删除的元素。

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

四、shift()方法

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

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

五、splice()方法

splice()恐怕要算最强大的数组方法了,他的用法有很多种,在此只介绍删除数组元素的方法。在删除数组元素的时候,它可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除的项数,例如splice(0, 2)会删除数组中的前两项。

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

可以看出来,splice()方法会改变原数组。

六、slice() 方法

slice () 方法可从已有的数组中返回选定的元素,并且不会改变原数组。

var arr = [1, 2, 3, 4];
let newArr = arr.slice(1,3)
// arr => [1, 2, 3, 4]
// newArr => [2, 3]

七、迭代方法

所谓的迭代方法,就是用循环迭代数组元素,发现符合条件要删除的项则删除。用的最多的地方可能是数组中的元素为对象的时候,根据对象的属性例如ID等等来删除数组元素。下面介绍两种方法:

1. for循环

let index = 3, // 删除的id
let arr = [1,2,3,4,5],
let newArr = [];

for (let i = 0; i < arr.length; i++) {
    if (i !== index) {
        newArr.push(arr[i])
    }
}

// arr => [1,2,3,4,5]

// newArr => [1,2,3,5]

2. filter()方法

var arr = [1, 2, 3, 4];
arr = arr.filter(x=>x!=2)    //[1, 3, 4]

八、Set()方法

var arr = [1, 2, 3, 4];
let newSet = new Set(arr)    //{1, 2, 3, 4}
newSet.delete(1)
let newArr = [...newSet]    // newArr => [2, 3, 4]


Comments

There is no comment, let's add the first one.

弦圈热门内容

[antd: Message] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.

I'm getting this error when using MessageWarning: [antd: Message] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.Here is my code:import { message } from 'antd'; export default function Page() { const [messageApi, contextHolder] = message.useMessage(); const res = await fetch("/api/...", { method: "POST", }); if (!res.ok) { messageApi.error("Error! Fail to login!"); } return ( &lt;Home&gt; ... &lt;/Home&gt; ) }

Get connected with us on social networks! Twitter

©2024 Guangzhou Sinephony Technology Co., Ltd All Rights Reserved