遍歷 object 並插入元素

Question

假設我有這個：

const data = [
  {
    table: [
      [{
        textValue: 'One'
      },
      {
        textValue: 'Two',
        rows: 3
      },
      {
        textValue: 'Three',
        rows: 3
      },
      {
        textValue: 'Four'
      }],
      [{
        textValue: 'RED',
        rows: 2
      },
      {
        textValue: 'GREEN'
      },
      {
        textValue: 'BLUE',
        rows: 1
      }]
    ]
  }
];

我要追求的是它遍歷 object （ Object.entries()會工作嗎？）並看到rows存在並插入X個空''字符串，所以你會有類似的東西：

const data = [
  {
    table: [
      [{
        textValue: 'One'
      },
      {
        textValue: 'Two',
        rows: 3
      },
        '',
        '',
        '',
      {
        textValue: 'Three',
        rows: 3
      },
        '',
        '',
        '',
      {
        textValue: 'Four'
      }],
      [{
        textValue: 'RED',
        rows: 2
      },
        '',
        '',
      {
        textValue: 'GREEN'
      },
      {
        textValue: 'BLUE',
        rows: 1
      },
      ''
      ]
    ]
  }
];

我考慮過使用for in但我不知道父 object 在推送元素時對其進行編輯。

Answer 1

您可以使用.map()和.flatMap() ，這將根據給定 object 的rows數返回插入的字符串字符數組，該數組將被展平為結果數組：

 const data = [{ table: [ [{ textValue: 'One' }, { textValue: 'Two', rows: 3 }, { textValue: 'Three', rows: 3 }, { textValue: 'Four' } ], [{ textValue: 'RED', rows: 2 }, { textValue: 'GREEN' }, { textValue: 'BLUE', rows: 1 } ] ] }]; const result = data.map(obj => ({...obj, table: obj.table.map(arr => arr.flatMap((iobj) => [iobj, ...Array(iobj.rows || 0).fill('')]) ) })); console.log(result);

 .as-console-wrapper { max-height: 100%;important;} /* ignore */

Answer 2

我不會擴展數據 object 而是使用適當的 reducer 方法將其內容復制到一個新表中以簡化過程，應該很簡單：

const transformedTable = data[0].table.map(e => e.reduce((acc, val) => ([...acc, val, ...(new Array(val.rows || 0)).fill('')]), []));

 const data = [ { table: [ [{ textValue: 'One' }, { textValue: 'Two', rows: 3 }, { textValue: 'Three', rows: 3 }, { textValue: 'Four' }], [{ textValue: 'RED', rows: 2 }, { textValue: 'GREEN' }, { textValue: 'BLUE', rows: 1 }] ] } ]; const transformedTable = data[0].table.map(e => e.reduce((acc, val) => ([...acc, val, ...(new Array(val.rows || 0)).fill('')]), [])); document.querySelector('#result').innerText = JSON.stringify(transformedTable);

 <pre id="result"></pre>

Answer 3

這是一個使用對象掃描的解決方案，並且更靈活一些。 使用 vanilla javascript 可能是更好的選擇，但這取決於您的要求

 // const objectScan = require('object-scan'); const data = [{ table: [[ { textValue: 'One' }, { textValue: 'Two', rows: 3 }, { textValue: 'Three', rows: 3 }, { textValue: 'Four' } ], [ { textValue: 'RED', rows: 2 }, { textValue: 'GREEN' }, { textValue: 'BLUE', rows: 1 } ]] }]; const modify = (obj) => objectScan(['[*].table[*][*].rows'], { rtn: 'count', filterFn: ({ gparent, gproperty, value }) => { gparent.splice(gproperty + 1, 0, ...Array(value).fill('')); } })(obj); console.log(modify(data)); // returns number of modifications // => 4 console.log(data); // => [ { table: [ [ { textValue: 'One' }, { textValue: 'Two', rows: 3 }, '', '', '', { textValue: 'Three', rows: 3 }, '', '', '', { textValue: 'Four' } ], [ { textValue: 'RED', rows: 2 }, '', '', { textValue: 'GREEN' }, { textValue: 'BLUE', rows: 1 }, '' ] ] } ]

 .as-console-wrapper {max-height: 100%;important: top: 0}

 <script src="https://bundle.run/object-scan@15.0.0"></script>

免責聲明：我是對象掃描的作者