02day-运算符

DaB210

已于 2024-04-22 23:03:32 修改

阅读量705

点赞数 19

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

于 2024-03-30 11:14:09 首次发布

本文链接：https://blog.csdn.net/DaB210/article/details/137168654

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

运算符

算术运算符（加、减、乘、除、取余）

加号运算符 +

加号具有加法，强制转换数字和字符串拼接的作用

强制转换数字
如果加号放在操作数前面，表示强制转换为数字类型

    var num = "100";
    var num2 = 10;
    console.log(num);
    console.log(typeof(+num));
    console.log(+num + num2);

字符串拼接
如果左右的操作数中有一个为非数字（除了布尔类型，null，undefined）则会把左右操作数转化为字符串，串起来。

隐式转换：我们没有手动的去调用一些转化的方法，而是数据在运算的过程中由于运算符的作用被更改了数据类型
显示转换：例子：Number(“10”)—>10

加法

    var a = 10,b=5;
    console.log(a+b);// 15

减号运算符 -

具有减法和强制转换数字并符号取反的作用

    console.log(num - num2); // 90
    console.log(-num); // -100
    console.log(b-a); // -5

乘号 *

如果左右的操作数中有一个非数字，则会把左右操作数强制转换为数字，并进行乘法运算

    console.log(a*b);
    console.log(num*num2); // 1000
    // console.log(*num); // 报错

除号 /

如果左右的操作数中有一个非数字，则会把左右操作数强制转换为数字，并进行除法运算

    var a = 10;
    var b = 1;
    console.log(a/b); // 10
    console.log(b/a);// 0.1
    var c = +0;
    var d = -0;
    console.log(a / c); // Infinity 正无穷
    console.log(a / d); // -Infinity 负无穷

取余 %

如果左右的操作数中有一个非数字，则会把左右操作数强制转换为数字，并进行取余运算

    var a = 10086;
    console.log(a % 3); // 0

    var b = 10;
    console.log(b % 6); // 4

比较运算符

进行数据之间的比较的时候使用的运算符号
结果一定是一个布尔值
- 要么true
- 要么就是false

大于 >

符号左边的数大于右边的数，得到true，否则就是false

    console.log(10>20);// false
    console.log(20>20);// false
    console.log(30>20);// true

小于 <

符号左边的数小于右边的数，得到true，否则false

    console.log(10<20);// true
    console.log(20<20);// false
    console.log(30<20);// false

大于等于 >=

符号左边大于或等于符号右边，得到true，否则false

    console.log(10>=20);// false
    console.log(20>=20);// true
    console.log(30>=20);// true

小于等于

符号左边小于或等于符号右边，得到true，否则false

    console.log(10<=20);// true
    console.log(20<=20);// true
    console.log(30<=20);// false

等于 ==

符号两边不考虑数据类型的情况下，如果值相等，得到true，否则false

    console.log(10 == 10);// true
    console.log(10 == "10");// true
    console.log(0 == false);// true

等等于/全等 ===

符号两边必须值和数据都一样才是true 否则就是false

    console.log(10 === 10);// true
    console.log(10 === "10");// false
    console.log(0 === false);// false

不等于 !=

符号两边的值不一样，就是true，否则就是false

    console.log(10 != 10);// false
    console.log(10 != "10");// false
    console.log(1 != true);// false
    console.log(1 != 2);// true

不等等 !==

符号两边值和数据类型有任意一个不一样就是 true，否则就是false

    console.log(10 !== 10);// false
    console.log(10 !== "10");// true
    console.log(1 !== true);// true
    console.log(1 != 2);// true

逻辑运算符

&& 与（且）

符号两边必须都是true，才能得到true
符号任意一边是false的时候，都是false
可以看作是一个找假的过程，找到假直接返回。

    console.log(true && true); // true
    console.log(true && false); // false
    console.log(10 > 8 && 5 < 20); // true
    console.log(10 > 20 && 5 < 20); // false
    console.log(10 && "" && 10); // ""
    console.log(10 && 20 && 30); // 30

|| 或

符号两边有任意一边为 true 就能得到 true
只有两边都是false的时候，才能得到false

    console.log(true || true);// true
    console.log(true || false);// true
    console.log(10 > 5 || 5 < 2);// true
    console.log(10 || "" || 20); // 10
    console.log(0 || "" || 20); // 20
    console.log(0 || false || ""); // ""

非 !(取反)

本身为true，结果就是false
本身为false，结果就是true

    console.log(!true); // false
    console.log(!false); // true
    console.log(!0);// true
    console.log(!""); // true
    console.log(!NaN); // true

扩展

&& 短路运算
只要碰到假值，就会短路，并返回该假值，只要短路了，不会继续执行后面的代码

    console.log("abc" && null); // null
    console.log( null && "abc"); // null
    console.log( null && undefined); // null
    10 > 20 && console.log("haha"); // false

|| 短路运算
只要碰到真值，就会短路，并返回该真值，只要短路了，不会继续执行后面的代码
双取反转布尔

