我正在嘗試根據一些規則生成分頁按鈕標簽，并且無法完全理解這一點。
我有 2 個輸入，activePage是當前頁的編號，pageCount也是總頁數。根據這些，我應該生成以下輸出：
activePage |
pageCount |
預期產出 |
|---|---|---|
| 1 | 2 | ['<','1','2','>'] |
| 2 | 2 | ['<','1','2','>'] |
| 1 | 3 | ['<','1','2','3','>'] |
| 2 | 3 | ['<','1','2','3','>'] |
| 3 | 3 | ['<','1','2','3','>'] |
| 1 | 4 | ['<','1','2','3','4','>'] |
| 2 | 4 | ['<','1','2','3','4','>'] |
| 3 | 4 | ['<','1','2','3','4','>'] |
| 4 | 4 | ['<','1','2','3','4','>'] |
| 1 | 5 | ['<','1','2','3','...','5','>'] |
| 2 | 5 | ['<','1','2','3','...','5','>'] |
| 3 | 5 | ['<','1','2','3','4','5','>'] |
| 4 | 5 | ['<','1','...','3','4','5','>'] |
| 5 | 5 | ['<','1','...','3','4','5','>'] |
| 1 | 6 | ['<','1','2','3','...','6','>'] |
| 2 | 6 | ['<','1','2','3','4', '...', '6','>'] |
| 3 | 6 | ['<','1','2','3','4', '...', '6','>'] |
| 4 | 6 | ['<','1','...','3','4', '5','6','>'] |
| 5 | 6 | ['<','1','...','4', '5','6','>'] |
| 6 | 6 | ['<','1','...','4', '5','6','>'] |
| 4 | 7 | ['<','1','...','3','4','5','...','7','>'] |
最后一個模式 (4, 7) 然后無限重復，例如 100 頁
activePage: 33, totalPages: 100：['<', '1', '...' '32', '33', '34', '...', '100']
我很難寫下這背后的數學規則。任何幫助表示贊賞。
我最終得到的是一堆 if 陳述句，然后在試圖寫下頁數超過 6 時的概括時卡住了。
const getPaginationButtons = (activePage: number, pageCount: number): string[] => {
if(pageCount > 6) {
// ... ?
}
if (pageCount === 6) {
if(activePage === 1) {
return ['1', '2', '3', '...', '6'];
}
// ... ?
if(activePage === 6) {
return ['1', '...', '4', '5', '6'];
}
}
if (pageCount === 5) {
const pages = [...new Array(pageCount)].map((_, index) =>
(index 1).toString()
);
if (activePage === 3) {
return pages;
}
if (activePage < 3) {
return pages.map((page) => (page === '4' ? '...' : page));
}
if (activePage > 3) {
return pages.map((page) => (page === '2' ? '...' : page));
}
return pages;
}
if (pageCount <= 4) {
const pages = [...new Array(pageCount)].map((_, index) =>
(index 1).toString()
);
return pages;
}
return [];
};
uj5u.com熱心網友回復：
設法使測驗用例通過以下代碼，但我仍然相信可能有更好的方法來撰寫代碼：
const getPaginationButtons = (): string[] => {
if (pageCount <= 4) {
const pages = [...new Array(pageCount)].map((_, index) =>
(index 1).toString()
);
return pages;
}
const pages = ['1'];
if (activePage >= 4) {
pages.push('...');
}
if (activePage 1 > pageCount) {
pages.push((activePage - 2).toString());
}
if (activePage - 1 > 1) {
pages.push((activePage - 1).toString());
}
if (activePage !== 1) {
pages.push(activePage.toString());
}
if (activePage 1 <= pageCount) {
pages.push((activePage 1).toString());
}
if (activePage - 1 <= 0) {
pages.push((activePage 2).toString());
}
if (activePage 2 < pageCount) {
pages.push('...');
}
if (activePage 1 < pageCount) {
pages.push(pageCount.toString());
}
return pages;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/531565.html
下一篇：初識設計模式 - 解釋器模式