js 素组删除的多种方法

已于 2023-07-24 20:27:19 修改
阅读量695 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 开发语言
于 2023-07-24 20:24:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ACCPluzhiqi/article/details/131904323
版权
文章详细介绍了JavaScript中删除数组元素的六种方法，包括splice()、pop()、shift()、filter()、slice()和delete操作符，并提供了代码示例。每种方法都有其适用场景和优缺点，如splice()能直接删除指定位置元素，但会改变原数组；filter()根据条件删除元素，但会产生新数组。文章还提供了方法封装示例和常见问题分析。
摘要由CSDN通过智能技术生成

以下是 JavaScript 中删除数组元素的多种方法的详细代码示例：

详细代码示例

1. 使用 splice() 方法：

let fruits = ['apple', 'banana', 'orange'];

// 删除指定索引位置的元素
fruits.splice(1, 1);

console.log(fruits); // 输出: ['apple', 'orange']

2. 使用 pop() 方法：

let fruits = ['apple', 'banana', 'orange'];

// 删除数组末尾的元素
fruits.pop();

console.log(fruits); // 输出: ['apple', 'banana']

3. 使用 shift() 方法：

let fruits = ['apple', 'banana', 'orange'];

// 删除数组开头的元素
fruits.shift();

console.log(fruits); // 输出: ['banana', 'orange']

4. 使用 filter() 方法：

let fruits = ['apple', 'banana', 'orange'];

// 删除满足条件的元素
fruits = fruits.filter(fruit => fruit !== 'banana');

console.log(fruits); // 输出: ['apple', 'orange']

5. 使用 slice() 方法和展开运算符：

let fruits = ['apple', 'banana', 'orange'];

// 删除指定索引位置的元素
fruits = [...fruits.slice(0, 1), ...fruits.slice(2)];

console.log(fruits); // 输出: ['apple', 'orange']

6. 使用 delete 操作符：

let fruits = ['apple', 'banana', 'orange'];

// 删除指定索引位置的元素
delete fruits[1];

console.log(fruits); // 输出: ['apple', empty, 'orange']

以上是 JavaScript 中删除数组元素的多种方法的详细代码示例。根据你的需求和具体情况，选择适合的方法来删除数组元素。

使用场景和优缺点

1. 使用 splice() 方法：

  • 使用场景：适用于需要删除指定索引位置的元素的场景。
  • 优点：可以直接删除指定索引位置的元素，并且可以在同一操作中插入新的元素。
  • 缺点：会改变原始数组，可能会影响其他对数组的引用。

2. 使用 pop() 方法：

  • 使用场景：适用于需要删除数组末尾的元素的场景。
  • 优点：简单快捷，不需要指定索引位置。
  • 缺点：只能删除数组末尾的元素，不能删除其他位置的元素。

3. 使用 shift() 方法：

  • 使用场景：适用于需要删除数组开头的元素的场景。
  • 优点：简单快捷，不需要指定索引位置。
  • 缺点：只能删除数组开头的元素，不能删除其他位置的元素。删除后，数组中的元素会重新排序。

4. 使用 filter() 方法：

  • 使用场景：适用于需要删除满足条件的元素的场景。
  • 优点：可以根据条件删除多个元素，并返回一个新的数组。
  • 缺点：会创建一个新的数组，可能会有一定的性能开销。

5. 使用 slice() 方法和展开运算符：

  • 使用场景：适用于需要删除指定索引位置的元素的场景。
  • 优点：不会改变原始数组，而是返回一个新的数组。
  • 缺点：需要使用展开运算符将两个切片合并成一个新的数组，可能会有一定的性能开销。

6. 使用 delete 操作符：

  • 使用场景：适用于需要删除指定索引位置的元素的场景。
  • 优点：可以直接删除指定索引位置的元素，不会改变数组的长度。
  • 缺点：删除后，数组中的元素并不会被移除，而是变成 empty，可能会导致一些问题。

根据上述优缺点和使用场景，你可以根据具体需求选择适合的方法来删除数组元素。如果需要简单快捷地删除数组元素，可以使用 pop()、shift() 方法；如果需要根据条件删除元素，可以使用 filter() 方法；如果需要删除指定索引位置的元素，可以使用 splice()、slice() 或 delete 操作符。

封装示例：

1. 封装 splice() 方法：

function removeElement(arr, index) {
  arr.splice(index, 1);
  return arr;
}

let fruits = ['apple', 'banana', 'orange'];
fruits = removeElement(fruits, 1);
console.log(fruits); // 输出: ['apple', 'orange']

2. 封装 pop() 方法：

function removeLastElement(arr) {
  arr.pop();
  return arr;
}

let fruits = ['apple', 'banana', 'orange'];
fruits = removeLastElement(fruits);
console.log(fruits); // 输出: ['apple', 'banana']

3. 封装 shift() 方法：

function removeFirstElement(arr) {
  arr.shift();
  return arr;
}

let fruits = ['apple', 'banana', 'orange'];
fruits = removeFirstElement(fruits);
console.log(fruits); // 输出: ['banana', 'orange']

4. 封装 filter() 方法：

