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？

列表项应分散到两个单独的数组中，因此基本上结果应该是：

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()合并到您的 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)

Answer 2

传播语法的替代方案，似乎我们有几个选择。但我们真的有吗？好吧，这取决于情况 - 让我们专注于concat和push

康卡特

正如许多人所建议的那样，非常简单明了，并且是一种干净的方式。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)

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()。通常，尽管 spread 运算符没有填充代码，但您可以使用其他方法将项目插入到不同索引的数组中。