Javascript擴展運算子替代方案

所以我正在使用使用 javascript es5 的舊代碼庫，這意味著我不能使用擴展運算子

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

uj5u.com熱心網友回復：

您可以使用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)

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

如果您只是想將一個專案添加到串列的前面，您可以始終使用Array.prototype.unshift()，而在后面始終使用，Array.prototype.push()甚至可以使用Array.prototype.concat()。通常，雖然擴展運算子沒有 polyfill，但您可以使用替代方法將專案插入到不同索引的陣列中。

uj5u.com熱心網友回復：

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)

推

與 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)

標籤：javascript 反应 有角的 打字稿

上一篇：嘗試在appSettings.json中設定環境變數-Angular和Typescript

下一篇：在可觀察訂閱中呼叫服務