javascript数据类型错误造成的前端分页不准的问题

绝地灬酷狼 2023-10-16 13:55 2阅读 0赞

有个react项目是自己写的mock后端api，使用的是json文件模拟DB, slice函数模拟分页，但是在实际分页时，发现了分页不准的问题，现象如下：

当pageSize为5的时候（共16条数据），总共分4页，但是在前端切换分页按钮时，有如下问题：

**1. 跳到第二页： api返回11条数据**

**2. 跳到第三页时： api返回6条数据**

![e5fc258307f64b3ca151e2e81eb8e9d9.png][]

![10c78ad8cbe04653bec2e579f6dd7c19.png][]

这明显有问题，按道理说应该是前三页应该：**每页都返回5条数据**才对

到底哪里出了问题呢，于是开始对api服务端代码开启debug调试，在可疑处打断点：

![24209ee64bcd468792f84765bc128a35.png][]

![684b6e10aa7349c787fe6e4a8edc460b.png][]

发现入参pageNumber和pageSize是**字符串类型，不是数字类型！**

**严重怀疑是数据类型错误**造成的问题，所以继续往下调试：

![0130039fa37346d6a4056c5e8975d90b.png][]

可以看到第135行的计算结果是16，这个明显不对，让我们来分析一下其中的原因：

startIndex是数字： 5

pageSize:是字符串："5"

baseData.length(baseData中有16条数据): 16

那么计算一下 5 + "5"的结果是多少：

![141a7ab24cb147268e46da57320f93f6.png][]

可看到 5 + "5" = "55", 所以在取最小值时： Math.min("55", 16), 得出的结果就是16。

所以slice分页的起始索引就变成了slice(5, 16) , 也就是11条数据

然而我们期待的应该是两个数字类型的相加 ：5+5 =10 ，那Math.min(10,16)的结果就是10，这才是我们想要的结果。

所以到此为止，真相已经清楚了： 就是入参数据类型的错误造成了分页不准的问题。

**解决办法很简单：通过parseInt函数提前把入参从String类型转化成整数类型**

> pageNumber = parseInt(pageNumber)
> 
> pageSize = parseInt(pageSize)

![ec0a1a46137a46bba0e5f049040a5208.png][]

**此时问题解决：**

![753ccc3812bb4fc8b3770f9986c68802.png][]

总结：在Javascript涉及到**数字运算**时，一定要特别小心，一定确保所有参与运算的元素**提前转化成数字类型**，**如果有字符串类型混入其中**，就会造成计算结果错误的严重问题。

[e5fc258307f64b3ca151e2e81eb8e9d9.png]: https://img-blog.csdnimg.cn/e5fc258307f64b3ca151e2e81eb8e9d9.png
[10c78ad8cbe04653bec2e579f6dd7c19.png]: https://img-blog.csdnimg.cn/10c78ad8cbe04653bec2e579f6dd7c19.png
[24209ee64bcd468792f84765bc128a35.png]: https://img-blog.csdnimg.cn/24209ee64bcd468792f84765bc128a35.png
[684b6e10aa7349c787fe6e4a8edc460b.png]: https://img-blog.csdnimg.cn/684b6e10aa7349c787fe6e4a8edc460b.png
[0130039fa37346d6a4056c5e8975d90b.png]: https://img-blog.csdnimg.cn/0130039fa37346d6a4056c5e8975d90b.png
[141a7ab24cb147268e46da57320f93f6.png]: https://img-blog.csdnimg.cn/141a7ab24cb147268e46da57320f93f6.png
[ec0a1a46137a46bba0e5f049040a5208.png]: https://img-blog.csdnimg.cn/ec0a1a46137a46bba0e5f049040a5208.png
[753ccc3812bb4fc8b3770f9986c68802.png]: https://img-blog.csdnimg.cn/753ccc3812bb4fc8b3770f9986c68802.png