Javascript 基於2的倍數的切片數組

Question

我正在嘗試為數組實現切片方法，假設您有一個包含 7 個項目的列表，但最初它顯示 2 個項目。 您將如何根據每個 function 點擊顯示更多項目？

像再顯示 3 個，再顯示 2 個，再顯示 1 個，直到沒有更多要顯示的項目。

https://jsbin.com/ratohehuyi/edit?js,console

我堅持寫邏輯，這只是偽代碼

  const arr = ['blueberries', 'oranges', 'grapes', 'bananas', 'kiwis', 'apples', 'coconuts']

  const arrNum = 2

  console.log(arrNum)

  const showMore = (arr) => {
    return arr.slice(0, arrNum * 2 ) // this should increment i think based on each function click 
  }

  console.log(showMore(arr))

Answer 1

您將如何根據每個 function 點擊顯示更多項目？

您必須增加每次單擊調用所采用的數組切片。

例子

 const array = ['blueberries', 'oranges', 'grapes', 'bananas', 'kiwis', 'apples', 'coconuts'] let arrNum = 0; const listElement = document.querySelector("#list"); const button = document.querySelector("#button"); const showMore = () => { arrNum = arrNum + 2; const sublist = array.slice(0, arrNum); let first = listElement.firstElementChild; while (first) { first.remove(); first = listElement.firstElementChild; } for(let item of sublist) { const itemElement = document.createElement("li"); itemElement.textContent = item; listElement.appendChild(itemElement); } if(sublist.length === array.length) { button.style.display = "none"; } } button.addEventListener("click", showMore); showMore();

 <ul id="list"> </ul> <button id="button">Show more</button>

- 編輯

現在想起來的時候。 這種方法很愚蠢，因為我們每次調用都會刪除所有內容。

這里有一點改進。

 const array = ['blueberries', 'oranges', 'grapes', 'bananas', 'kiwis', 'apples', 'coconuts'] let from = 0; let to = 2; const listElement = document.querySelector("#list"); const button = document.querySelector("#button"); const showMore = () => { const sublist = array.slice(from, to); from = to; to = to + 2; for(let item of sublist) { const itemElement = document.createElement("li"); itemElement.textContent = item; listElement.appendChild(itemElement); } if([...listElement.children].length === array.length) { button.style.display = "none"; } } button.addEventListener("click", showMore); showMore();

 <ul id="list"> </ul> <button id="button">Show more</button>

Answer 2

注：補充說明OP

問題是拼接方法中的增量乘以 2

例如array.splice(0, arrNum * 2)

每次 arrNum 增加 2 倍時，此arrNum*2將 position 向右移動。

在此使用 splice 的效果類似於隊列 (fifo) - 但是，由於 showMore 上返回的值沒有被記錄，這很可能是混亂所在。

或者，如果要實現堆棧（LIFO），可以使用pop方法，或者將splice(<index>)的position替換為數組末尾的偏移量。

 const arr = ['blueberries', 'oranges', 'grapes', 'bananas', 'kiwis', 'apples', 'coconuts'] const showMore = (arr, num) => { return arr.splice(0, num) } let firstTwo = showMore(arr, 2) //? [ 'blueberries', 'oranges' ] console.log(arr) //? [ 'grapes', 'bananas', 'kiwis', 'apples', 'coconuts' ] let nextThree = showMore(arr, 3) //? [ 'grapes', 'bananas', 'kiwis' ] console.log(arr); //? [ 'apples', 'coconuts' ] let last = showMore(arr, 2) //? [ 'apples', 'coconuts' ] console.log(arr) //? []

Answer 3

您可以構建一個 function ，它接受一個增量和一個數組，並返回一個 function ，它在每次調用后返回原始數組的更大切片。

 const slicer = (inc, arr, count = 0) => () => arr.slice(0, count+=inc); const show_more = (get_data) => () => { console.log(get_data()); }; document.querySelector('button').addEventListener('click', show_more(slicer(2, arr)));

 <script> const arr = [ 'blueberries', 'oranges', 'grapes', 'bananas', 'kiwis', 'apples', 'coconuts' ]; </script> <button>show more</button>