高效删除数组符合条件对象的JS方法

本教程针对JavaScript开发者，旨在提供**高效移除数组中符合条件对象**的实用方法，解决因迭代数组时删除元素导致的索引错乱问题。文章深入探讨了两种方案：一是兼容旧版JavaScript的**手动迭代构建新数组**的策略，通过循环遍历和条件判断，将符合条件的对象排除，创建一个新的数组；二是推荐使用现代JavaScript的`Array.filter()`方法，以声明式的方式**创建新数组**，确保准确移除具有特定属性的对象，避免跳过元素。无论您是需要在旧版浏览器中运行代码，还是使用最新的JavaScript特性，都能找到适合您的解决方案，让您在JavaScript开发中更加得心应手。

本教程旨在解决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 处的元素）被跳过，从而未能正确处理所有符合条件的元素。为了解决这一问题，我们需要采用更健壮的方法。

方法一：兼容旧版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 = {

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~