在JavaScript中使用带有reduce的map来过滤数组中的对象

Question

freecodecamp有一个问题，详细信息如下：

需求：
使一个函数遍历对象数组（第一个参数）并返回具有匹配的名称和值对的所有对象的数组（第二个参数）。

例如，如果第一个参数是[{first：“ Romeo”，last：“ Montague”}，{first：“ Mercutio”，last：null}，{first：“ Tybalt”，last：“ Capulet”}]，并且第二个参数是{last：“ Capulet”}，则必须从数组中返回第三个对象（第一个参数），因为它包含名称和其值，该对象作为第二个参数传递。

预期结果：

whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" }) should return [{ first: "Tybalt", last: "Capulet" }].

whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 }) should return [{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }].

whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 }) should return [{ "apple": 1, "bat": 2, "cookie": 2 }].

whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, { "bat":2 }], { "apple": 1, "bat": 2 }) should return [{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie":2 }].

并且根据站点，有这样的解决方案：

function whatIsInAName(collection, source) {
  var srcKeys = Object.keys(source);

  // filter the collection
  return collection.filter(function (obj) {
    return srcKeys
      .map(function(key) {
        return obj.hasOwnProperty(key) && obj[key] === source[key];
      })
      .reduce(function(a, b) {
        return a && b;
      });
  });
}

// test here
whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });

在此解决方案中，有一件事我不太了解，那就是map函数的返回值。

在我的期望中，map函数将循环遍历所有键和值对以检查其是否匹配，并返回具有布尔值的数组，即[[true，false}，{false，false}]等，然后将布尔值传递给reduce函数。

但是，当我使用以下脚本测试map函数时：

var source = { last: "Capulet" };
var collection = [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }];
var srcKeys = Object.keys({ last: "Capulet" });

collection.filter(function(obj){
  return srcKeys.map(function(key){
    return obj.hasOwnProperty(key) && obj[key] === source[key];
  })
})

回报是这样的

(3) [{…}, {…}, {…}]
 0: {first: "Romeo", last: "Montague"}
 1: {first: "Mercutio", last: null}
 2: {first: "Tybalt", last: "Capulet"}
 length: 3
  __proto__: Array(0)

在这种情况下，我有2个问题：

1. 在map函数中，它将创建一个新数组，并在调用数组中的每个元素上调用提供的函数。 在这种情况下，由于我们只想返回符合条件的元素，为什么它不返回布尔值或只返回具有匹配值的元素，而是返回所有值？ 还是我对映射功能有误解？

2. 在map函数之后的reduce函数中，它如何获取映射的布尔值到单个布尔值，该布尔值指示所有srcKeys是否都通过上述条件？ 例如，在这种情况下，reduce函数是否简单地获取map的返回值并进一步进行计算？

非常感谢您的提前帮助！

Answer 1

如我所说，功能map不是必需的。

可以使用函数filter用函数沿着every为了过滤那些匹配的键值对对象（第二PARAM），该对象。

 let whatIsInAName = (arr, obj) => arr.filter(o => Object.keys(obj).every(k => obj[k] === o[k])); console.log(whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 })); console.log(whatIsInAName([{ "first": "Romeo", "last": "Montague" }, { "first": "Mercutio", "last": null }, { "first": "Tybalt", "last": "Capulet" }], { "last": "Capulet" })); console.log(whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 })); console.log(whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, { "bat":2 }], { "apple": 1, "bat": 2 })); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

map部分将source所有键值对映射到一个布尔数组，该布尔数组指示值是否在obj中：

 var obj = { a: 1, c: 3 };
 var source = { a: 1, b: 2, c: 3 };

 var mapped = Object.keys(source).map(key => obj[key] === source[key]);

 console.log(mapped); // [true, false, true]

现在，该数组不能用作直接过滤的返回值，因为数组总是真实的，而不管是什么。 现在，reducer将该数组转换为一个布尔值，如下所示：

 [true, false, true].reduce((a, b) => a && b) // false

是相同的：

 true && false && true // false

因此，如果所有键值均存在，则最后返回true。

---

PS：停止此过程，建议的代码很糟糕。