js 对奇怪的数组格式用冒号为切割进行改造为新对象

Question

原格式↓

const data = [['香蕉:123', '黄瓜:123'], ['梨子:321']]

理想格式↓

const data1 = [{ name: '香蕉', id: '123' },
               { name: '黄瓜', id: '123' },
               { name: '梨子', id: '321' }]

如上所示，用冒号为分割符号，左边为name，右边为id

请教各位大神该如何操作，小弟在这里先谢谢各位大神的解答了，感激不尽！

Answer 1

let result = data.reduce((result, items) => {
    return result.concat(items.map(item => {
        let tmp = item.split(":");
        return {name: tmp[0], id: tmp[1]}
    }))
}, []);



let result = data.map(items => {
    return items.map(item => {
        let [name,id] = item.split(":");
        return {name, id};
    })
}).flat();

Answer 2

expanedArr (arr) {
      // 将二维数组展开成一维数据
      const flat = arr.reduce((prev, next) => {
        return prev.concat(next)// 循环将数组进行拼接
      })
      // console.log(flat)
      return flat
    },

const data = [['香蕉:123', '黄瓜:123'], ['梨子:321']]

// 先将二维数组展开成一维数据
const arr = this.expanedArr(data)
// 得到['香蕉:123', '黄瓜:123','梨子:321']

// 然后再把arr的每个值用冒号分割就行了
const res = arr.map(item => {
        const its = item.split(':')
        return {
          name: its[0],
          id: its[1]
        }
      })
      console.log(res)

Answer 3

[['香蕉:123', '黄瓜:123'], ['梨子:321']].flat(Infinity).map(v => {
    const tmp = v.split(":")
    return {
       name: tmp.shift(),
       id: tmp.shift(),
    }
})

Answer 4

// => [{"name":"香蕉","id":"123"},{"name":"黄瓜","id":"123"},{"name":"梨子","id":"321"}]
const data1 = demo([['香蕉:123', '黄瓜:123'], ['梨子:321']])

function demo (list) {
  let res = []; list.forEach(item => item.forEach(names => {
    const [name, id] = names.split(':')
    res.push({ name, id })
  }))
  return res;
}

Answer 5

看到楼上大佬成群，只好杀一对大括号了。

[ ['香蕉:123', '黄瓜:123'], ['梨子:321'] ].flat(Infinity).map(s => Object.fromEntries(s.split(':').map((v, k) => [ [ "name", "id" ][k], v ])))