function removeElements(arr, condition) {
  return arr.filter(condition);
}

let fruits = ['apple', 'banana', 'orange'];
fruits = removeElements(fruits, fruit => fruit !== 'banana');
console.log(fruits); // 输出: ['apple', 'orange']

5. 封装 slice() 方法和展开运算符：

function removeElement(arr, index) {
  return [...arr.slice(0, index), ...arr.slice(index + 1)];
}

let fruits = ['apple', 'banana', 'orange'];
fruits = removeElement(fruits, 1);
console.log(fruits); // 输出: ['apple', 'orange']

6. 封装 delete 操作符：

function removeElement(arr, index) {
  delete arr[index];
  return arr.filter(Boolean);
}

let fruits = ['apple', 'banana', 'orange'];
fruits = removeElement(fruits, 1);
console.log(fruits); // 输出: ['apple', 'orange']

通过封装这些方法，你可以在其他地方直接调用封装的函数来删除数组元素，提高代码的可复用性和可维护性。注意，封装函数的参数可以根据实际需求进行调整，以满足不同的删除需求。

遇到的问题

以下是这6个方法常见的问题：

  1. splice() 方法的问题：

    • 删除元素后，原始数组会被修改，可能会导致意外的副作用。
    • 删除多个元素时，需要指定每个元素的索引位置，比较繁琐。

  2. pop() 方法的问题：

    • 只能删除数组末尾的元素，无法删除其他位置的元素。

  3. shift() 方法的问题：

    • 只能删除数组开头的元素，无法删除其他位置的元素。

  4. filter() 方法的问题：

    • 创建一个新的数组，可能会有一定的性能开销。
    • 删除的元素是根据条件判断的，可能会导致一些意外的结果。

  5. slice() 方法和展开运算符的问题：

    • 需要使用展开运算符将两个切片合并成一个新的数组，可能会有一定的性能开销。
    • 删除的元素是根据索引位置判断的，可能会导致一些意外的结果。

  6. delete 操作符的问题：

    • 删除后，数组中的元素并不会被移除，而是变成 empty，可能会导致一些问题。
    • 删除的元素是根据索引位置判断的，可能会导致一些意外的结果。
