如果 Object 属性具有特定分隔符，如何拆分 JavaScript 数组元素

Question

我有一个对象数组，其中一些对象有一个属性，其中包含逗号。我想要做的是，如果该对象具有包含逗号的属性，我想将其拆分为一个新对象并将所有其他属性递归复制到一个新的数组元素中。

示例： 我需要转换这个对象数组：

[ { 
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },

  { 
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },

 ]

到这里：

[ { 
    prop1: 'text1',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },

    { 
    prop1: 'text2',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },

    { 
    prop1: 'text3 ',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },   

  { 
    prop1: 'text1',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },

      { 
    prop1: 'text2',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },

      { 
    prop1: 'text3',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' },  
 ]

通过在 prop1 处拆分，然后递归地将所有其他属性复制到新的数组元素中。

编辑： 我实际上可以在 google 表格中找到它，但不能完全将它移植到 vanilla JS：

function splitColumnAndRepeatRows(anArray, splitColumnIndex) {
  var output = [];
  for (i in anArray){ 
    var splitArray = anArray[i][splitColumnIndex].split(","); 
    for (j in splitArray){ 
      var row = anArray[i].slice(0); 
      row[splitColumnIndex] = alltrim(splitArray[j]); 
      output.push(row); 
    }
  }
  return output;
}

function alltrim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

Answer 1

我喜欢 array.concat 结合 reduce() 和 map() 的简洁性，但显然有很多方法可以做到这一点。尚不清楚您的 prop1 字符串是否总是有空格，因此使用一个小的正则表达式来消除它们。

let arr = [ { prop1: ' text1 , text2 , text3 ',prop2: 'stuff1',prop3: 'stuff1',prop4: 'stuff1',prop5: 'https://www.stuff1.com' },{ prop1: ' text1 , text2 , text3 ',prop2: 'stuff2',prop3: 'stuff2',prop4: 'stuff2',prop5: 'https://www.awefewfew.com' },]

let final = arr.reduce((a, {prop1, ...obj}) => a.concat(
        prop1.trim()
        .split(/\s*,\s*/)
        .map(prop => ({prop1: prop, ...obj}))
    ), [])

console.log(final)

Answer 2

使用.reduce 迭代输入，将prop1 除以,，然后将每个添加到输出数组中：

const input=[{prop1:' text1 , text2 , text3 ',prop2:'stuff1',prop3:'stuff1',prop4:'stuff1',prop5:'https://www.stuff1.com'},{prop1:' text1 , text2 , text3 ',prop2:'stuff2',prop3:'stuff2',prop4:'stuff2',prop5:'https://www.awefewfew.com'},]
const ouput = input.reduce((accum, { prop1, ...rest }) => {
  const prop1s = prop1.trim().split(' , ');
  prop1s.forEach(prop1 => accum.push({
    prop1,
    ...rest
  }));
  return accum;
}, []);
console.log(ouput);

Answer 3

使用reduce 和split 和forEach

let data = [
  {
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com'
  },

  {
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com'
  }
]
let res = data.reduce((re, obj) => {
  obj.prop1.split(',').forEach(val => {
    re.push(Object.assign({}, obj, { prop1: val.trim() }))
  })
  return re
}, [])
console.log(res)

Answer 4

试试这个：

var jsonObj = [{ 
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff1',
    prop3: 'stuff1',
    prop4: 'stuff1',
    prop5: 'https://www.stuff1.com' },
  { 
    prop1: ' text1 , text2 , text3 ',
    prop2: 'stuff2',
    prop3: 'stuff2',
    prop4: 'stuff2',
    prop5: 'https://www.awefewfew.com' }];
    
 var newArr = [];   
 
 for (var i in jsonObj) {
   var splitString = jsonObj[i].prop1.split(',');
   
   splitString.map(item => {
     newArr.push({
       "prop1": item,
       "prop2": jsonObj[i].prop2,
       "prop3": jsonObj[i].prop3,
       "prop4": jsonObj[i].prop4,
       "prop5": jsonObj[i].prop5
     });
   });
 }
 
 console.log(newArr);