js删除数组中指定元素的几种方式

更新时间：2023年01月29日 09:50:38 作者：zhangwenok

js数组是js部分非常重要的知识，有时我们有这么个需求js数组删除指定元素,下面这篇文章主要给大家介绍了关于js删除数组中指定元素的几种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、删除第一个元素

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

注意：此方法改变数组的长度！

提示: 移除数组末尾的元素可以使用 pop() 方法。

let arr = [1,2,3,4,5]
arr.shift()  // 1
// arr => [2,3,4,5]

2、slice() 方法可从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

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

3、splice() 方法用于添加或删除数组中的元素。

注意：这种方法会改变原始数组。

返回值

如果删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组。

let arr = [1,2,3,4,5]
let newArr = arr.splice(0, 1)
// arr => [2,3,4,5]
// newArr => [1]

二、删除最后一个元素

1、pop() 方法用于删除数组的最后一个元素并返回删除的元素。

注意：此方法改变数组的长度！

提示：移除数组第一个元素，请使用 shift() 方法。

let arr = [1,2,3,4,5]
arr.pop() //  5
// arr => [1,2,3,4]

2、slice() 方法

let arr = [1,2,3,4,5]
let newArr = arr.slice(0, arr.length - 1)
// arr => [1,2,3,4,5]
// newArr => [1,2,3,4]

3、 splice() 方法用于添加或删除数组中的元素。

let arr = [1,2,3,4,5]
let newArr = arr.splice(arr.length - 1, 1)
// arr => [1,2,3,4]
// newArr => [5]

三、删除数组中某个指定下标的元素

1、splice 删除

let index = 3
let arr = [1,2,3,4,5]
 arr.splice(index, 1) // [4]
// arr => [1,2,3,5]

2、for循环删除

let index = 3, // 删除的id
    arr = [1,2,3,4,5],
    arrLen = arr.length,
    newArr = [];
 
for (let i = 0; i < arrLen; i++) {
    if (i !== index) {
        newArr.push(arr[i])
    }
}
 
// arr => [1,2,3,4,5]
// newArr => [1,2,3,5]

3、delete删除

JavaScript提供了一个delete关键字用来删除（清除）数组元素。

要注意的是，使用delete删除元素之后数组长度不变，只是被删除元素被置为empty了。

let index = 3
let arr = [1,2,3,4,5]
delete arr[index] 
// arr  = > [1, 2, 3, empty, 5]

四、删除数组中某个指定元素

1、splice 删除

let value = 'b',
    arr = ['a','b','c','d']
 
arr.splice(arr.indexOf(value), 1) // ['b']
// arr => ['a','c','d']

2、filter 删除

var arr = ['a','b','c','d'],
    value = 'b'
 
arr = arr.filter(item => item != value)
// arr => ['a','c','d']

3、for 删除

let value = 'b',
    arr = ['a','b','c','d'],
    arrLen = arr.length,
    newArr = []
 
for (let i = 0; i < arrLen; i++) {
    if (arr[i] !== value) {
        newArr.push(arr[i])
    }
}
 
// 其他forEach、map、for of循环同理

4、Set 删除

let arr = ['a','b','c','d'],
    value = 'b'
let newSet = new Set(arr)
newSet.delete(value)
let newArr = [...newSet]
// newArr => ['a','c','d']

总结

到此这篇关于js删除数组中指定元素的文章就介绍到这了,更多相关js删除数组指定元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中的this原理及6种常见使用场景详解
这篇文章主要介绍了JavaScript中的this原理及6种常见使用场景详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
详解CommonJS和ES6模块循环加载处理的区别
这篇文章主要介绍了详解CommonJS和ES6模块循环加载处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Bootstrap实现input控件失去焦点时验证
这篇文章主要介绍了Bootstrap实现input控件失去焦点时验证的相关资料,非常不错，需要的朋友可以参考下，需要的朋友可以参考下
2016-08-08
Webpack中css-loader和less-loader的使用教程
这篇文章主要介绍了关于Webpack中css-loader和less-loader的使用教程，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
javascript实现在下拉列表中显示多级树形菜单的方法
这篇文章主要介绍了javascript实现在下拉列表中显示多级树形菜单的方法,涉及javascript属性菜单的定义、构造及遍历等技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
JavaScript实现导入和导出Excel的示例详解
在现代的Web应用开发中,与Excel文件的导入和导出成为了一项常见而重要的任务,本文主要介绍了如何在熟悉的电子表格 UI 中轻松导入 Excel 文件,需要的可以参考下
2024-03-03
浅析js预加载/延迟加载
本文主要介绍了js预加载和延时加载2种技术，简单分析了他们的实现方式和优缺点，非常的实用，有需要的朋友参考下
2014-09-09
JavaScript制作简易的微信打飞机
这篇文章主要介绍了JavaScript制作简易的微信打飞机，只有简单的功能，大神们可以自由扩展哈。有需要的小伙伴可以参考下。
2015-03-03
杨氏矩阵查找的JS代码
杨氏矩阵查找的JS代码，需要的朋友可以参考一下
2013-03-03
javascript实现禁止复制网页内容汇总
本文给大家汇总介绍了几种使用javascript和CSS实现禁止复制页面内容的方法，非常的实用，有需要的小伙伴可以参考下。
2015-12-12