本文深入探讨了在javascript中从嵌套对象数组中根据特定属性条件移除元素的有效策略。针对在循环中直接使用`splice`方法修改数组可能导致的索引错位问题，文章提供了两种解决方案：现代javascript中推荐的`array.filter()`方法，以及为兼容旧版es5环境而设计的手动构建新数组的迭代方法，确保在不同javascript环境中都能准确且健壮地处理数据。
在JavaScript开发中，我们经常需要处理复杂的数据结构，例如包含多层嵌套对象的数组。一个常见的需求是根据数组中对象的特定属性值来移除符合条件的对象。然而，在迭代数组并同时修改它的过程中，如果不采取正确的策略，很容易遇到意料之外的问题。
迭代中修改数组的陷阱：for循环与splice
考虑以下场景：我们有一个包含用户信息的对象数组，需要移除所有具有areWeCreatingNewUser: true属性的用户。直观的解决方案可能是使用for循环遍历数组，并在找到符合条件的对象时使用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",
};
// 尝试使用for循环和splice移除对象
for (var i = 0; i < obj.qesData.signatories.length; i++) {
if (obj.qesData.signatories[i].areWeCreatingNewUser) {
obj.qesData.signatories.splice(i, 1);
}
}
console.log(obj.qesData.signatories); // 结果可能不符合预期上述代码的问题在于，当splice(i, 1)移除一个元素时，数组的长度会减小，并且后续元素的索引会向前移动。例如，如果索引1的元素被移除，原先索引2的元素会变为新的索引1。然而，for循环的i会继续递增到2，从而跳过检查新的索引1（原先的索引2）的元素。这导致某些符合条件的元素可能被遗漏，无法被正确移除。
现代JavaScript解决方案：Array.filter()
为了避免在迭代中修改数组带来的复杂性和潜在错误，现代JavaScript提供了Array.filter()方法，这是一种更安全、更简洁且更具声明性的解决方案。filter()方法会创建一个新数组，其中包含所有通过指定测试函数（即返回true的元素）的元素，而不会修改原始数组。
立即学习“Java免费学习笔记（深入）”；
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",
};
// 使用Array.filter()移除具有areWeCreatingNewUser属性的对象
obj.qesData.signatories = obj.qesData.signatories.filter(d => !d.areWeCreatingNewUser);
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": []
}
]
*/在这个解决方案中，filter方法遍历signatories数组的每个元素d。对于每个元素，它检查!d.areWeCreatingNewUser是否为真。如果为真（即areWeCreatingNewUser属性不存在或为false），则该元素会被包含在新数组中。最终，我们将obj.qesData.signatories属性更新为这个新生成的数组，从而有效地移除了所有符合条件的对象。
ES5兼容解决方案：手动构建新数组
在一些老旧的JavaScript环境中，可能无法使用Array.filter()等ES6+特性。在这种情况下，我们可以通过传统的for循环手动构建一个新的数组，以实现相同的效果。
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 = []; // 创建一个空数组用于存放符合条件的元素
var originalSignatories = obj.qesData.signatories; // 获取原始数组的引用
// 遍历原始数组，将符合条件的元素添加到新数组
for (var i = 0; i < originalSignatories.length; i++) {
// 如果areWeCreatingNewUser属性不存在或为false，则保留该元素
if (!originalSignatories[i].areWeCreatingNewUser) {
filteredSignatories.push(originalSignatories[i]);
}
}
// 用新数组替换原始数组
obj.qesData.signatories = filteredSignatories;
console.log(obj.qesData.signatories);
/*
期望输出与filter方法相同：
[
{
"displayName": "Some user",
"email": "user1@example.com",
"firstname": "User first name",
"id": "4ffb81f6-6efd-4e41-9168-b032ab3e3b04",
"lastname": "User last name",
"locale": "en",
"signatoryAttributes": []
}
]
*/这种方法的核心思想是，在遍历原始数组时，我们不直接修改它。而是创建一个全新的数组，并将那些不满足移除条件的元素逐一添加到新数组中。遍历完成后，用这个新数组替换掉原始数组在父对象中的引用。这种方式完全避免了在迭代过程中修改数组长度和索引的问题，是ES5环境下处理此类需求的稳健方案。
注意事项与总结
-
选择合适的方案：
- 在支持ES6+的环境中，Array.filter()是首选，因为它代码简洁、可读性高，并且避免了手动管理索引的复杂性。它也更符合函数式编程的理念，通过创建新数组而非修改原数组来操作数据，有助于保持数据的不可变性。
- 在必须兼容ES5或更旧版JavaScript的环境中，手动构建新数组的方法是可靠的选择。
- 性能考量： 对于大多数应用场景，filter()和手动循环在性能上差异不大。但在处理极其庞大的数组时，如果性能是关键因素，可以根据具体情况进行基准测试。通常，现代JavaScript引擎对内置方法（如filter）有高度优化。
- 代码可读性与维护： 尽量选择代码更清晰、更易于理解和维护的方法。filter()在这方面通常表现更优。
通过理解在迭代中修改数组的潜在问题，并掌握Array.filter()或手动构建新数组这两种解决方案，开发者可以更有效地处理JavaScript中的数组操作，确保数据处理的准确性和代码的健壮性。
