作为前端大白（比小白更白），在工作中使用select，treeSelect的表单元素时经常会碰到这样的场景，我们需要考虑回填的问题，所以存入后端的时候经常需要使用label和所谓的value（实际上后端只会解析value的值,通常来说用户只看的懂label，因为value通常是一坨英文单词）。
所以自己想了一道题，和大家分享。假如我们前端拿到这样的dataSource，用户选择了江西和浙江两个选项，我们需要将label和value都传给后端。
// 定义一个变量
let data = [
{"label": "江西","value": "jiangxi"},
{"label": "浙江","value": "zhejiang"},
{"label": "江苏","value": "jiangsu"},
{"label": "安徽","value": "anhui"}
]
其实我们选择的时候，能拿到的都是value值(不行你可以试试!)。例如我们在onChange事件或者其他事件时获取的value值类似如下：
// 定义一个变量存储value的值
let valueArr = ["jiangxi","zhejiang"]
// 我们最终是想得到下列的值
[{label: '江西',value: 'jiangxi'},{label: '浙江', value: 'zhejiang'}]
那么我们需要考虑如何把这个label加上去？
大致思路就是 先循环已有的value组成的数组，然后同时循环dataSource里面的数组，获取最终的既有label也有value的数组。(主要考察的是我们对于数组不同方法的理解,方法有很多种)
我们先来温习下数组里面有关循环的方法：
- map 这是react里面最常用的方法,用于列表渲染。会返回一个数组
- forEach 没有返回值
- filter 给定一个条件,把一个数组里面的元素过滤出来，会返回一个数组
- find 遍历数组,会返回第一个满足条件的第一个元素，而不是数组
刚开始试过以下这种方法，因为这个很容易让人联想到过滤。再仔细一想，如果valueArr里面存了多个值，无法枚举，所以这种方法被pass了。
// 通过遍历过滤的方法，将valueArr里面的值枚举，进行判断
let findTotalArr = data.filter(
e => e.value == valueArr[0] || e.value == valueArr[1]
)
第一种方法
// 通过map的方法，其实可以确定最终数组的长度，然后通过find的方法来匹配值，这个也是目前个人觉得最喜欢的写法
let findTotalArr = valueArr.map(
e => data.find(el => el.value === e)
)
console.log('findTotalArr====',findTotalArr)
第二种方法
// 用到了forEach方法，由于没有返回值，需要额外的变量，进行操作
let findTotalArr = []; // 额外的变量
data.forEach( e =>
valueArr.forEach( el =>
{if(el === e.value){
findTotalArr.push(e)
}
}
)
)
console.log('findTotalArr====',findTotalArr)
希望各位不吝赐教,欢迎交流!!!
