日常开发记录-当后端返回了键值对中的 value 需要前端自己处理成对应的 label 值时的方法...

最新推荐文章于 2025-12-03 18:49:33 发布

原创最新推荐文章于 2025-12-03 18:49:33 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #开发语言 #ecmascript

这段代码展示了如何在JavaScript中通过一个对象数组找到指定value对应的label。函数`getLabel`接收一个列表和一个值作为参数，返回匹配到的对象的label。如果找不到匹配的值，则返回输入的值本身。示例中，当查找的值存在于列表中时，如0和1，返回对应的label；当值不存在，如3，返回的就是输入的值3。

代码演示：

let list = [{ label: 'yibo', value: 0}, { label: '张三', value: 1}, { label: '李四', value: 2}]

function getLabel(list, v, value="value", label="label") {
    if(v !== undefined && Array.isArray(list) && list.length != 0) {
        // !list.find(item => item[value] == v) 
        // 剔除value不存在的情况,不会出现报错信息,value 不存在返回的值就是undefined,取反就是真
        // value存在就是返回{ label: 'yibo', value: 0},取反就是假
        return !list.find(item => item[value] == v) ? 
        v:list.find(item => item[value] == v)[label]
    }else {
        return v
    }
}   

let res = getLabel(list, 0)
let res1 = getLabel(list, 1)
let res2 = getLabel(list, 3)
console.log(res, res1, res2)