本教程旨在解决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 = { 
