本教程旨在解决javascript中在迭代数组时删除元素导致的索引错乱问题。我们将探讨两种主要方法：适用于旧版javascript的通过手动迭代构建新数组的策略，以及使用现代javascript的Array.Filter()方法创建新数组，从而确保准确移除具有特定属性的对象，避免跳过元素。
在javascript开发中，从数组中移除满足特定条件的对象是一项常见任务。然而，当在循环遍历数组的同时直接修改数组（例如使用 Array.prototype.splice() 方法）时，常常会遇到一个棘手的问题：数组的长度和元素的索引会发生变化，这可能导致部分元素被意外跳过，或者产生非预期的结果。
以下是一个典型的嵌套对象结构示例：
const obj = { "title": "sample", "status": 0, "creationDate": null, "userGroup": "", "signaturedelay": "2023-06-05T11:07:18.786Z", "listSign": [], "priority": false, "nature": null, "qesData": { "signatories": [ { "displayName": "Some user", "email": "user1@example.com", "firstname": "User first name", "id": "4ffb81f6-6efd-4e41-9168-b032ab3e3b04", "lastname": "User last name", "locale": "en", "signatoryAttributes": [] }, { "email": "user2@example.com", "displayName": "", "areWeCreatingNewUser": true }, { "email": "user3@example.com", "displayName": "", "areWeCreatingNewUser": true } ] }, "fileName": "sample.pdf", };
我们的目标是从 obj.qesData.signatories 数组中移除所有 areWeCreatingNewUser 属性为 true 的对象。如果尝试使用传统的 for 循环配合 splice 方法，可能会遇到以下问题：
// 这种尝试是错误的，会导致跳过某些元素 for(var i = 0; i < obj.qesData.signatories.length; i++) { if(obj.qesData.signatories[i].areWeCreatingNewUser) { obj.qesData.signatories.splice(i, 1); } }
当 splice(i, 1) 执行后，当前索引 i 处的元素被移除，其后的所有元素都会向前移动一位。但在下一次循环迭代中，i 会递增，导致新的 i 索引处的元素（原本是 i+1 处的元素）被跳过，从而未能正确处理所有符合条件的元素。为了解决这一问题，我们需要采用更健壮的方法。
立即学习“Java免费学习笔记（深入）”；
方法一：兼容旧版JavaScript的迭代方法 (ES5)
如果您的项目环境对JavaScript版本有严格要求，例如需要兼容ES5甚至更早期的环境，并且无法使用 Array.prototype.filter() 等现代方法，那么手动构建一个新数组是安全且有效的解决方案。
工作原理： 此方法的核心思想是创建一个空的辅助数组。然后，遍历原始数组中的每个元素。对于不符合删除条件（即 areWeCreatingNewUser 属性不存在或不为 true）的元素，将其添加到这个新的辅助数组中。遍历完成后，将原始数组的引用指向这个新构建的数组，从而实现元素的移除。
示例代码：
const obj = { "title": "sample", "status": 0, "creationDate": null, "userGroup": "", "signatureDelay": "2023-06-05T11:07:18.786Z", "listSign": [], "priority": false, "nature": null, "qesData": { "signatories": [ { "displayName": "Some user", "email": "user1@example.com", "firstname": "User first name", "id": "4ffb81f6-6efd-4e41-9168-b032ab3e3b04", "lastname": "User last name", "locale": "en", "signatoryAttributes": [] }, { "email": "user2@example.com", "displayName": "", "areWeCreatingNewUser": true }, { "email": "user3@example.com", "displayName": "", "areWeCreatingNewUser": true } ] }, "fileName": "sample.pdf", }; let filteredSignatories = []; // 创建一个空数组来存储符合条件的对象 // 使用传统的 for 循环遍历数组 for (let i = 0; i < obj.qesData.signatories.length; i++) { const signatory = obj.qesData.signatories[i]; // 如果对象不具有 areWeCreatingNewUser 属性，或者该属性的值不为 true if (!signatory.areWeCreatingNewUser) { filteredSignatories.push(signatory); // 将其添加到新数组 } } obj.qesData.signatories = filteredSignatories; // 将原始属性指向新数组 console.log(obj.qesData.signatories); /* 输出结果将是： [ { "displayName": "Some user", "email": "user1@example.com", "firstname": "User first name", "id": "4ffb81f6-6efd-4e41-9168-b032ab3e3b04", "lastname": "User last name", "locale": "en", "signatoryAttributes": [] } ] */
注意事项：
- 此方法虽然比现代JavaScript的 filter 方法更为冗长，但其核心思想是构建一个新数组，避免了在迭代过程中直接修改原始数组，从而安全地解决了索引错乱问题。
- 如果您的环境支持es6的 for…of 循环，也可以使用它来简化遍历，但原理相同。
方法二：使用 Array.prototype.filter() 进行高效筛选 (现代JavaScript推荐)
Array.prototype.filter() 是现代JavaScript（ES6+）中处理此类问题的最佳实践。它提供了一种声明式且非变异（non-mutating）的方式来创建新数组，其中只包含通过指定回调函数测试的元素。这种方法天然地避免了在迭代过程中修改数组所带来的索引问题。
工作原理：filter() 方法会遍历数组的每个元素，并对每个元素执行一个回调函数。如果回调函数返回 true，则该元素被包含在新数组中；如果返回 false，则该元素被排除。最终，filter() 返回一个全新的数组，而原始数组保持不变。
示例代码：
const obj = {