基于2的倍数的Javascript切片数组

Question

我试图为数组实现一个切片方法，假设您有一个包含7个项的列表，但最初它显示了2个项。如何根据每个函数单击显示更多的项？

像显示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

如何根据每个函数单击显示更多的项？

您必须在每次单击调用时增加获取的数组片段。

示例

​

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以2的倍数递增arrNum时，这个位置就会向右移动。

在这种情况下使用拼接的效果类似于队列(fifo)，但是，由于在showMore上返回的值没有被记录，这很可能是混淆的地方。

或者，如果要实现堆栈(LIFO)，可以使用pop方法，或者将splice(<index>)的位置替换为数组末尾的偏移量。

​

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

您可以构建一个函数，该函数接受增量和数组，并返回一个函数，该函数在每次调用后返回原始数组的较大切片。

​

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>

​