一花一world
关注
专栏目录
前端有关js和jQuery面试题！！！
2301_76766756的博客
08-19 502
捕获阶段(从window对象传导到目标节点(从外到里)，这个阶段不会响应任何事件)，目标阶段， (在目标节点上触发)，冒泡阶段(从目标节点传导回window对象(从里到外))，事件委托/事件代 理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层。所谓的同源，指的是协议，域名，端口相同。函数防抖是需要一个延时器来辅助实现，延迟执行需要执行的代码，如果方法多次触发，把上次记 录的延迟执行代码用cleartimeout清除掉，重新开始，如果计时完毕，没有方法来访问触发，则执 行代码。
javascript后面部分
Pwsifeng的博客
04-07 1106
day01-PHP语言 一、认识前后端 前端：用户可见的界面，数据展示在页面上给用户看到 后端：分为服务器端和数据库 服务器端：把前端要展示的数据存储到数据库中，前端需要时把数据库的数据再传递给前端 ​ （服务器端：我们学习php语言，php语言运行在apache服务器上） 数据库：一个存储数据的仓库（mysql），可以让后端进行数据的增删改查（mysql） 展示方面：前端之间看到，布局，图文，交互和特效。 ​ 后端没办法直接看到，数据存取，业务逻辑
JS 删除数组元素（5种方法）
最新发布
小蜗牛的珍贵百宝箱
10-06 823
使用splice()方法可以删除任意位置的元素，并可同时添加新元素。使用pop()和shift()可以分别删除最后一个和第一个元素，常用于栈和队列操作。使用filter()方法可以根据条件删除多个元素，并返回一个新数组。使用delete关键字可以删除特定元素，但不会改变数组的长度。选择合适的方法来删除数组中的元素，可以根据具体的需求来决定。希望这些示例能帮助你更好地理解和应用这些方法！
JS 删除数组元素（ 5种方法 ）
大剑师兰特的GIS世界
04-23 7906
- `splice()` 适合删除任意位置的元素，且可以一次删除多个。 - `pop()` 和 `shift()` 分别用于删除末尾和头部的单个元素。 - 使用 `delete` 操作符会导致数组中出现 `undefined` 值，而非真正缩小数组大小。 - 调整 `length` 属性可快速截断数组，但请确保了解其对数组影响的特殊性。
js一次性删除数组中多个元素
S‘blog
09-18 1119
方法体内部使用splice方法，在使用for循环或者forEach遍历数组的话，删除数据不全 方法一 ，用逆向循环 for (let index = _this.teamIds.length - 1; index >= 0 ; index--) { if(_this.teamIds[index].indexOf(val) == '-1'){ _this.teamIds.splice(index, 1); } } 方法二，用filter var arr = [1, 2, 3, 4, 5.
js 三种方法：同时删除数组的多个元素的 array js
学习笔记
07-27 9566
js 如何同时删除数组的多个元素 array js 有时候我需要用到时间删除数组的多个元素的情况 如果只是普通的遍历删除，会导致每一次删除之后，数组元素的坐标值改变，就对应不上了。 可能对应上的 index 已经超出了被删减后数组的长度 有三种解决思路： 倒序遍历，这样从后面删除元素，不会影响前面的数据坐标 以 for 遍历，在每次删除元素后，坐标值减一回退一位 使用 filter 进行筛选 这里推荐第三种，来看一下第二种方法和第三种方法的实现： 先看需求 比如，我现在遇到这样一个场景，我有一个词条数组
javascript删除创建多个子节点
weixin_33817333的博客
05-23 587
问题：对已经有的HTML结构(如下图)，按照字符串顺序重新排序DOM结点。 <ol id="test-list"> <li class="lang">Scheme</li> <li class="lang">JavaScript</li> <li class="l...
goit-js-hw-07
03-22
1. **变量与数据类型**：JavaScript支持多种数据类型，包括基础类型（如字符串、数字、布尔值）和引用类型（如对象）。变量可以使用`var`、`let`或`const`关键字声明。 2. **控制流语句**：包括条件语句（如`if......
GPS-Uber：一个用于预测一般和e3特异性赖氨酸泛素化位点的混合学习框架
weixin_45156147的博客
03-07 5165
文章链接：https://academic.oup.com/bib/advance-article-abstract/doi/10.1093/bib/bbab574/6509047 DOI：10.1093/bib/bbab574/6509047 期刊：BiB 发布时间：2022 年 1 月 17 日 初始基准数据集、二次训练数据集和独立测试数据集均可在：http://gpsuber.biocuckoo.cn/userguide.php上免费下载。 文章目录前言一、简介二、方法2.1 数据收集和准备2.2
html+css+js基础问答
qq_43751465的博客
08-26 5315
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
js 如何一次性删除数组中的多个元素？
xinxin的博客
02-24 5664
方法一，用 filter let arr = [7, 3, 4, 7]; arr = arr.filter(item => item < 5); 方法二，用逆向循环 var arr = [2, 3, 5, 7]; for (let i = arr.length - 1; i >= 0; i--) { if (arr[i] === 5) { arr.splice(i, 1); } }
【JavaScript】 删除数组中的元素的多种方式
徐海东的博客
10-18 396
移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组 function remove(arr, item) { var newArr = arr.slice(0) //slice返回一个新数组， for(var i = 0 ; i &lt; newArr.length; i++){ if(newArr[i] ==ite...
javascript 删除数组中的多个元素
u010999809的博客
06-11 1174
/** * 删除数组中的多个元素 * @param originalArr 原始数组 * @param elements 需要删除的元素（多个的话以逗号进行分隔） * @returns 删除元素后的数组（这里直接操作了原始数组originalArr，因为数组是引用类型 * ，可以直接取originalArr；这个函数可以不返回originalArr） * * 使用示例： * removeArrayElements([1,2,3,4,5], '55,3,2'); // [1,4,5] * removeArr.
js删除数组内多个相同元素——数组去除重复元素
weixin_44867717的博客
03-02 2367
js删除数组内多个相同元素——数组去除重复元素 1、需求 有数组testArr= [“b”, “d”, “a”, “b”, “c”, 1, 5]，需要把数组内的"b"删掉。 2、方法 方法1.1 使用i–，初始值为length-1，这样删除为数组最后开始删除（或通过验证），不影响继续执行的结果。 var testArr = ["b", "d", "a", "b", "c", 1, 5]; //替换掉数组里的b for (var i = testArr.length - 1; i >= 0; i--)
JavaScript移除数组元素
boonya的博客
04-28 193
[color=red]前言：遍历数组并为数组重新赋值是一件让人不爽的事情，这里提供3种移除数组元素的方法。[/color] [code="java"] /** 　 *　方法:Array.remove(index) 　 *　功能:删除数组元素. 　 *　参数:index删除元素的下标. 　 *　返回:在原数组上修改数组 　 */ Array.prototype.remove=func...
JS循环删除多个元素
liv空间站
06-03 5939
1. （错误示范）直接循环删除 arr.forEach((item, index) => { if (item === 'a') { item.splice(index, 1) } }) splice直接删除元素，数组会变短，循环会丢失删除元素的后一个元素 de...
js一次删除数组中的多个元素
星海、山河的博客
12-28 3309
js一次删除数组中的多个元素 在我们对一些列表项的数据进行操作时，经常会有删除多个列表项的情况，在不进行接口请求的情况下就需要我们前端进行删除然后缓存，下面介绍下删除数组中多个元素的方法 一、filter filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。 let list = [ { id: 1, name: 1, }, { i
javascript数组删除多个元素
摘星辰Li
12-21 2506
删除应该有两个函数delete和splice(),下面我用了delete这个函数 var video_ids = this.data.checkedVideoIds; var watchVideoIds = wx.getStorageSync('watchVideoIds'); for (var i = 0; i &lt; video_ids.length; i++) {/...
一组素组把id相同的合并到新数组js
07-16
要将具有相同ID的元素合并到新数组中，你可以使用JavaScript中的`reduce`方法来实现。以下是一个示例代码： ```javascript const array = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 1, name: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一花一world

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值