判断某个变量是否是有效值
当一个数据取反以后，会得到一个相反的布尔值
再一次取反，就会得到一个正常的布尔值

    var a = 10;
    console.log(!!a); // true

自增、自减运算符

是一元运算符的一种
一元：一个符号和一个数据就能进行运算的符号
二元：一个符号和两个数据进行运算的符号

自增加加++

使用：
- 前置 ++：把符号写前面
- 后置 ++：把符号写后面
共同点：
- 都会让变量自身的值+1
区别：
- 前置：会先把变量自身的值改变（+1），用改变之后的值去参与其他运算
- 后置：会先把变量本身的值参与运算，再把变量的值改变（+1）


    var n = 10;
    // console.log(n);
    // n++;
    // console.log(n);
    // ++n;
    // console.log(n);
    // console.log(n + ++n); // 21
    console.log(n + n++); // 20
    console.log(5 + n++ + 3 + ++n + n); // 45

自减减减 –

使用：

前置–：把符号写前面
后置–：把符号写后面
共同点：
- 让变量自身的值-1
区别：
- 前置：会先把变量自身的值-1，在参与运算
- 后置：先使用变量自身的值参与运算，再去-1

      var a = 1;
      var b = 2;
      var r4 = a++ + ++b- --a+b++ - --b+a;
      //       1   +  3 -   1+3 - 3 + 1
      console.log(a);1
      console.log(b);3
      console.log(r4);4

扩展

三目运算符

语法：
判断条件 ? 表达式1 : 表达式2

当判断条件的结果值为true，则执行表达式1，如果结果值为false，则执行表达式2；

      var b;
      10 > 5 ? b = 100 : b = 1000;
      console.log(b); // 100
      10 > 5 ? console.log("对的") : console.log("错误");
      // 页面输出 对的

案例

<!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>
 
</head>

<body>

  <script>
    // 1.在不考虑四舍五入的情况下，保留三位小数
    var num = 200.15926573;
    var a = parseInt(num * 1000) / 1000
    console.log(a);
    // 2.拆分一个四位数字  个十百千 
    var num2 = 4568
    var a2 = parseInt(num2 / 1000);
    var b2 = parseInt(num2 % 4000 / 100);
    var c2 = parseInt(num2 % 4500 / 10);
    var d2 = parseInt(num2 % 4560);
    console.log("千:" + a2);
    console.log("百:" + b2);
    console.log("十:" + c2);
    console.log("个:" + b2);



    // 3.时间换算(换算成天时分秒)   
    var num3 = 1234567;

    var a3 = parseInt(num3 / (24 * 60 * 60)); // days
    var b3 = parseInt((num3 % (24 * 60 * 60)) / (60 * 60)); // hours
    var c3 = parseInt((num3 % (60 * 60)) / 60); // minutes
    var d3 = parseInt(num3 % 60); // seconds

    console.log(a3, "天", b3, "h", c3, "min", d3, "s");
    console.log(`${a3} 天 ${b3} 时 ${c3} 分 ${d3} 秒`);
    console.log(a3, `day`, b3, `h`, c3, `min`, d3, `s`); 
  </script>
</body>

</html>

在这里插入图片描述

计算机小案例

<!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>
  </head>
  <body>
    <input type="text" id="a1" />
    +
    <input type="text" id="a2" />
    <button id="bth">=</button>
    <input type="text " id="sum" disabled />

    <script>
      bth.onclick = function () {
        var n1 = isNaN(a1.value) ? 0 : parseFloat(a1.value);
        var n2 = isNaN(a2.value) ? 0 : parseFloat(a2.value);

        var r = n1 + n2;
        sum.value = r;
      };

      //在h5的标准下，元素的id可以在js中当作一个天生的变量使用
      //表示的是这个元素
      /*
问题1 :如何在点击button按钮时执行-些代码
-按钮.onclick = fucntion(){代码}
-当你点击按钮的时候，执行{}内的代码
- btn. onclick = fucntion(){代码}
问题2:拿到文本框内用户填写的内容
-文本框.value
-注意:你拿到的是-个字符串类型的值
问题3:把我的计算结果书写到input文本框内
-文本框.value =值
一给文本框进行内容的填充
*/
    </script>
  </body>
</html>

在这里插入图片描述

计算机小案例02

<!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>
  </head>
  <body>
    <input type="text" id="a1" />
    <select name="" id="op">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

    <input type="text" id="a2" />
    <button id="bth">=</button>
    <input type="text " id="sum" disabled />

    <script>
      bth.onclick = function () {
        var n1 = isNaN(a1.value) ? 0 : parseFloat(a1.value);
        var n2 = isNaN(a2.value) ? 0 : parseFloat(a2.value);
        var r = eval(`n1 ${op.value} n2`);
        /* var r;
        switch (op.value) {
          case "+":
            r = n1 + n2;
            break;
          case "-":
            r = n1 - n2;
            break;
          case "*":
            r = n1 * n2;
            break;
          case "/":
            r = n1 / n2;
            break;
        } */
        sum.value = r;
      };
    </script>
  </body>
</html>