js 的 find() 为什么不能直接用 “.” 访问对象属性?

CaixK
  • 514
江苏

find() 为什么不能直接 . 访问对象属性?如果想拿到 .name 应该咋写了,谢谢各位

const a = [
    {
        name: "全日制",
        value: 1
    },
    {
        name: "全日制2",
        value: 2
    }
]

image.png

回复
阅读 2.4k
9 个回答
边城
  • 55.5k
四川

这里有几个点需要注意,最重要的是通过文档来了解方法/函数的行为。一般 JS 我比较喜欢查 MDN。这里有 .find() 的文档

文档中的描述 (Description) 部分清楚的说明了 find 行为是根据 callback 函数的行为来判断是否找到元素,而 callback 通过返回值是 truthy(这个链接只有英文版描述中有)来判断元素被找到。不过即然看到 truthy,不妨也去了解一下 falsy

所以,代码中返回 i.name,只要 name 存在且不是空串,它就会被当作找到。在样例数据中,i.value == 2 的那项,i.name 不是空,所以会被当作 true 来使用。敲重点,find callback 只返回 truthy/falsy,你可以当只返回 true/false 来看待。

在 callback 舞台 truthy 之后,find 知道找到了你要找的东西,会直接把这个对象返回出来。你会得到整个对象(数组元素),而不是它的某个属性。不过既然都得到对象了,直接按属性取你想要的值就好了。但是,这里仍然需要注意另一个重点:并不是每次都一定会找到符合条件的元素,所以 find 是有可能返回 undefined 的。如果对 undefined 取属性会出错,因为在取值之前需要先判断,或者使用可选链运算符

终上,你需要代码应该像这样:

const name = a.find(it => it.value == 2)?.name;
console.log(name);

或者(结果逻辑和上面那段略有不同,这个只在找到的情况下打印)

const el = a.find(it => it.value == 2);
if (el) {
    console.log(el.name);
}
望月
  • 37
安徽
const { name } = a.find(it => it.value === 1) // name = 全日制
_William
  • 30
北京
const newA = a.map(v=>v.name)

是所有name,还是根据条件获取的某一个name

何以旧林
  • 354
浙江

建议转成 map

const a = []
const aValueNameMap = {}

a.forEach(r => aValueNameMap[r.id] = r.name)

aValueNameMap[1]
aValueNameMap[2]
张仪ranck
  • 398
四川

find是查找满足条件的对象

如果要从数组对剥离对象的 name 数组可以

const nameList = a.map(item => item.name) 

如果想获取 value = 2name

a.reduce((result, current)=> {
    if(current.value === 2){
        result = current.name
    }
    return result
}, "")

当然更好的做法还是先通过 find 获取到目标对象,在从对象中取值

const target = a.find(it => it.value === 2) 
target.name
gethin
  • 133
香港

MDN_find

find 它只是帮你找到数组的某一项,然后返回。

const tagetItem = a.find(item => item.value === 1)
// { name: '全日制', value: 1 }

image.png
是这个意思吗

find不接受你的内部返回,它的返回值是固定的数组匹配项

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