Javascript函数调试 - 为什么这个过滤器功能不能正常工作？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript函数调试 - 为什么这个过滤器功能不能正常工作？相关的知识，希望对你有一定的参考价值。
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" }]
在你的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)[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），你应该使用它。
以上是关于Javascript函数调试 - 为什么这个过滤器功能不能正常工作？的主要内容，如果未能解决你的问题，请参考以下文章
是否可以覆盖 JavaScript 的 toString() 函数来为调试提供有意义的输出？