JavaScript通过id过滤数据时filter方法后[0]的作用是什么？

问题解答 #

[0]的作用 #

• JavaScript的filter()是数组原生方法，会返回所有满足筛选条件的元素组成的新数组，哪怕只有1条匹配结果，也会被包裹在数组中返回。
• 你的业务场景中用户id是唯一标识，和post.userId匹配的用户只会有1个，因此filter()返回的数组长度为1，[0]就是取出这个数组下标为0的元素，也就是你要找的匹配用户对象，后续才能调用该对象的username属性。

以你给出的示例数据为例，Users.filter((u) => u.id === post?.userId)的返回结果是：

[{id: 1, profilePicture: "assets/person/1.jpeg", username: "Safak Kocaoglu"}]

加[0]之后才能拿到数组里的用户对象，进而读取username属性。

更优的代码写法 #

你当前的写法存在潜在报错风险：如果没有匹配到对应的用户，filter()返回的是空数组，取[0]会得到undefined，再访问username会直接抛出JS错误导致页面白屏。

更适合这个场景的是数组的find()方法，它会直接返回第一个满足条件的元素，不需要再手动取下标，配合可选链可以避免报错：

<span className="postUsername">
    {Users.find((u) => u.id === post?.userId)?.username}
</span>

内容的提问来源于stack exchange，提问作者suga sunshie