【JavaScript】JavaScript 运算符 ② ( 表达式与返回值 | 自增与自减运算符细节 | 前置自增运算符 | 后置自增运算符 )

韩曙亮

发布于 2024-03-18 08:36:49

720

发布于 2024-03-18 08:36:49

文章被收录于专栏：韩曙亮的移动开发专栏

一、JavaScript 运算符

1、表达式与返回值

" 表达式 " 是由数字 , 运算符 , 变量组成的 " 式子 " ;

由算术运算符的表达式又称为算术表达式 ;

每个 " 表达式 " 都有一个最终的结果 , 这个结果就称为表达式的 " 返回值 " ;

1 + 2 是表达式 , 3 是上述表达式的返回值 ;

如果想要把 " 表达式 " 的最终计算结果赋值给一个变量 , 需要将接收结果的变量写在赋值运算符的左边 , 表达式写在赋值运算符的右边 ;

如 : var num = 1 + 2 , 表达式 1 + 2 赋值给 num 变量 ;

2、自增与自减运算符细节

在 " 算术运算符 " 中有

自增运算符 ++
自减运算符 --

这两个运算符在 JavaScript 开发中 , 使用的非常频繁 ;

自增和自减运算符必须与变量一起使用 , 不能与 number 数字类型值一起使用 ;

定义变量 var num = 1 ;
num++ , num-- , ++num , --num 这中用法是正确的 ;
1++ , ++1 , 1-- , --1 这种用法是错误的 ;

如果想要 var num = 1 变量加 1 , 需要使用 num = num + 1 , 比较繁琐 , 使用自增运算符 num++ 即可完成变量加 1 的效果 ;

自增和自减运算符 ,

可以放在变量的前面 ++num , 这是前置自增运算符 ++num ;
也可以放在变量的后面 num++ , 这是后置自增运算符 num++ ;

前置自增运算符 ++num 和后置自增运算符 num++ 效果是不同的 ;

自增运算符基础用法示例 :

        // 前置自增运算符 : ++num , 相当于 num = num + 1
        ++num;
        console.log(num) // 输出 : 4

3、前置自增运算符

前置自增 / 自减运算符 ,

++num 相当于 num = num + 1 ;
--num 相当于 num = num - 1 ;

前置自增运算符运算时 , 先进行自增 / 自减 , 然后再返回表达式的值 ; ( 这于后置自增 / 自减运算符正好相反 , 后置运算符先返回表达式值然后再自增 / 自减 )

前置自增运算符 , 先自增 , 再返回表达式值 ;

下面的代码中 , ++num2 先进行自增 , 然后返回表达式的值 6 , 最后与 1 进行加法运算 , 得到最终值 7 ;

        // 前置自增运算符 , 先进行 自增 , 然后 再 返回表达式的值
        var num2 = 5;
        console.log(1 + ++num2)

4、后置自增运算符

后置自增 / 自减运算符 ,

num++ 相当于 num = num + 1 ;
num++ 相当于 num = num - 1 ;

前置自增运算符和后置自增运算符 , 单独使用 , 效果相同 , 如果写在表达式中 , 则其效果不同 ;

后置自增运算符运算时 , 先返回表达式的值 , 然后再进行自增 / 自减 ; ( 这于前置自增 / 自减运算符正好相反 , 前置运算符先自增 / 自减然后再返回表达式值 )

后置自增运算符 , 先返回表达式值 , 再自增 ;

下面的代码中 , num3++ 先返回表达式的值 5 , 然后与 1 进行加法运算 , 得到最终值 6 , 最后 num3 进行自增 ;

        // 前置自增运算符 , 先 返回表达式的值  , 然后 再 进行 自增
        var num3 = 5;
        console.log(1 + num3++) // 输出 : 6

5、自增 / 自减运算符代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 定义 数字类型 变量 num
        var num = 3;

        // 前置自增运算符 : ++num , 相当于 num = num + 1
        ++num;
        console.log(num) // 输出 : 4

        // 前置自增运算符 , 先进行 自增 , 然后 再 返回表达式的值
        var num2 = 5;
        console.log(1 + ++num2) // 输出 : 7

        // 前置自增运算符 , 先 返回表达式的值  , 然后 再 进行 自增
        var num3 = 5;
        console.log(1 + num3++) // 输出 : 6
    </script>
</head>

<body>
</body>

</html>

执行结果 :