迭代对象数组，并为javascript中的每两个对象拆分为数组

Question

我有一个场景，通过迭代数组动态实现以下输出(最后附加)。

原始数组:

var original = [{
image: 'sampleImage1.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage2.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage3.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage4.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
}
];

var arr1 = [];
for(var i = 0; i < original.length; i += 2) {
arr1.push(original.slice(i, i + 2));
}

console.log(arr1);

我需要将每两个对象转换为数组，并且在每两个数组之间，我需要在下面插入两个数组(静态数组将在每两个数组之后插入)

["name1", "nm1"],
[{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],

var output = [
[
{
image: 'sampleImage.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
}
],
["name1", "nm1"],  // ["a", "b"]
[{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],
[
{
image: 'sampleImage.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
}
],
["name2", "nm2"],   // ["c", "d"]
[{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],
]

最后，我有了一个数组

var captions = ["a", "b", "c", "d"] 

(基于原始数组长度)。是否可以添加这些值而不是name1, nm1(静态内容)?表示a -指第一项，b-指第二项

我被如何实现这个逻辑卡住了。任何帮助将是非常感激的。

Answer 1

您可以使用Array.reduce()来获得所需的结果，每两行插入两个额外的数组。我们还包括了captions数组，每次添加两个元素。

var original = [{ image: 'sampleImage1.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage2.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage3.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage4.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] } ];

let captions = ['a','b','c','d'];
let insert = [ { text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }];
let result = original.reduce((acc, cur, idx) => { 
if ((idx % 2 === 0)) {
acc.push([cur]);
} else {
acc[acc.length - 1].push(cur);
acc.push(captions.slice(idx - 1, idx + 1));
acc.push(insert);
}
return acc;
}, [])

console.log('Result:', JSON.stringify(result, null, 2));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

这样行吗?迭代原数组长度的一半，每次迭代选取两个元素。我们还在每次迭代的末尾添加静态内容。

var original = [{
image: 'sampleImage1.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage2.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage3.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
},
{
image: 'sampleImage4.jpg',
alignment: 'center',
width: 200,
height: 200,
margin: [0, 20, 0, 20]
}
];
const staticContent = [
["name1", "nm1"],
[{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],
];
const result = [];
for(let i=0;i<original.length/2;i++) {
result.push([ original[i*2], original[i*2+1] ].filter(v=>v));
result.push(...staticContent);
}
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

这是你想要的吗?

var original = [{ image: 'sampleImage1.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage2.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage3.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage4.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] } ];
let captions = ['a','b','c','d'];
let arr1 = ["name1", "nm1"]
let arr2 = [{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }]
let result = []
let tempSubArr = []
original.forEach((value,index)=>{

if(index%2 != 0) {
result.push(tempSubArr,[captions[index-1],captions[index]],arr2)
counter = 0
tempSubArr = []
}
tempSubArr.push(value)
})