起因,我在写一个分页工具类时使用了自增运算,发现页码不会自增......

什么是自增运算符?

自增和自减是一样的,不重复提及,只根据我代码的实际代码来说明

在 JavaScript 中,++ 是自增运算符,用于增加变量的值。它有两种形式:前置自增和后置自增。

  • 前置自增 (++x): 增加变量的值,然后返回增加后的值。
  • 后置自增 (x++): 返回变量的当前值,然后再增加其值。

前置自增 (++x)

前置自增运算符首先增加变量的值,然后返回增加后的值。这意味着它会在表达式的值被计算之前执行自增操作。以下是一个示例:

let x = 5;
let y = ++x; // y 等于 6,x 变成 6
//我们可以这样理解
let x = 5
x++  // x = 5
let y = x // y = 6

后置自增 (x++)

后置自增运算符首先返回变量的当前值,然后再增加其值。这意味着它会在表达式的值被计算之后执行自增操作。以下是一个示例:

let x = 5;
let y = x++; // y 等于 5,x 变成 6
//我们可以这样理解
let x = 5 // x= 5
let y = x // y = 5 x = 5
x++ // x = 6

代码分析

实现代码

image-20231016164922982

分析代码

//传入三个参数 当前页码,分页数量,返回总条数
const getListHasMore = (pageNum, pageSize, total) => {
  //计算出总分页数量
  const totalPage = Math.ceil(total / pageSize);
  return {
    //比较当前页码和总分页数量 返回对应的布尔值
    hasMore: pageNum < totalPage,
    //返回页码
    nextPageNum: pageNum++,
  };
}

从上述代码中可以看到,我们返回的nextPageNum 字段采用的是后置自增的方法:

//业务层
let result = this.$baseUtil.getListHasMore(1, 10, 36) // result: 1

//业务层调用方法后,返回的nextPageNum值为1
//baseUtils.js
//拆分一下nextPageNum: pageNum++,
//(1,10,36)
const getListHasMore = (pageNum, pageSize, total) => {
  ...
  //nextPageNum : 1
  nextPageNum: pageNum++,
  
}

我们看一下返回nextPageNum为什么会返回1:

//baseUtils.js
//(1,10,36)
const getListHasMore = (pageNum, pageSize, total) => {
  ...
  //nextPageNum : 1
  //nextPageNum: pageNum++,
  //pageNum = 1
  nextPageNum: pageNum //nextPageNum = 1
  pageNum++
}

很明显,我们用的是后置自增,先给nextPageNum赋pageNum的值,然后pageNum才自增

我们只需要换成前置自增即可:

const getListHasMore = (pageNum, pageSize, total) => {
  const totalPage = Math.ceil(total / pageSize);
  return {
    hasMore: pageNum < totalPage,
    //pageNum++
    //nextPageNum: pageNum
    nextPageNum: ++pageNum,
  };
}
最后修改:2023 年 10 月 16 日
千圣皆过影,良知乃吾师