数组元素是对象时,删除时需要注意的（不是直接用delete删除）

最新推荐文章于 2021-12-16 19:58:38 发布
原创 最新推荐文章于 2021-12-16 19:58:38 发布 · 313 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #ViewUI

本文探讨了在JavaScript中，当数组元素作为DOM元素引用时，删除DOM元素如何影响数组引用，并通过实例解释了数组元素动态更新导致的删除错误。详细介绍了数组元素在数组中的动态行为和如何正确地遍历DOM元素以避免此类问题。
数组元素(虽然下面获得的不是一个数组，只是一个集合，但是也成利)是对象时，当销毁这个对象，则数组自动把它从数组中去掉，同时数组长度减为1，不同于delete ，delete一个数组元素，则这个数组元素所在的位依然在，数组长度不变。
[img]http://dl2.iteye.com/upload/attachment/0109/6211/482528ee-c4cc-3308-a665-92efd528be6a.png[/img]
举个列子，当body中有很多个span元素时，现在把这些元素从dom树中删除。

[img]http://dl2.iteye.com/upload/attachment/0109/6215/88228f86-1d25-3a43-abf5-d7441266c938.png[/img]

var spanlist=document.getElementsByTagName('span');
//假如下面的删除代码段写成这样的形式：for(var i=0;i<spanlist.length;i++){ document.body.removeChild(spanlist[i])},那么会发现，只删除了一半元素，这是为什么呢？如开篇所说，删除第一个span后，spanlist动态更新，长度变为原始长度-1，而下一个i指向的是第1个元素（不是spanlist[0]），所以把spanlist[0]给漏掉了。所以最后只删掉了一半。
while(spanlist.length!=0){
   document.body.removeChild(spanlist[0])
}
iteye_9473
关注
js代码-delete 数组的 item，数组的 length 是否会 -1
07-15
js代码-delete 数组的 item，数组的 length 是否会 -1
JavaScript使用delete删除数组元素用法示例【数组长度不变】
10-20
了解这些方法后，你可以根据实际需求选择合适的方式来删除数组元素。在大多数情况下，使用`splice()`或`filter()`会更加合适，因为它们会更新数组的长度，使得数组的表示更清晰。而`delete`操作符在处理数组时应谨慎...
delete ：对对象和数组的操作
JEFF_xieyuzhi的博客
12-19 585
delete操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。 const users = { name:'xyz', age: 21 } console.log(delete users.age)//true console.log("users:",users)//users: {name: "xyz"} 删除成功返回true 删除一个数...
c++把数组所有元素剔除,从C ++数组元素删除
weixin_35745604的博客
12-28 289
Please tell me how to delete an element from a C++ array.My teacher is setting its value to 0, is that correct?解决方案You can't really "delete" an element from a C++ array.However, if the array consists ...
对象数组的创建与删除
LEOZHANG的专栏
12-19 477
//对象数组的创建与删除#include#includeclass B{public: B() {cout  B(char *s,double n) {  strcpy(name,s);  b=n;  cout }  ~B() {cout void getb(char *s,double &n) {  strcpy(s,name);  n=b; }private: char name[
前端-面试问答刷题记录之1-20题
qq_38294099的博客
01-08 354
面试题目来源 博客 2021.01.08 Question1: 平时怎么学习（淘）? Answer1: 略略略略略。。。 2021.01.08 Question2: 什么是PWA? Answer2: 首先PWA全称是ProgressiveWebApp,叫渐进式网页应用；用Web技术实现与原生App相近的用户体验；不需要到应用商店去安装APP，可以将应用添加到主屏幕下次访问直接点击，看了一些博文之后我的理解就是用网页实现了app实现的功能，可以添加到主屏幕下次使用直接点击； 优点：可靠...
javascript数组元素删除方法delete和splice解析
10-15
使用`delete`操作符删除数组元素时，指定索引位置的元素会被设置为`undefined`，同时数组的长度不会发生改变。这意味着数组中将留下一个空洞，即该位置的元素是`undefined`，但这个空洞仍然占用数组的一个位置。这种...
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
如果 `isDelete` 为 `true`，则使用 `splice` 方法从数组中移除该对象，并递减循环计数器 `i`，以避免跳过下一个元素。 在实际应用中，这些操作可能与用户交互事件关联，如按钮点击事件。例如，`add` 方法用于添加...
JS实现数组删除指定元素功能示例
10-16
如果`indexList`不是一个数组，而是一个单独的索引值，代码会直接调用`splice`方法删除该索引对应的元素。 5. **输出结果**： 代码最后使用`console.log`分别输出删除元素前后的数组状态，以便观察效果。 在实际...
JS中彻底删除JSON对象组成的数组中的元素
10-14
总之，当需要在JSON对象组成的数组中彻底删除元素时，应使用`splice()`方法，而不是`delete`运算符。`splice()`不仅可以删除元素，还可以添加或替换元素，因此它是处理数组时非常强大的工具。在实际编程中，理解并...
[js] 使用delete删除数组，其长度会改变吗
歌谣的博客
01-07 3335
[js] 使用delete删除数组，其长度会改变吗 使用delete删除数组元素，其长度会改变吗？ 咱来写个案例????看看就知道了： var arr = [1, 2, 3] delete arr[1] console.log(arr) console.log(arr.length) 结果如下： 通过结果，我们可以得出结论：使用delete删除数组元素，其长度是不会改变的。 关于这一点，大家可以把数组理解为是一个特殊的对象，其中的每一项转换为对象的伪代码为： key: value // 对
delete数组的item,数组的length是否会减一
weixin_43342105的博客
07-04 1087
直接来 // delete 数组的 item，数组的 length 是否会 -1 // 不会,delete数组长度不变 let arr = [1, 2, 3, 4] console.log(arr) // [1, 2, 3, 4, 5] delete arr[0] delete arr[2] console.log(arr) // [empty, 2, empty, 4] arr.forEach(item => { console.log(item) // 2 4 }) 运行结果 可以
js 使用delete删除数组或对象中的元素
曹曹的博客
08-07 7440
1. delete 数组中的某个元素 用法 a = [1,2,3] -> Array(3) [ 1, 2, 3 ] delete a[0] -> true a -> Array(3) [ <1 empty slot>, 2, 3 ] a[0] -> undefined delete可以通过数组的下标将js数组中的一个元素从指定位置上删除， 但是删除掉数组中的元素后，数组的长度不会变, 只是原数组的内容改变了， 而是用empty填充被删除的元素。 2. dele
为何new出的对象数组必须要用delete[]删除，而普通数组delete和delete[]都一样
u010278318的专栏
04-25 1578
1.在释放堆栈中c++基本数据（包括int，char.....结构体等）的存储空间时，不管是否是数组用delete都不会有错！而且能正常释放所有内存，不会导致内存泄露！  //程序A struct text_data_t { int i; }; int _tmain(int argc, _TCHAR* argv[]) { text_data_t
释放对象数组:delete与delete[]
wyjvip333的专栏
01-29 1355
练习 14.11 中提到： Account *parray=new Account[100]; delete parray; delete [] parray; 方括号的存在会使编译器获取数组大小（size）然后析构函数再被依次应用在每个元素上，一共size次。否则，只有一个元素被析构。 无论哪种情况，分配的全部空间被返还给自由存储区。 我的问题是:为什...
js中数组删除对象的几种方式总结
热门推荐
胖蔡叨叨叨
12-16 3万+
JS中数组是我们较为常用的一种数据结构，本篇文章主要是介绍js中我们常见的一些删除数组中元素的方式方法，希望可以对大家有所帮助。站长不易，感兴趣的大家可以点击查看原文支持支持。 数组中元素的删除通过删除的方法的不同可以分为： 关键字删除 splice删除 特殊位置删除 关键字删除 关键字删除是通过js提供的关键字 delete手动删除数组的某一项。 使用delete删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变。 ar arr = ['a','b','c','d.
delete删除数组对象中的一个对象
最新发布
08-19
在 JavaScript 中，从数组中删除特定对象可以通过多种方式实现。以下是几种常用的方法，每种方法适用于不同的场景。 ### 使用 `filter()` 方法删除特定对象 `filter()` 方法创建一个新数组，包含所有通过测试的元素。可以通过比较对象的属性来筛选不需要的对象。 ```javascript let array = [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" } ]; let removeObject = { id: 2, name: "李四" }; let newArray = array.filter(obj => obj.id !== removeObject.id || obj.name !== removeObject.name); console.log(newArray); // 输出: [ { id: 1, name: "张三" }, { id: 3, name: "王五" } ] ``` ### 使用 `splice()` 方法删除特定对象 `splice()` 方法可以通过索引删除特定对象。需要先找到该对象在数组中的索引，然后删除。 ```javascript let index = array.findIndex(obj => obj.id === removeObject.id && obj.name === removeObject.name); if (index !== -1) { array.splice(index, 1); } console.log(array); // 输出: [ { id: 1, name: "张三" }, { id: 3, name: "王五" } ] ``` ### 使用 `reduce()` 方法构建新数组 `reduce()` 方法可以逐步构建一个新数组，排除需要删除的对象。 ```javascript let filteredArray = array.reduce((acc, obj) => { if (obj.id !== removeObject.id || obj.name !== removeObject.name) { acc.push(obj); } return acc; }, []); console.log(filteredArray); // 输出: [ { id: 1, name: "张三" }, { id: 3, name: "王五" } ] ``` ### 使用 `for` 循环手动筛选对象 通过遍历数组并手动筛选对象，可以构造一个不包含特定对象的新数组。 ```javascript let result = []; for (let i = 0; i < array.length; i++) { if (array[i].id !== removeObject.id || array[i].name !== removeObject.name) { result.push(array[i]); } } console.log(result); // 输出: [ { id: 1, name: "张三" }, { id: 3, name: "王五" } ] ``` ### 总结 - `filter()` 是最常用的方法，适合大多数场景[^2]。 - `splice()` 适用于需要直接修改原始数组的情况[^3]。 - `reduce()` 和 `for` 循环提供了更细粒度的控制，但代码相对复杂。 这些方法可以根据实际需求选择使用，确保能够高效地从数组中删除特定对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值