匹配数组对象ID返回用户名遇返回值报错，该换循环吗？

原始代码 #

this.wiredUserData =
  [
    {"result":
    {"fields":
    {"Id":{"value":"005xx000001X85BAAS"},
     "Username":{"value":"emily@gmail.com"}}}}, 
    {"result":
    {"fields":
    {"Id":{"value":"005xx000001X7sHAAS"},
     "Username":{"value":"kristina@gmail.com"}}}}
  ]

const uid = "005xx000001X85B"

usernameData(uid) {
    if (this.wiredUserData) {
        this.wiredUserData.forEach(function (item) {
            let wiredUserId = item.result.fields.Id.value.slice(0, 15);
            console.log(wiredUserId, "wired");
            console.log(uid, "uid");
            let wiredUsername = item.result.fields.Username.value;
            if (uid === wiredUserId) {
                return wiredUsername;
            }
        });
    }
    return '';
}

问题原因 #

1. forEach的return无法影响外层函数：forEach循环的回调函数里的return只能终止当前迭代的回调逻辑，不能让外层的usernameData函数返回值。哪怕匹配到目标用户，外层函数最终还是会执行到末尾的return ''，返回空字符串。
2. 回调函数返回值不一致：forEach的回调中只有匹配时才会返回值，不匹配的分支没有返回值，触发了ESLint的consistent-return规则，导致“Expected to return a value at the end of function”错误。

解决方案 #

推荐使用以下两种更适配需求的写法：

方法1：使用find方法（最简洁） #

find会返回数组中第一个满足条件的元素，直接基于这个特性获取匹配用户：

usernameData(uid) {
    if (!this.wiredUserData) return '';
    
    const matchedItem = this.wiredUserData.find(item => {
        const wiredUserId = item.result.fields.Id.value.slice(0, 15);
        return uid === wiredUserId;
    });
    
    return matchedItem ? matchedItem.result.fields.Username.value : '';
}

方法2：使用for...of循环 #

如果需要更直观的遍历控制，for...of循环可以在匹配到结果时直接让外层函数返回：

usernameData(uid) {
    if (!this.wiredUserData) return '';
    
    for (const item of this.wiredUserData) {
        const wiredUserId = item.result.fields.Id.value.slice(0, 15);
        if (uid === wiredUserId) {
            return item.result.fields.Username.value;
        }
    }
    
    return '';
}

这两种方法都能实现需求：匹配到对应uid时返回用户名，未匹配或数据不存在时返回空字符串，同时避免了ESLint的返回值一致性错误。

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