15.15.尚硅谷JS基础算数运算符

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

15.15.尚硅谷_JS基础_算数运算符

一、运算符：

通过运算符可以对一个或多个值进行运算

比如：typeof就是运算符，可以来获得一个值的类型， 它会将该值的类型以字符串的形式返回:

Number ，String ，Boolean ，undefined ，Object

<!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>
        //运算符也叫操作符
        //     通过运算符可以对一个或多个值进行运算
        //     比如：typeof就是运算符，可以来获得一个值的类型
        //         它会将该值的类型以字符串的形式返回: Number String Boolean undefined Object
        var a = 123;
        var result = typeof a ;

        console.log(typeof a);

        console.log(typeof result);
        
    </script>
</head>
<body>
    
</body>
</html>

二、算数运算符（重点）

1、加法：可以对两个值进行加法运算，并将结果返回。

（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 =123;
       ①b = 1 + a;
       
       ②b = 245 + 789;
       console.log(b);
    </script>
</head>
<body>
    
</body>
</html>
image-20211105204121552 image-20211105204500733

（2）布尔加法：

当对非Number类型的值进行运算时，会将这些值转换为Number，然后再进行运算。

<!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 =123;

        b = true + false;
        console.log(b)
        console.log(typeof b)

        b = true + true;
        console.log(b)
        console.log(typeof b)

        b = true + 1;
        console.log(b)
        console.log(typeof b)

        b = 2 + null;
        console.log(b)
        console.log(typeof b)
    </script>
</head>
<body>
    
</body>
</html>

image-20211105205550018

（3）NaN的加法：

任何值和 NaN 做运算都得到 NaN .

<!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>
        b = 2+ NaN;
        console.log(b)
        console.log(typeof b)

    </script>
</head>
<body>
    
</body>
</html>

image-20211105205726112

（4）string（字符串）相加：

如果对两个字符串进行加法运算，则会做拼串，或者说：会将连个字符串拼接为一个字符串，并返回。(除字符串加法以外)

第一种玩法：

<!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>
           // 如果对两个字符串进行加法运算，则会做拼串，或者说：会将连个字符串拼接为一个字符串，并返回。
        b = "123"+"456"
        console.log(b)
        console.log(typeof b)
    </script>
</head>
<body>
    
</body>
</html>

image-20211105210049093

第二种玩法：

<!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 str = "锄禾日当午，"+
                  "汗滴禾下土。"+
                  "谁知盘中餐，"+
                  "粒粒皆辛苦。"
        console.log(str);
        console.log(typeof str)
    </script>
</head>
<body>
    
</body>
</html>

image-20211105211248208

第三种玩法：活学活用

任何值和字符串相加，都会变成==两个字符串==相加。

<!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 str = 123 + "1"
        console.log(str);
        console.log(typeof str)
    </script>
</head>
<body>
    
</body>
</html>

image-20211105211420994

第四种小技巧：强制类型转换

<!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 c = 123;
        c = c + "";//字符串
        console.log("c = " + c)//字符串 = 字符串 然后全部都在字符串里面。
        console.log(typeof "'c = ' + c")

    </script>
</head>
<body>
    
</body>
</html>

image-20211105215341728

第五种混合式骚操作：

<!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>
        c = 1 + 2 + "3"
        console.log(c)
        console.log(typeof c)//33

        c = "3"+ 1 + 2
        console.log(c)
        console.log(typeof c)//312

    </script>
</head>
<body>
    
</body>
</html>

image-20211105220715368

2、减法：可以对两个值进行减法运算，并将结果返回。

强制类型转换：

<!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>
        c = 100 -5 ;
        console.log(c);
        console.log(typeof c);

        c = 100 -true;
        console.log(c);
        console.log(typeof c);

        c = 100 - "1"//注意：不转换成string
        console.log(c);
        console.log(typeof c);
    </script>
</head>
<body>
    
</body>
</html>

image-20211105221244402

3、乘法：

强制类型转换：

<!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>
        c = 2 * 2
        console.log(c);
        console.log(typeof c);

        c = 2 * true
        console.log(c);
        console.log(typeof c);

        c= 2 * "6"
        console.log(c);
        console.log(typeof c);

        c = 2 * undefined;
        console.log(c);
        console.log(typeof c);

        c = 2 ** 10 //次幂运算
        console.log(c);
        console.log(typeof c);
    </script>
</head>
<body>
    
</body>
</html>

image-20211105221635759

4、除法：

强制类型转换：

<!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>
        c = 2 / 2
        console.log(c);
        console.log(typeof c);

        c = 4 / 2
        console.log(c);
        console.log(typeof c);

        c = 8 / "2"
        console.log(c);
        console.log(typeof c);

        c = "2" / 8
        console.log(c);
        console.log(typeof c);
    </script>
</head>
<body>
    
</body>
</html>

image-20211105222023996

乘法、除法、减法的强制类型转换：

可以通过为一个值 -0 ，*1，/1来将其转换为Number

<!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 d = "123";
        d = d - 0;
        console.log(d );
        console.log(typeof d)
    </script>
</head>
<body>
    
</body>
</html>

image-20211105222314177

5、取余数：

<!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>
         c = 9 % 3;
         console.log(c)
         console.log(typeof c)

         c = 9 % 4;
         console.log(c)
         console.log(typeof c)
    </script>
</head>
<body>
   
</body>
</html>

image-20211105223301720

三、总结

QQ图片20211105223558.png

avatar
文章
阅读
粉丝