JavaScript中filter筛选结果取[0].price而非[item].price的原因是什么？

首先明确Array.prototype.filter()的核心行为：

• 该方法遍历数组后，返回所有满足判断条件的元素组成的新数组，无论匹配到多少个结果，返回值永远是数组类型。

针对你代码里的getCostOf函数：
你传入的参数是水果的唯一id，而data.fruits数组中每个水果的id都是全局唯一不重复的，所以data.fruits.filter(item => item.id == id)的执行结果永远是长度为1的数组，数组里唯一的元素就是你要查找的对应id的水果对象。
末尾加[0]的作用就是从filter返回的结果数组中取出第0位（也就是唯一的那个）水果对象，之后才能访问该对象的price属性。

为什么不能写[item].price？ #

有两个核心问题：

1. 作用域限制：item是filter回调函数的内部形参，它的作用域仅在filter(item => { /* 这里才能访问item */ })的回调函数块内，出了这个范围外层代码根本访问不到item变量，直接写会抛出item is not defined的错误。
2. 语法逻辑错误：就算假设可以拿到item变量，[item]的语法是把item作为元素创建一个新数组，数组本身不存在price属性，这么写最终只会得到undefined。

优化建议 #

这种查找唯一匹配项的场景，用Array.prototype.find()方法更合适，find会直接返回第一个匹配的元素，不需要额外取下标：

const getCostOf = id => data.fruits.find(item => item.id == id).price

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