JavaScript 中数组传播语法的替代方案

Question

所以我正在使用一个使用 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

...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']
    ]
  }
};

Answer 1

您可以使用

concat()

合并到您的身体阵列

     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)

Answer 2

Spread 运算符的替代方案，似乎我们有几种选择。但我们真的有吗？好吧，这取决于情况-让我们关注

concat

和

push

连接

正如许多人所建议的那样，非常简单明了。 concat 方法合并两个数组并返回新数组，所以它返回一个包含所有元素的单个数组，更像是展开运算符。它不会影响现有数组，因为它返回新数组，因此我们可以很容易地使用它。让我们看看实际效果：

     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)

推

push 方法不像 concat 会 add new items to the end of the array，所以它改变我们的基本数组以添加新元素。该方法将更新数组的长度并返回新的长度。在我们的例子中，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)

Answer 3

尝试

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)
};

Answer 4

如果你只是想把一个项目添加到列表的前面，你总是可以使用

Array.prototype.unshift()

，而对于后面总是有

Array.prototype.push()

，甚至

Array.prototype.concat()

。一般来说，虽然没有用于扩展运算符的 polyfill，但是有其他方法可以将项目插入到数组中不同索引处，您可以使用这些方法。