JavaScript的自增和自减运算

FoXiMao

2023 年 10 月 16 日

589 次浏览

暂无评论

2060字数

前端编程

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

什么是自增运算符？

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

在 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

代码分析

实现代码

分析代码

//传入三个参数 当前页码，分页数量，返回总条数
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,
  };
}