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

Question

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

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

Answer 1

这里有几个点需要注意，最重要的是通过文档来了解方法/函数的行为。一般 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);
}

Answer 2

const { name } = a.find(it => it.value === 1) // name = 全日制

Answer 3

https://developer.mozilla.org...
find返回的是return结果为真的第一个元素
a.find(v => v.value == 2)?.name

Answer 4

const newA = a.map(v=>v.name)

Answer 5

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

Answer 6

建议转成 map。

const a = []
const aValueNameMap = {}

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

aValueNameMap[1]
aValueNameMap[2]

Answer 7

find是查找满足条件的对象

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

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

如果想获取 value = 2 的 name

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

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

const target = a.find(it => it.value === 2) 
target.name

Answer 8

MDN_find

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

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

Answer 9

是这个意思吗

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