js for循环以逗号拆分为新数组

Question

原数据格式↓

const data = [{ name: 'apple', cut: 'a,b,c' }, { name: 'trigger', cut: 'a,g' }]

期望数据格式↓

const data1 = [{ name: 'apple', final: 'a' },
               { name: 'apple', final: 'b' },
               { name: 'apple', final: 'c' },
               { name: 'trigger', final: 'a' },
               { name: 'trigger', final: 'g' }]

在原数据格式data中的cut字段，用逗号来拆分为新字段final，name不变

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

Answer 1

基本思路：把 cut 拆分之后进行一次映射，可以拿到每个原始对象对应的一个数组，组合起来就是一个二维数据；再把这个二维数据展开，就是你要的答案。

flatMap 就是先映射再展开

const data = [{ name: 'apple', cut: 'a,b,c' }, { name: 'trigger', cut: 'a,g' }];

const data1 = data.flatMap(it =>
    it.cut.split(",")
        .map(s => ({ name: it.name, final: s }))
);

console.log(data1);

Answer 2

const data = [{ name: 'apple', cut: 'a,b,c' }, { name: 'trigger', cut: 'a,g' }]
const res = []
data.forEach(item => {
  const arr = item.cut.split(',')
  arr.forEach(it => {
    res.push({
      name: item.name,
      final: it
    })
  })
})
console.log(res)

Answer 3

const data = [{ name: 'apple', cut: 'a,b,c' }, { name: 'trigger', cut: 'a,g' }]
console.log(data.reduce((total, item) => {
  return total.concat(item.cut.split(',').map(val => {
    const res = {}
    res.name = item.name
    res.final = val
    return res
  }))
}, []))

Answer 4

data.reduce((a,c)=>{
    c.cut.split(',').forEach(final=>{
       a.push({
         name:c.name,
         final  
       })
    })
    return a;
},[])

Answer 5

const data = [{ name: 'apple', cut: 'a,b,c' }, { name: 'trigger', cut: 'a,g' }];

const split = (arr) => {
    if (!arr || !Array.isArray(arr) || !arr.length) {
        return;
    }
    return arr.reduce((val, acc) => {
        acc.cut.split(',').forEach((item) => {
            val.push({
                name: acc.name,
                cut: item,
            });
        });
        return val;
    }, [])
};

console.log(split(data));