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"]