底层 JavaScript 分页数学问题



我正在尝试了解如何处理数学问题,例如以下摘录,这在我正在遵循的教程的分页部分中进行了演示。

const renderResults = (arrayOfItems, pageNum = 1, resultsPerPage = 10) => {
const start = (pageNum - 1) * resultsPerPage;
const end   = pageNum * resultsPerPage;
arrayOfItems.splice(start, end).forEach(renderToScreenFunction);
};

在教程中,这个解决方案只是打出来的,没有解释,这让我想到,如果我没有看到解决方案,我将无法以这种方式思考它。

我了解问题的目标,以及拼接如何将数组分解成多个部分。但是对我来说,如何获取在不确定长度的数组上使用拼接方法的开始值和结束值并不明显。我应该如何思考解决这个问题?

请理解,我在业余时间学习编程,对大多数人来说似乎很简单,我一直害怕并在数学上挣扎,我发布这个问题是希望变得更好。

如果有人能解释一下如何在理论上解决这些问题,我将不胜感激。我应该学习数学/编程的哪个领域才能更好地解决这些问题。任何指针都将是一个巨大的帮助。非常感谢。

好的,所以你从

  • 要显示的内容列表,嗯,它和它一样长。
  • 页码,使第一页是第 1 页
  • 页面大小(每页的项目数(

因此,要知道要显示列表中的哪些元素,您需要考虑页码和页面大小对必须跳过的元素数量有何影响。 如果您在第 1 页上,则无需跳过任何元素。如果您在第 5 页上怎么办?

好吧,第一页什么都没有跳过。第二页必须跳过每页的元素数。第三页必须跳过每页两的元素数,依此类推。我们可以概括这一点,并看到对于页面p,您需要跳过p - 每页元素数量的 1 倍。因此,对于第 5 页,您需要跳过每页元素数量的 4 倍。

在跳过前几页后显示该页面很容易:只需显示每页的下一个元素元素。

请注意,您发布的代码似乎没有解决两个细节。这些详细信息是:

  1. 如果列表的实际长度不能被页面大小整除,该怎么办?
  2. 如果请求的页面远远超过列表的实际长度,该怎么办?

对于第一个细节,您只需要在弄清楚要向前跳多远后测试这种情况。

您的函数在 Splice 方法中出错

arrayOfItems.splice(start, end).forEach(renderToScreenFunction);

第二个参数必须是要提取的长度,而不是最终的长度 指数。您无需计算end指数,但使用resultsPerPage相反。

我已经重写了代码而没有错误,删除了函数包装器以便更好地理解,并添加了一些注释......

// set the initial variables
const arrayOfItems =['a','b','c','d','e','f','g','h','i','j','k','l','m'];
const pageNum = 2;
const resultsPerPage = 5;
// calculate start index
const start = (pageNum - 1) * resultsPerPage; // (2-1)*5=5
// generate a new array with elements from arrayOfItems from index 5 to 10
const itemsToShow = arrayOfItems.splice(start, resultsPerPage) ; 
// done! output the results iterating the resulting array
itemsToShow.forEach( x=> console.log(x) )

代码说明:

  • 设置初始参数
  • 计算数组的start index,对应于您尝试获取的页面。((pageNum - 1) * resultsPerPage(
  • 生成一个新数组,从arrayOfItems中提取resultsPerPage项,从start索引开始(如果页面不存在,则返回空数组(
  • 迭代生成的数组 (itemsToShow( 以输出结果。

理解代码的最好方法是有时尝试运行它并观察行为和结果。

最新更新