Javascript中是否有任何等效的jQuery slice() 方法？

Question

我正在 javascript 中寻找等效的 slice() 方法。用尽可能短的方式在 Javascript 中使用 ES6+ 与此 jQuery 代码行等效的是什么？

$("#myDiv .btn").slice(0,3).addClass("active");

.active {
  background-color: grey;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myDiv">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
  <button class="btn">6</button>
  <button class="btn">7</button>
</div>

Answer 1

也许您想用纯 javascript 实现这个实现？因为.slice是JS中数组的内置方法，参考这个doc

[].slice.call(document.querySelectorAll("#myDiv .btn"), 0, 3).forEach((el) => {
  el.classList.add("active")
})

.active {
  background-color: grey;
  color: white;
}

<div id="myDiv">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
  <button class="btn">6</button>
  <button class="btn">7</button>
</div>

Answer 2

[...document.querySelectorAll("#myDiv .btn")]
  .slice(0, 3)
  .forEach(el => el.classList.add("active")) 

我认为这里的其他建议更容易阅读

Answer 3

您可以在不使用.slice() 的情况下执行此操作，方法是将选择器修改为使用nth-child()。这将允许您选择第一个 n 元素。要选择多个元素，您可以使用querySelectorAll()，它会返回一个NodeList，然后您可以使用.forEach() 方法对其进行迭代，然后将您的类添加到使用classList.add()

document.querySelectorAll("#myDiv .btn:nth-child(-n+3)").forEach(
  elem => elem.classList.add("active")
);

.active {
  background-color: grey;
  color: white;
}

<div id="myDiv">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
  <button class="btn">6</button>
  <button class="btn">7</button>
</div>