本教程将介绍如何在javascript中高效地根据一个对象的键来过滤另一个对象数组。通过利用javascript的`in`操作符，我们可以简洁而准确地筛选出那些其特定属性值（如标题）不存在于目标对象键集合中的数组元素，从而避免不必要的中间数组创建，优化代码性能。
在JavaScript开发中，我们经常会遇到需要根据一个数据集合的特性来筛选另一个数据集合的场景。例如，我们可能有一个产品列表数组，需要从中移除那些已存在于某个模板集合中的产品。本教程将详细讲解如何高效地实现这一目标，特别是当模板集合以对象键的形式存储时。
场景描述
假设我们有两个JavaScript数据结构：
- respProducts：一个包含产品信息的数组，每个产品对象都有一个node.title属性。
- currentTemplates：一个对象，其键（keys）代表当前已存在的模板名称。
我们的目标是从respProducts数组中过滤掉那些node.title值与currentTemplates对象的任何键匹配的产品，并保留数组的原始结构。
以下是示例数据：
立即学习“Java免费学习笔记（深入）”；
const respProducts = [
{
"cursor": "eyJsYXN0X2lkIjo4OT234234sYXN0X3ZhbHVlIjo4OTkzOTgyMjExfQ==",
"node": {
"id": "gid://shopify/Product/8923422211",
"title": "California Here"
}
},
{
"cursor": "eyJsYXN0X2lkIjo5234234sYXN0X3ZhbHVlIjo5MDExNDM0MzA3fQ==",
"node": {
"id": "gid://shopify/Product/923423434307",
"title": "Texas 2000 Here"
}
},
{
"cursor": "eyJsYXN0X2lkIj234234LCJsYXN0X3ZhbHVlIjo5MzM4MDczODcwfQ==",
"node": {
"id": "gid://shopify/Product/23423470",
"title": "Texas Black Here"
}
}
];
const currentTemplates = {
"Texas 2000 Here": {
"productTemplate": {},
"colorVariants": false
},
"Alabama": {
"productTemplate": {},
"colorVariants": false
},
"Alaska": {
"productTemplate": {},
"colorVariants": false
},
"Arizona": {
"productTemplate": {},
"colorVariants": false
}
};我们期望的结果是：
const respBuildArray = [
{
"cursor": "eyJsYXN0X2lkIjo4OT234234sYXN0X3ZhbHVlIjo4OTkzOTgyMjExfQ==",
"node": {
"id": "gid://shopify/Product/8923422211",
"title": "California Here"
}
},
{
"cursor": "eyJsYXN0X2lkIj234234LCJsYXN0X3ZhbHVlIjo5MzM4MDczODcwfQ==",
"node": {
"id": "gid://shopify/Product/23423470",
"title": "Texas Black Here"
}
}
];因为 "Texas 2000 Here" 存在于 currentTemplates 的键中，所以它被过滤掉了。
错误的尝试及原因分析
一个常见的错误尝试是使用includes方法结合Object.keys：
const respBuildArray = respProducts.filter(el => el.node.title.includes(Object.keys(currentTemplates).map(el => el)));
这段代码的问题在于：
- Object.keys(currentTemplates) 会返回一个包含所有键的数组，例如 ["Texas 2000 Here", "Alabama", "Alaska", "Arizona"]。
- .map(el => el) 在这里是冗余的，它只是简单地返回了原始数组。
- 最关键的问题是 el.node.title.includes(...)。String.prototype.includes() 方法期望一个字符串作为参数，用于检查当前字符串是否包含该子字符串。但这里传入的是一个数组（即Object.keys(currentTemplates)的结果）。一个字符串永远不会“包含”一个数组，因此这个条件始终为 false，导致 filter 返回一个空数组。
正确且高效的解决方案：使用 in 操作符
JavaScript的in操作符提供了一种简洁高效的方式来检查一个属性是否存在于一个对象中（无论是作为自有属性还是原型链上的属性）。它的语法是 propertyName in objectName，返回一个布尔值。
利用in操作符，我们可以直接检查 respProducts 中每个元素的 node.title 是否作为键存在于 currentTemplates 对象中。由于我们希望移除已存在的项，所以需要对 in 操作符的结果进行逻辑非（!）运算。
const respBuildArray = respProducts.filter( (product) => !(product.node.title in currentTemplates) );
代码解析：
- respProducts.filter(...)：这是一个高阶函数，用于创建一个新数组，其中包含通过回调函数测试的所有元素。
- product => ...：这是 filter 方法的回调函数，它会遍历 respProducts 数组中的每一个 product 对象。
- product.node.title：获取当前产品的标题字符串。
- product.node.title in currentTemplates：这会检查 product.node.title 的值是否是 currentTemplates 对象的一个键。
- 如果 product.node.title 是 currentTemplates 的一个键（例如 "Texas 2000 Here"），则此表达式返回 true。
- 如果 product.node.title 不是 currentTemplates 的键（例如 "California Here"），则此表达式返回 false。
- !(...)：对 in 操作符的结果进行逻辑非运算。
- 如果 in 返回 true（产品标题存在于模板中），! 会使其变为 false，该产品将不会被包含在新数组中。
- 如果 in 返回 false（产品标题不存在于模板中），! 会使其变为 true，该产品将被包含在新数组中。
完整示例代码
const respProducts = [
{
"cursor": "eyJsYXN0X2lkIjo4OT234234sYXN0X3ZhbHVlIjo4OTkzOTgyMjExfQ==",
"node": {
"id": "gid://shopify/Product/8923422211",
"title": "California Here"
}
},
{
"cursor": "eyJsYXN0X2lkIjo5234234sYXNlYXN0X3ZhbHVlIjo5MDExNDM0MzA3fQ==",
"node": {
"id": "gid://shopify/Product/923423434307",
"title": "Texas 2000 Here"
}
},
{
"cursor": "eyJsYXN0X2lkIj234234LCJsYXN0X3ZhbHVlIjo5MzM4MDczODcwfQ==",
"node": {
"id": "gid://shopify/Product/23423470",
"title": "Texas Black Here"
}
}
];
const currentTemplates = {
"Texas 2000 Here": {
"productTemplate": {},
"colorVariants": false
},
"Alabama": {
"productTemplate": {},
"colorVariants": false
},
"Alaska": {
"productTemplate": {},
"colorVariants": false
},
"Arizona": {
"productTemplate": {},
"colorVariants": false
}
};
const respBuildArray = respProducts.filter(
(product) => !(product.node.title in currentTemplates)
);
console.log(respBuildArray);
/*
输出结果：
[
{
"cursor": "eyJsYXN0X2lkIjo4OT234234sYXN0X3ZhbHVlIjo4OTkzOTgyMjExfQ==",
"node": {
"id": "gid://shopify/Product/8923422211",
"title": "California Here"
}
},
{
"cursor": "eyJsYXN0X2lkIj234234LCJsYXN0X3ZhbHVlIjo5MzM4MDczODcwfQ==",
"node": {
"id": "gid://shopify/Product/23423470",
"title": "Texas Black Here"
}
}
]
*/注意事项与性能考量
区分 in 和 hasOwnProperty： in 操作符会检查属性是否存在于对象本身或其原型链上。如果只需要检查对象自身的属性，可以使用 Object.prototype.hasOwnProperty.call(object, propertyName)。但在本例中，currentTemplates 的键就是我们关注的属性，所以 in 操作符足够且更简洁。
性能： 对于查找对象键，in 操作符的性能通常非常好，因为它直接利用了JavaScript引擎内部的哈希表查找机制。对于中等规模的数据集，这种方法非常高效。
-
大数量级优化（可选）： 如果 currentTemplates 对象非常庞大（例如，有数十万个键），并且 respProducts 数组也很大，那么每次 filter 迭代都执行 in 操作符可能仍然会带来一些开销。在这种极端情况下，可以考虑将 currentTemplates 的键预先转换成一个 Set，因为 Set.prototype.has() 方法在查找大量元素时通常具有 O(1) 的平均时间复杂度。
// 针对超大数据量的优化方案 const templateTitlesSet = new Set(Object.keys(currentTemplates)); const respBuildArrayOptimized = respProducts.filter( (product) => !templateTitlesSet.has(product.node.title) );
然而，对于大多数常见用例，直接使用 in 操作符已经足够高效且代码更简洁。
总结
通过本教程，我们学习了如何利用JavaScript的in操作符，结合数组的filter方法，高效且准确地根据一个对象的键来筛选另一个对象数组。这种方法避免了不必要的中间数据结构创建，提高了代码的可读性和执行效率。掌握这种技巧，将有助于您在处理复杂数据过滤场景时编写出更健壮、更优化的JavaScript代码。
