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

- Eric Bergman

---

“concat”不是你想要的吗？ - Dave Newton

我的意思是，在docDefinition定义之后，您可以这样做：listOfItems.forEach((item) => {docDefinition.table.body.push(item)}？ - CVerica

这是一个很好的建议，谢谢 @CVerica - Eric Bergman

很高兴能够帮忙。似乎大家建议的concat()也可以正常工作，并且看起来更加简洁。祝你好运！ - CVerica

@MathewsSunny 您是正确的。forEach是es5，但箭头函数不是。因此，它应该是listOfItems.forEach(function (item) { docDefinition.table.body.push(item)})。 - CVerica

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)

- charlietfl

---

这个有效了，我完全忘记了，谢谢！ - Eric Bergman

Answer 2

展开语法的替代方案，似乎我们有几个选项。但是我们真的有吗？这取决于情况 - 让我们专注于concat和push

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)

push

push 方法与 concat 不同，它会将新项添加到数组的末尾，因此它会改变我们的基本数组以添加新元素。该方法将更新数组的长度并返回新长度。在我们的情况下，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)

- Mathews Sunny

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

- NeNaD

Answer 4

如果你只是想在列表前面添加一个项目，你可以始终使用 Array.prototype.unshift() ，对于后面则始终有 Array.prototype.push() 或者甚至是 Array.prototype.concat()。然而一般来说，没有展开运算符的polyfill，但是有其他的方式可以插入不同索引的项到数组中。

- toki