JavaScript中Array filter方法返回结果不符合预期问题排查

核心问题拆解： #

• filter返回数组导致显示异常：filter方法的返回值是匹配元素组成的数组，哪怕只有一个匹配项，也是长度为1的数组。当把数组直接赋值给innerHTML时，JS会自动调用数组的toString()方法，数组中的对象转成字符串就是[object Object]，这就是你看到的结果。
• 字符串与数字隐式比较的隐患：value.key是字符串类型（'1'、'2'），和数字1比较虽然能通过隐式转换得到结果，但这种写法不够严谨，容易在其他场景下出bug，建议显式转换类型后再比较。

修正方案 #

如果你只想获取第一个匹配的对象（这里就是key为'2'的对象），用find方法代替filter，它会直接返回匹配的单个元素而非数组；之后根据需求将对象转成可读格式：

方案1：显示完整对象（转成JSON字符串）

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const secret = [
  {key:'1'},
  {key:'2'}
];

// 用find获取第一个匹配的对象，转成JSON格式字符串显示
const matchedItem = secret.find(value => Number(value.key) > 1);
document.getElementById("demo").innerHTML = JSON.stringify(matchedItem);
</script>
</body>
</html>

输出结果：{"key":"2"}

方案2：只显示对象的key值

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const secret = [
  {key:'1'},
  {key:'2'}
];

const matchedItem = secret.find(value => Number(value.key) > 1);
// 处理无匹配项的情况，避免报错
document.getElementById("demo").innerHTML = matchedItem ? matchedItem.key : '无匹配结果';
</script>
</body>
</html>

输出结果：2

内容的提问来源于stack exchange，提问作者Arun K