Javascript函数调试 - 为什么这个过滤器功能不能正常工作？

Question

JavaScript - Intermediate Algorithm Scripting

我试图使JavaScript函数查看对象数组（第一个参数）并返回具有匹配的属性和值对的所有对象的数组。

虽然在freeCodeCamp给出了正确的解决方案，但我想知道我的代码中存在哪些问题和错误。此外，我找到了堆栈溢出的解决方案，但我没有得到我的代码有什么问题。

---

这是我的代码

function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];
  // Only change code below this line
  var obj;
  var prop;
  var keys = Object.keys(source);
  for (var i = 0; i < collection.length; i++) {
    for (var j = 0; j < Object.keys(source).length; j++) {
      obj = collection[i];
      prop = Object.keys(source)[j];
      if (obj.hasOwnProperty(prop) && obj.prop === source.prop) {
        arr = arr.concat([obj]);
      }
    }
  }
  // Only change code above this line
  return arr;
}

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

---

这是我得到的结果

[{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]

代替

[{ first: "Tybalt", last: "Capulet" }]

---

Answer 1

在你的if语句中你需要有obj[prop] === source[prop]而不是obj.prop === source.prop。见computed property names。

由于两个对象都不包含属性prop，因此条件总是评估为true（undefined === undefined是true）。

---

演示

（注意我将obj = collection[i];移动到外部循环，因为它在每次内部循环时都是多余的）

function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];
  // Only change code below this line
  var obj;
  var prop;
  var keys = Object.keys(source);
  for (var i = 0; i < collection.length; i++) {
    obj = collection[i];
    for (var j = 0; j < Object.keys(source).length; j++) {
      prop = Object.keys(source)[j];
      if (obj.hasOwnProperty(prop) && obj[prop] === source[prop]) {
        arr = arr.concat([obj]);
      }
    }
  }
  // Only change code above this line
  return arr;
}

let res = whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });

console.log(res)

Answer 2

[Kristianmitk显然在我写这篇文章的同时添加了一些解释，但我也会在这里留下这个答案，以防替代解释对任何人都有用......]

---

Kristianmitk说的是正确的，但也许可以使用一些解释。

您的代码返回每个元素的原因是，在每种情况下，您最终都会检查

if (/*...*/ && obj.prop === source.prop) {
    //...
}

但obj.prop的意思是“这个名为prop的财产”;也就是说，你会用它来查找声明为的对象的值“xyzzy”

{ prop: "xyzzy" }

你想要的是检查由变量prop的值命名的属性。这是使用[]运算符完成的。

var prop = "foo";
var obj = { prop: "nope" , foo: "found it" };

// these are true:
obj.prop === "nope"
obj[prop] === "found it"

在您的测试用例中，由于所讨论的对象都没有prop属性，因此所有值都是undefined。而且因为JavaScript是动态的，所以可以引用那些未定义的值（没有错误）。因为JavaScript是由异教徒写的，所以undefined === undefined是true。

还有其他方法可以改进代码（为了便于阅读），但我认为这是唯一能够使代码无法正常工作的方法。接下来我要看的是，即使在你说完之后

var keys = Object.keys(source);

当你可以说Object.keys(source)时，你后来反复拨打keys。正如一些人所说，这不是一个“有效”的问题。有一次使用变量肯定更有效率，也许它仍然是，但关心在该级别的优化并不是一个好主意。但是，关注可读性是一个好主意，一旦你给了keys数组一个漂亮，简单的名字（keys），你应该使用它。