JavaScript基础-递增递减运算符中前缀和后缀的区别

在JavaScript中，递增和递减运算符用于对数字加1或减1。

但是，可能有些人不太清楚这些中前缀和后缀操作的区别。

这次，我将解释前缀递增/递减和后缀递增/递减的区别。

递增和递减运算符

首先，可以使用加法和减法运算符将数字加1或减1。

let a = 3;
let b = 5;

a = a + 1; // 用加法运算符加1
b = b - 1; // 用减法运算符减1

// a → 4
// b → 4

但是，使用递增和递减运算符可以更简洁地编写它。

递增运算符是++使用 将目标数加 1 的运算符。

此外，递减运算符是--使用 将目标数减去 1 的运算符。

上面的例子可以用递增运算符/递减运算符写成如下。

let a = 3;
let b = 5;

a = ++a // 用递增运算符加1
b = --b // 用递减运算符减1

// a → 4
// b → 4

前缀和后缀操作

递增递减运算符分为前缀和后缀。

运算符++/--放在号码前称为前缀，运算符++/--放在号码后称为后缀。

let a = 3;

++a; // 前置递增
a++; // 后置递增

--a; // 前置递减
a--; // 后置递减

前缀和后缀操作之间的区别

到目前为止，我已经简要解释了递增和递减运算符，以及它们的前缀和后缀。

前递增/递减和后递增/递减的行为不同，具体取决于您将它们放置在前后的位置。

前缀和后缀操作的行为

首先，让我们快速浏览一下下面的示例。

由于我们对前缀和后缀的行为感兴趣，因此我们将只关注递增。

递减也是一样的，请参考。

// 前置运算时
let a = 3;
let b = ++a;

console.log(a); // 4
console.log(b); // 4

// 后置运算时
let a = 3;
let b = a++;

console.log(a); // 4
console.log(b); // 3

无递增表示

人们可能想知道为什么结果会如上所示不同。

那么如果我们尝试在不使用递增的情况下表达前缀和后缀操作呢？

// 前置运算时
let a = 3;
let b;

a = a + 1;
b = a;

console.log(a); // 4
console.log(b); // 4

// 后置运算时
let a = 3;
let b;

b = a;
a = a + 1;

console.log(a); // 4
console.log(b); // 3

如果您查看结果，您会注意到处理流程存在如下差异。

//处理流程

• 前置运算:按照“将变量a相加”→“将变量a代入变量b”的流程进行处理，因此a和b的输出结果都是4。

• 后置运算:按照“将变量a代入变量b”→“将变量a相加”的流程进行处理，因此会得到a为4、b为3的输出结果。

重复处理中的前置运算和后置运算的行为

作为具体实践，在执行 for 语句等重复处理时，理解前缀和后缀操作的区别是有用的。

比较一下处理结果的差异就很容易理解了，如下图。

// 前置运算时
for (let i = 0; i <= 5; ++i) {
    let a;
  a = ++i;
    
    console.log("i = " + i);
    console.log("a = " + a);
}
// "i = 1"
// "a = 1"
// "i = 3"
// "a = 3"
// "i = 5"
// "a = 5"

// 后置运算时
for (let i = 0; i <= 5; i++) {
  let a;
    a = i++;

    console.log("i = " + i);
    console.log("a = " + a);
}
// "i = 1"
// "a = 0"
// "i = 3"
// "a = 2"
// "i = 5"
// "a = 4"

可以很明显的看到输出结果是不一样的。

需要注意的是，在进行重复处理时，如果不理解前置运算和后置运算的区别，可能会导致没有预期到的处理结果。

是想在代入变量之前先加上数值，还是想在代入变量之后再加上数值，根据目的来区分使用是很重要的。

结语

这一次，我解释了递增和递减运算符中前缀和后缀的区别。