在数组的前4个对象上设置属性，然后在第5个对象，第9个对象等上重新启动序列

Question

我正在理智地工作。io项目。我获取一些数据，将其存储在一个数组中，然后使用express和js将其推送到我的前端。

存储在我的数组中的每个post将显示为一张卡。每张卡片上都有一个不同的css类，可以显示为小卡片、中卡片、大卡片或XL卡片。

所以我的目标是循环遍历数组，并为每个对象附加一个属性以在前端访问，以确定卡片的大小。

它看起来应该是这样的，但这显然无法扩展，因为我将通过sanity。io向网站上传新帖子

// desired result
posts[0].size = 's'
posts[1].size = 'm'
posts[2].size = 'l'
posts[3].size = 'xl'
posts[4].size = 's'
posts[5].size = 'm'
posts[6].size = 'l'
posts[7].size = 'xl'

所以我认为我必须循环遍历数组，将属性附加到前4个对象，然后重新启动以下4个对象的序列，然后是下一个4等等。

let items = [];

// fetch and push to array
client.fetch(query).then((posts) => {
posts.forEach((post) => {
items.push(post);
});

// set properties on first 4 objects, restart sequence on 5th, 9th etc.
for(let i = 0; i < posts.length; i+=4){
posts[i].size = 's'
posts[i].size = 'm'
posts[i].size = 'l'
posts[i].size = 'xl'
}

});

最后一段代码是超级错误的，但这正是我现在的重点。我将非常感谢任何关于这方面的帮助或指点

Answer 1

创建一个数组。映射posts，并为每个帖子使用对象扩展创建一个新的对象，与size。从数组中获取size值。要获得文章的相关大小，请使用sizes数组length中当前文章的index余数(%)。

注意:你正在使用async fetch，使用promise或async await来创建items，而不是直接推入。

const sizes = ['s', 'm', 'l', 'xl'];
const items = await client.fetch(query).then(posts =>
posts.map((post, index) => ({ 
...post,
size: sizes[index % sizes.length] 
}))  
);

例子:

const fetch = () => Promise.resolve([{ title: 'a' }, { title: 'b' }, { title: 'c' }, { title: 'd' }, { title: 'e' }, { title: 'f' }]);
const sizes = ['s', 'm', 'l', 'xl'];
const example = async () => {
const items = await fetch().then(posts =>
posts.map((post, index) => ({ 
...post, 
size: sizes[index % sizes.length] 
}))  
);

console.log(items);
}
example();

Answer 2

这应该是工作

// set properties on first 4 objects, restart sequence on 5th, 9th etc.

const postProp = ['s','m','l','xl'];

for(let a = 0; a < posts.length; a++){
for(let b of postProp){
posts[a].size = postProp[b];
a += 1;
}
}