时间戳

首页 > 解决方案 > 遍历一组项目并匹配每前 5 个索引，然后是下一个 4，然后是下一个 6，然后是全部增益，5, 4 6

javascript - 遍历一组项目并匹配每前 5 个索引，然后是下一个 4，然后是下一个 6，然后是全部增益，5, 4 6

问题描述

代码看起来类似，但如果项目超过 15 个，我不想添加更多 if 语句。我需要一个模式作为参数传递。

模式 = [5,4,6]？

function rearangeItems (items) {
    items.forEach((element, index) => {
       if (index < 5) {
            element.classList.add('col-fifth');
        } else if (index>=5 && index <=8) {
            element.classList.add('col-fourth');
        } else {
            element.classList.add('col-sixth');
    } 
});

}

标签： javascriptarrays

解决方案

您可以使其适用于任何模式。创建一个pattern数组，该数组具有每个块的长度和与之关联的类

const pattern = [
  [5, 'col-fifth'],
  [4, 'col-fourth'],
  [6, 'col-sixth']
]

然后创建一个生成器函数，该函数创建一个填充块长度时间的类数组。

function* getClass(pattern) {
  const classes = pattern.flatMap(([n, cls]) => Array(n).fill(cls))

  while (true)
    yield* classes
}

classes数组看起来：

['col-fifth', 'col-fifth', ...x5, 'col-fourth' x 4, 'col-sixth' x 6 times]

使用while(true)andyield*以该顺序返回一个类的次数与请求的次数一样多。

像这样调用里面的生成器函数rearangeItems：

function rearangeItems(items, pattern) {
  const gen = getClass(pattern);
  items.forEach((element) =>
    element.classList.add(gen.next().value)
  );
}

这是一个片段：

document.querySelector("ul")
        .innerHTML += Array.from({ length: 100 }, (_, i) => `<li>${i}</li>`).join("")

function rearangeItems(items, pattern) {
  const gen = getClass(pattern);
  items.forEach((element) =>
    element.classList.add(gen.next().value)
  );
}

function* getClass(pattern) {
  const classes = pattern.flatMap(([n, cls]) => Array(n).fill(cls))

  while (true)
    yield* classes
}

const pattern = [ [5, 'col-fifth'], [4, 'col-fourth'], [6, 'col-sixth'] ]

rearangeItems(document.querySelectorAll("li"), pattern)
.col-fifth { color: red }
.col-fourth { color: green }
.col-sixth { color: yellow }
<ul></ul>

推荐阅读