在javascript中，当需要从数组中删除特定对象时，直接在正向循环中使用`splice`方法会导致索引错乱和跳过元素的问题。本文将深入探讨这一常见陷阱，并提供两种高效且可靠的解决方案：针对现代javascript环境推荐使用`array.prototype.filter()`方法，它通过创建新数组避免了原数组修改的副作用；同时，也为需要兼容旧版javascript（es5）的环境提供了手动遍历并构建新数组的实现方式，确保在不使用`filter`等新特性时也能正确处理。
1. 问题分析：在循环中修改数组的陷阱
在JavaScript开发中，我们经常会遇到需要从一个数组中移除满足特定条件的对象。一个常见的直觉是使用for循环结合Array.prototype.splice()方法。然而，这种做法在某些情况下会导致意想不到的错误，尤其是在正向遍历数组并删除元素时。
考虑以下数据结构，我们希望从obj.qesData.signatories数组中移除所有具有areWeCreatingNewUser: true属性的对象：
const obj = {
"title": "sample",
"status": 0,
"qesData": {
"signatories": [
{
"displayName": "Some user",
"email": "user1@example.com",
"id": "4ffb81f6-6efd-4e41-9168-b032ab3e3b04",
},
{
"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);
}
}这段代码的问题在于，当splice(i, 1)执行时，它会从数组中移除当前索引i处的元素，导致数组长度减小，并且后续元素的索引会向前移动。但循环变量i在下一次迭代时仍然会递增。这使得紧接着被删除元素后面的那个元素被跳过，因为它移动到了当前i的位置，而i已经递增，指向了更远的下一个位置。例如，如果索引1的元素被删除，原索引2的元素会变为新索引1。但i会从1递增到2，从而跳过了原索引2的元素。
立即学习“Java免费学习笔记（深入）”；
2. 现代JavaScript解决方案：使用 Array.prototype.filter()
在现代JavaScript（ES6及更高版本）中，处理这类问题最简洁、高效且推荐的方式是使用Array.prototype.filter()方法。filter()方法会创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。它不会修改原数组，从而避免了在迭代过程中修改数组可能引发的所有问题。
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",
};
// 使用 filter 方法移除具有 areWeCreatingNewUser 属性的对象
obj.qesData.signatories = obj.qesData.signatories.filter(signatory => !signatory.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()方法接收一个回调函数作为参数。这个回调函数会为数组中的每个元素执行一次，并返回一个布尔值。如果返回true，则该元素会被包含在新数组中；如果返回false，则该元素会被排除。 在本例中，signatory => !signatory.areWeCreatingNewUser这个箭头函数检查每个signatory对象是否不具有areWeCreatingNewUser属性（或该属性值为false）。所有满足此条件的元素都会被收集到一个新数组中，然后我们将其赋值回obj.qesData.signatories，从而实现了高效且无副作用的过滤。
3. 兼容旧版JavaScript (ES5) 的解决方案：手动构建新数组
如果项目环境不支持Array.prototype.filter()（例如，需要兼容非常老的浏览器，或者有明确规定不允许使用ES6+特性），我们可以通过手动遍历数组并构建一个新数组来达到同样的目的。这种方法同样避免了在迭代过程中修改原数组的问题。
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",
};
var newData = [];
var signatories = obj.qesData.signatories;
// 遍历原数组，将符合条件的元素添加到新数组中
for (var i = 0; i < signatories.length; i++) {
// 检查元素是否不具有 areWeCreatingNewUser 属性，或者该属性值为 false
if (!signatories[i].areWeCreatingNewUser) {
newData.push(signatories[i]);
}
}
// 将新数组赋值回原属性
obj.qesData.signatories = newData;
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": []
}
]
*/解释： 这种方法的核心思想是创建一个空的newData数组。然后，我们使用一个标准的for循环遍历原始的signatories数组。在每次迭代中，我们检查当前元素是否符合保留的条件（即不具有areWeCreatingNewUser属性或其值为false）。如果符合条件，就将该元素推入newData数组。循环结束后，newData数组包含了所有我们希望保留的元素，最后将其赋值给obj.qesData.signatories，从而替换掉原始数组。这种方式同样确保了在遍历过程中不会修改数组的长度或索引，从而避免了splice带来的问题。
4. 注意事项与最佳实践
-
避免在正向循环中用splice修改数组： 这是处理数组删除操作时最常见的陷阱。如果必须在循环中进行删除，可以考虑以下两种方式：
-
逆向循环： 从数组的末尾开始向前遍历。这样，即使删除了元素，也不会影响尚未访问到的元素的索引。
for (var i = obj.qesData.signatories.length - 1; i >= 0; i--) { if (obj.qesData.signatories[i].areWeCreatingNewUser) { obj.qesData.signatories.splice(i, 1); } } -
使用while循环并手动调整索引： 当使用splice删除元素后，将循环变量i减1，以确保下一个元素（它已经向前移动到当前i的位置）在下一次迭代时被正确检查。
var i = 0; while (i < obj.qesData.signatories.length) { if (obj.qesData.signatories[i].areWeCreatingNewUser) { obj.qesData.signatories.splice(i, 1); // 删除元素后，当前索引处的元素已改变，需要重新检查此索引 // 且数组长度减小，i不需要递增 } else { i++; // 只有未删除元素时才递增索引 } }然而，这两种方法都比filter或手动构建新数组更复杂，更容易出错，且可读性较差。因此，通常不推荐。
-
逆向循环： 从数组的末尾开始向前遍历。这样，即使删除了元素，也不会影响尚未访问到的元素的索引。
- 优先使用不可变操作： filter()方法体现了函数式编程中“不可变性”的概念，即操作不会修改原始数据结构，而是返回一个新的数据结构。这使得代码更易于理解、测试和调试，尤其是在大型应用中。
- 考虑性能： 对于大型数组，filter()方法通常是经过高度优化的，并且在大多数现代JavaScript引擎中表现良好。手动构建新数组的方法在性能上与filter类似，因为它们都涉及遍历整个数组并创建新数组。
5. 总结
从JavaScript数组中删除特定对象时，避免在正向for循环中直接使用splice()是关键。对于现代JavaScript环境，Array.prototype.filter()提供了最优雅、高效且符合最佳实践的解决方案，通过创建新数组来避免修改原数组。当需要兼容旧版JavaScript或受限于特定环境时，通过手动遍历并构建一个新数组同样能达到目的，同时避免了索引错乱的问题。理解这些不同的方法及其优缺点，能帮助开发者编写更健壮、可维护的JavaScript代码。
