js中select多选的值怎么映射？

Question

var item = {
    id: 1,
    role: ['1', '2'],
    name: ''
};
var options = [{
    roleid: '1',
    label: '黄金糕'
}, {
    roleid: '2',
    label: '双皮奶'
}, {
    roleid: '3',
    label: '蚵仔煎'
}];

item的role对应option的roleid，如何获取的role对应的label集合的信息，赋值到name里面？js的方法
这更像是模拟一个select多选的方法

Answer 1

解决方法便如上面那位所述，但这里吾辈还是想说一些问题

• 模拟 select > options 应该使用 Map 而非 Array，因为 Map 是有序且高效的（根据 key 获取 value）
• 使用 Set 而非 Array 存放 id 列表，因为在多次选中时可能会存在重复
• 既然有了 role 用来存 option 列表，那么显示值 name 应该是绑定到 role 上的，一旦发生变化立即重新计算（例如 vuejs 中的 watch）

const item = {
  id: 1,
  role: new Set([1, 2]),
  name: '',
}
const options = new Map()
  .set(1, '黄金糕')
  .set(2, '双皮奶')
  .set(3, '蚵仔煎')

function calcName(role) {
  return role.map(k => options.get(k)).join(',')
}

const obj = new Proxy(item, {
  set(_, k, v) {
    if (k === 'role') {
      Reflect.set(_, 'name', calcName(Array.from(v)))
    }
    Reflect.set(_, k, v)
  },
})

item.name = calcName(Array.from(item.role))
console.log(obj.name)
obj.role = [1]
console.log(obj.name)
// 此处并未实现深度监听
obj.role.add(2)
console.log(obj.name)

Answer 2

item.name = []
item.role.forEach(role => {
  let option = options.find(op => op.roleid === role)
  option && item.name.push(option.label)
})

Answer 3

item.name = item.role.reduce((acc, cur) =>
    acc += options.find(item => item.roleid === cur).label + ',', '')