typescript JavaScript中数组扩展语法的替代方法

sq1bmfud  于 2023-04-07  发布在  TypeScript
关注(0)|答案(4)|浏览(115)

所以我使用的是一个使用ES5 JavaScript的旧代码库,这意味着我不能扩展数组

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],
      ...listOfItems
    ]
  }
};

如何在不使用上面...listOfItems所示的spread语法的情况下扩展listOfItems
listOfItems应该被分散到两个单独的数组中,所以结果应该是:

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],
      ['item1', 'test', '1'],
      ['item2', 'test2', '2']
    ]
  }
};
r6l8ljro

r6l8ljro1#

您可以使用concat()合并到body数组中

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

      var docDefinition = 
      {
        style: 'piecesTable',
        table: {
          widths: ['*', '*', '*'],
          body: [
            [
              {text: 'Reference', style: 'tableHeader'}, 
              {text: 'Alias', style: 'tableHeader'},
              {text: 'Type', style: 'tableHeader'},
            ],
            
          ].concat(listOfItems)
        }
      };
      
      console.log(docDefinition)
yacmzcpb

yacmzcpb2#

扩展语法的替代方案,看起来我们有几个选择。但是我们真的有吗?这取决于情况-让我们关注concatpush

concat

concat方法合并两个数组并返回新数组,所以它返回一个包含所有元素的数组,更像是使用spread。它不会影响现有数组,因为它返回新数组,因此我们可以很容易地使用它。让我们看看它的实际操作:

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],

    ].concat(listOfItems)
  }
};

console.log(docDefinition)

推送

concat不同,push方法会在数组末尾添加新元素,因此它会改变我们的基数组以添加新元素。该方法会更新数组的长度并返回新的长度。在我们的例子中,listOfItems是一个数组的数组,而不仅仅是元素的数组,如果我们直接应用push,它会推送数组的数组,这在某些情况下可能是可取的,但在另一些情况下可能不是。让我们看一下:

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],

    ],
  }
};

docDefinition.table.body.push(listOfItems);
console.log(docDefinition)

这里我们可以看到整个数组都被追加了,如果我们想删除它,我们可以使用flat方法来删除子数组到一定的深度,但这可能会影响代码的可读性。
相反,我们可以通过使用forEach(或其他数组遍历方法)将数组元素推送到目标数组,并将每个元素推送到目标数组。这里原始数组也发生了变化:

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],

    ],
  }
};

listOfItems.forEach(function(item){docDefinition.table.body.push(item)});
console.log(docDefinition)
kxe2p93d

kxe2p93d3#

使用concat()

const listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

const docDefinition = {
  style: 'piecesTable',
  table: {
  widths: ['*', '*', '*'],
  body: [
    [
      {text: 'Reference', style: 'tableHeader'}, 
      {text: 'Alias', style: 'tableHeader'},
      {text: 'Type', style: 'tableHeader'},
    ]
  ].concat(listOfItems)
};
ljo96ir5

ljo96ir54#

如果你只是想把一个元素添加到列表的前面,你可以使用Array.prototype.unshift(),后面的元素可以使用Array.prototype.push(),甚至Array.prototype.concat()。一般来说,虽然是there is no polyfill for the spread operator,但也有其他方法可以把元素插入到数组的不同索引处。

相关问题