第17节：自增和自减

这个名字真的有十个字q
309 阅读1分钟

17.17.尚硅谷_JS基础 _ 自增和自减

一、自增：符号（++）

  • 通过自增可以使变量在自身的基础上增加1。
  • 对于一个变量自增以后，原变量的值会立即自增1。
  • 自增分成两种，后++(a++)和 前++ (++a)
    • 无论是a++ 还是++a,都会立即使原变量的值自增1。
      • ==不同==的是a++ 和 ++a的==值==不同

1、a++:

==a++的值等于原变量的值（自增前的值）==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 1;
        a++;
        a++;
        a++;
        a++;
        a++;
        console.log("a = "+ a)
        console.log(typeof a)
        
        var a = 2;
        a++;
        console.log()
    </script>
</head>
<body>
    
</body>
</html>

2、++b

==++b 的值等于原变量的值（自增后的值）==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var b = 1;
        ++b;
        ++b;
        ++b;
        ++b;
        ++b;
        ++b;
        console.log("b = "+ b)
        console.log(typeof b)
    </script>
</head>
<body>
    
</body>
</html>

3、一些区别:

(1)a++和++b本身值的区别：

==用完再加和加完再用的区别==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>//可以发现a++，是3+1=4
        var a = 3;
        a++;
        console.log(a++)
        var b = 3;//++b是，3+2=5
        ++b;
        console.log(++b)
        
        //这只是++b，a++的数值。
    </script>
</head>
<body>
    
</body>
</html>

image-20211106110627292

二、自减：符号（--）

  • 通过自减可以使变量在自身的基础上减1。
  • 自减分为两种：后--（a--）和前--（--a）
  • 无论是a-- 还是 --a 都会立即使变量的值自减1。

1、a--：

无论是a-- 还是 --a 都会立即使变量的值自减1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 1;//上面的那个
        a--;
        console.log("a="+ a)

        console.log("分割线")

        var a = 1;//下面的那个
        a--;
        console.log( a)
        console.log("分割线")
    </script>
</head>
<body>
    
</body>
</html>

image-20211106112726898

2、--a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 1;//上面的那个
        --a;
        console.log(--a)
        console.log("分割线")

        var a = 1;//下面的那个
        --a;
        console.log("a = " + a)
    </script>
</head>
<body>
    
</body>
</html>

image-20211106112729127

3、--a和a--的区别： 不同a-- 还是 --a 的本身值不同

==a-- 是变量的原值（自减前的值）==：先赋值在运算

==--a 是变量的新值（自减以后的值）==：先运算再赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 1;
        a--;
        console.log( a)
        console.log("分割线")

        var a = 1;
        --a;
        console.log(--a)
        console.log("分割线")
    </script>
</head>
<body>
    
</body>
</html>

image-20211106112607077

三、总结：

33321636170452..jpg

avatar
文章
阅读
粉丝