JavaScript配列をページ分けする

私は、array、page_size、page_number をパラメータとして受け取り、ページネーションされた結果を模倣する配列を返す Javascript 関数を書こうとしています:

paginate: function (array, page_size, page_number) {
  return result;
}

例えば、次のような場合：

array = [1, 2, 3, 4, 5],
page size = 2,
page_number = 2,

関数は次を返すべきです: [3, 4]。

どんなアイデアでもありがたいです。

回答 #1

Array.prototype.slice を使用して、(start, end) のパラメータを指定するだけで使うことができます。

function paginate(array, page_size, page_number) {
  // human-readable page numbers usually start with 1, so we reduce 1 in the first argument
  return array.slice((page_number - 1) * page_size, page_number * page_size);
}

console.log(paginate([1, 2, 3, 4, 5, 6], 2, 2));
console.log(paginate([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 4, 1));

回答 #2

こちらは reduce() を使った解法です:

function paginate (arr, size) {
  return arr.reduce((acc, val, i) => {
    let idx = Math.floor(i / size)
    let page = acc[idx] || (acc[idx] = [])
    page.push(val)

    return acc
  }, [])
}

let array = [1, 2, 3, 4, 5]
let page_size = 2
let pages = paginate(array, page_size)

console.log(pages)    // all pages
console.log(pages[1]) // second page

これはページの配列を返すので、特定のページを取得したり、すべてのページをループしたりすることができます。

回答 #3

私は上でこれを正しく（ある意味で）行った例を見て、それについて詳しく説明したいと思いました。

これは例でした。

function paginate(array, page_size, page_number) {
  // human-readable page numbers usually start with 1, so we reduce 1 in the first argument
  return array.slice((page_number - 1) * page_size, page_number * page_size);
}

これにはいくつか問題があります。

1.) もし page_number が 0 の場合、開始の分割を -1 * page_size に設定しようとし、その結果空の配列が返されます。したがって、page_number 属性の最小値は 1 でなければならず、その場合を関数内で処理しない限り、それ以下の値は決して使用してはいけません。

2.) 分割の開始インデックスと終了インデックスが同じです。そのため、空の配列が返されます。したがって、分割は次のようにする必要があります:

return array.split(page_number * page_size, page_number * page_size + page_size)

const myArray = [1,2,3,4,5,6,7,8,9,10];

const paginateBad1 = (array, page_size, page_number) => {
  return array.slice((page_number - 1) * page_size, page_number * page_size);
};

const paginateBad2 = (array, page_size, page_number) => {
  return array.slice(page_number * page_size, page_number * page_size);
};

const paginateGood = (array, page_size, page_number) => {
  return array.slice(page_number * page_size, page_number * page_size + page_size);
};

console.log("Bad 1", paginateBad1(myArray, 2, 0));
console.log("Bad 2", paginateBad2(myArray, 2, 1));
console.log("Good", paginateGood(myArray, 2, 1));