所以我正在使用一个使用 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']
]
}
};
您可以使用
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)
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)
尝试
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)
};
Array.prototype.unshift()
,而对于后面总是有Array.prototype.push()
,甚至Array.prototype.concat()
。一般来说,虽然没有用于扩展运算符的 polyfill,但是有其他方法可以将项目插入到数组中不同索引处,您可以使用这些方法。