JavaScript 中通过ID查询数组对象中对应的值 select选择返回多个字段 ES6中Filter的使用方法 Select框返回ID和名称的方法

JavaScript中通过数组对象中的某一个值去获取与之对应的其他值

前情提要

前些天在做项目的时候遇到的一个问题，在Form表单通过接口提交给后台的时候，有几个select下拉框的字段，接口中定义的是即要所选的ID又要所选择的Name。但是我这边提交表单时只能选择获取一个值。所以才写了这个公共方法，方便后期再出现类似问题直接调用。

代码实现

我们可以通过ES6中的filter方法来过滤出来包含该元素的数组，具体操作如下

// 这是我的源数据数组，为什么有两个id为1的数据，并且有个value值还为空，这是为了模拟当数据中有脏数据时的现象。
let itemArray = [
    {
        id: 1,
        value: '',
    },
    {
        id: 1,
        value: '我是1',
    },
    {
        id: 2,
        value: '我是2',
    },
    {
        id: 3,
        value: '我是3',
    },
    {
        id: 4,
        value: '我是4',
    },
    {
        id: 5,
        value: '我是5',
    },
]
// 所选择的元素的ID
let selectId = 2
// selectItem是一个数组，这个数组中包含了所有id等于selectId的数组
const selectItem = itemArray.filter(value => value['id] === selectId)
// 一般情况只会出现一个所以直接返回该数组的第0条数据中的字段即可
console.log(selectItem[0].value)  // 我是2

上面这个就是一般性质的处理

我当时也是这么认为的，这样操作就可以返回了。可是，接下来又遇到了个多选框的问题，又是既要ID又要Name的，然后单纯的向上面这个方法写局限性和错误率挺大的，比如说未定义字段就没有做处理

然后我就改进了下这个方法，如下：

//(源数组, 已知元素, 已知元素的Key, 需要查找的Key, 是否唯一)
findItemByArray(array, item, itemKey, needKey, only) {
    let searchValue
    if (item instanceof Array) { // 判断传入的已知元素是否为数组
        searchValue = []
        item.forEach((v, i) => {
            let searchItem
            let mesList =  array.filter(value => value[itemKey] === v)                  // 先过滤出当前元素的数组
            searchItem = this.findItemByArray( mesList, v, itemKey, needKey, only )     // 再调用自己，执行非数组查询
            searchValue.push(searchItem)
        })
    } else {
        const searchValueList = array.filter(value => value[itemKey] === item)          // 过滤数据，返回类型为数组类型
        if (searchValueList.length > 1) {               // 判断返回的是否有多个数据(防止)
            if (only) {                                 // 是唯一数据,查询出多个值,脏数据处理
                searchValue = ''                        // 先设置个唯一数据的默认值
                searchValueList.forEach((v, i) => {
                    if (!!v[needKey]) {                 // 判断是否有准确的值
                        searchValue = v[needKey]
                    }
                })
            } else {
                searchValue = []                        // 先设置个不唯一数据的默认值
                searchValueList.forEach((v, i) => {
                    searchValue.push(v[needKey] || '')  // 插入数据、若数据不存在则插入空
                })
            }
        } else if ( searchValueList.length === 1 ) {    // 此时为正常的1值返回1数据
            searchValue = searchValueList[0][needKey]
        } else {                                        // 没查到数据，返回空
            searchValue = ''
        }
    }
    return searchValue
}

经过测试，这个方法可以满足大部分的使用情况。传入的参数

array: 该数据的来源
item: 这个数据的值
itemKey: 这个数据的值所对应的Key
needKey: 想要查询的值所对应的Key
only: 这个Key是否是对应唯一的值

console.log(findItemByArray( itemArray, 1, 'id', 'value', false))
// 返回结果为	["", "我是1"]
console.log(findItemByArray( itemArray, 1, 'id', 'value', true))
// 返回结果为	我是1
console.log(findItemByArray( itemArray, [1, 2], 'id', 'value', true))
// 返回结果为	["我是1", "我是2"]
console.log(findItemByArray( itemArray, [1, 2], 'id', 'value', false))
// 返回结果为	[["", "我是1"], "我是2"]

如果对大家有帮助的话还请点个赞呦~ ~ ！！