javascript中的基本运算符

最新推荐文章于 2022-06-29 19:55:54 发布

wj18740503137

最新推荐文章于 2022-06-29 19:55:54 发布

阅读量266

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/wj18740503137/article/details/118295714

版权

本文全面介绍了JavaScript中的各类运算符，包括算术、逻辑、比较、赋值及条件运算符等，详细解释了每种运算符的功能与使用场景，并通过实例演示了如何正确应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript中的基本运算符

运算符操作

运算符也叫操作符
通过运算符可以对一个或者多个值进行运算，并获取运算结果
比如：typeof就是运算符，可以获取一个值的类型
它会将该值的类型以字符串的形式返回
number string boolean undefined object

01-算数运算符

当对非Number类型进行运算时（除字符串类型外），会将这些值转换为Number然后进行运算。
任何值和NaN运算都得NaN。
加【+】
- +可以对两个值进行加法运算，并将结果返回
- 如果对两个字符串进行加法运算，则会做拼串。会将两个字符串拼为一个字符串，并返回

    var a = 123;
    result = a + 1;
    console.log(result);

    result = true + 1;
    console.log(result);

    result = true + false;
    console.log(result);

    result = null + 1;
    console.log(result);

    result = NaN + 1;
    console.log(result);

    result = "123" + 456;
    console.log(result);

    result = NaN + "456";
    console.log(result);

    result = 123 + "";
    console.log(typeof result);
    console.log(result);

    result = 1 + 2 + "3";
    console.log(result);

    result = "1" + 2 + 3;
    console.log(result);

减【-】
- -可以对两个值进行相减得到一个值然后在进行返回。
- 运算时会将非数值型转换为数值型进行运算

    result = 100 - 5;
   console.log(result);

   result = 100 - "7";
   console.log(result);

   result = 100 - true;
   console.log(result);

   result = 100 - undefined;
   console.log(result);

乘【*】
- 可以对两个值进行乘法运算

    result = 2 * 2;
   console.log(result)

   result = 2 * "4";
   console.log(result)

   result = 2 * undefined;
   console.log(result)

   result = 2 * null;
   console.log(result)

- 除【/】
- 可以对两个值进行除法运算

     result = 4 / 2;
    console.log(result)

    result = 3 / "2";
    console.log(result)

    result = 3 / null;
    console.log(result)

取模运算【%】（也叫取余数）

    result = 9 % 3;
    console.log(result);

    result = 9 % 5;
    console.log(result);

    result = 9 % null;
    console.log(result);

任何值和字符串做加法运算，都会先转换为字符串，然后在和字符串进行拼接操作。故我们可以利用这一特点进行字符串的隐式转换
任何值进行-、*、/运算时都会将其先转换为Number。故我们可以利用这一特点来进行Number的隐式转换。

02-一元运算符

一元运算符，只需要一个操作符
- +正号
- 正号不会对数字产生任何影响
- -负号
  - 负号可以对数字进行取反
一元运算符对于非数值型会先转换成数值型然后进行运算,因此可以用利用这一特点用+来将非数值类型转换为数值型。

    var a = 123;
    a = -a;
    console.log(a);

    a = true;
    a = -a;
    console.log(a);

    a = "18";
    a = +a;
    console.log(a);

    var result = 1 + "2" + 3;
    console.log(result);

    var result = 1 + +"2" + 3;
    console.log(result);

03-自增自减

自增 ++
- 通过自增可以使变量在自身的基础上增加1
- 对于一个自变量自增后，原变量的值会立即加1
自增分为两种：后++（a++）和前++（++a）
- 无论是a++还是++a，都会立即是原变量的值自增1，不同的是a++和++a的值不同
- a++的值等于原变量的值（自增前的值）
- ++a的值是新值（自增后的值）

    var a = 1;
    a = a++;
    console.log(a);             //1
    console.log(a++);           //1

    var a = 1;
    a++;
    console.log(a++)            //2

    var a = 1;
    a = ++a;
    console.log(a);             //2
    console.log(++a);           //3

    var d = 20;
    var result = d++ + ++d + d;
    console.log(result);        //64

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

      var num = 10;
      num--;
      --num;
      console.log(num);    //8

      var a = 10;
      a = a--;
      console.log(a);     //10
      console.log(a--);   //10

      var a = 10;
      a--;
      console.log(a--)    //9

      var a = 10;
      a = --a;
      console.log(a);      //9
      console.log(--a);    //8
      
      var d = 20;
      var result = --d + d + d--;
      console.log(result); //57

04-自增自减练习题

    var n1 = 10, n2 = 20;
    var n = n1++;
    console.log('n ='+n);       //
    console.log('n1 ='+n1);     //

    n = ++n1;
    console.log('n ='+n);       //
    console.log('n1 ='+n1);     //

    n = n2--;
    console.log('n ='+n);       //
    console.log('n2 ='+n2);     //

    n = --n2;
    console.log('n ='+n);       //
    console.log('n2 ='+n2);     //

05-逻辑运算符

05-1布尔值之间的运算

js为我们提供了三种逻辑运算符
- ！非
  - ！可以用来对一个值进行非运算
- 所谓非运算就是对一个Boolean值进行一个取反操作
  
  true变false false变true
- 如果对一个值进行两次取反，它就不会变化
- 如果对非布尔值进行操作，它会先进行转换为布尔值，然后在取反。因此我们可以利用这一特点来将其它数据类型进行取反两次转换为布尔类型

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

    var a = 123;
    console.log(!a);     //false

    var a = "asd";
    console.log(!a);     //false

&& 与
- &&可以对符号两边的值进行与运算并返回结果
与运算规则
- 两个值全为true才返回true，有一个false就返回false;
JS中的“与”属于的与
- 如果第一个值为false则不会看到第二个值；

var result = false && false;
console.log('result =' +result);     //false

var result = true && false;
console.log('result =' +result);     //false

var result = false && true;
console.log('result =' +result);     //false

var result = true && true;
console.log('result =' +result);     //true

true && alert("true返回了！");
false && alert("false返回了！");

|| 或
- - ||可以对符号两边的值进行或运算并返回结果
或运算规则
- 两个值全为false才返回false，有一个true就返回true;
JS中的“与”属于的与
- 如果第一个值为false则不会看到第二个值；

    var result = false || false;
    console.log('result =' +result);     //false

    var result = true || false;
    console.log('result =' +result);     //true

    var result = false || true;
    console.log('result =' +result);     //true

    var result = true || true;
    console.log('result =' +result);     //true

    true || alert("true返回了！");
    false || alert("false返回了！");

05-2非布尔值之间的运算

&& ||非布尔值的情况
- 对于非布尔值进行与或运算时，会先将其转换为布尔值，然后进行运算，并返回原值
与运算：
- 当第一个值为true则必然返回第二个值；
- 当第一个值为false时返回第一个值

    var result = 1 && "hello";
    console.log(result);            //hello
    var result = 0 && "hello";
    console.log(result);            //0
    var result = 1 && true;
    console.log(result);            //true
    var result = 0 && false;
    console.log(result);            //0

或运算：
- 当第一个值为false则必然返回第二个值；
- 当第一个值为true时返回第一个值

    var result = 1 || "hello";
    console.log(result);            //1
    var result = 0 || "hello";
    console.log(result);            //hello
    var result = 1 || true;
    console.log(result);            //1
    var result = 0 || false;
    console.log(result);            //false

06-赋值运算符

=
- 就是将=右边的赋值给=左边的变量
+=
- 就是将+=左边的值和右边的值先相加然后赋值给+=左边的变量
-=
- 就是将-=左边的值和右边的值先相减然后赋值给-=左边的变量
*=
- 就是将*=左边的值和右边的值先相乘然后赋值给*=左边的变量
/=
- 就是将/=左边的值和右边的值先相除然后赋值给/=左边的变量
%=
- 就是将%=左边的值和右边的值先取余然后赋值给%=左边的变量

var a = 123;
console.log(a);     //123

var a = 123;
 a += 456;
console.log(a);     //579

var a = 123;
 a -= 23;
console.log(a);     //100

var a = 123;
 a *= 2;
console.log(a);     //246

var a = 246;
 a /= 2;
console.log(a);     //123

var a = 246;
 a %= 2;
console.log(a);     //0

07-比较运算符

比较运算符就是将运算符两侧的值进行比较，如果成立则返回true，否则返回false

> 大于
- 判断符号左侧的数是否大于右侧，如果大于则返回true否则返回false

    var result = 5 > 5;
    console.log(result);     //false

    var result = 5 > 10;
    console.log(result);     //false

    var result = 5 > 3;
    console.log(result);     //true

>= 大于等于
- 判断符号左侧的数是否大于等于右侧，如果大于等于则返回true否则返回false

    var result = 5 >= 10;
    console.log(result);     //false

    var result = 5 >= 3;
    console.log(result);     //true

    var result = 5 >= 5;
    console.log(result);     //true

< 小于
- 判断符号左侧的数是否小于右侧，如果小于则返回true否则返回false

    var result = 5 < 10;
    console.log(result);     //true

    var result = 5 < 3;
    console.log(result);     //false

    var result = 5 < 5;
    console.log(result);     //false

<= 小于等于
- 判断符号左侧的数是否小于等于右侧，如果小于等于则返回true否则返回false

    var result = 5 <= 10;
    console.log(result);     //true

    var result = 5 <= 3;
    console.log(result);     //false

    var result = 5 <= 5;
    console.log(result);     //true

- 对于非数值进行比较会先将其转换为数值型然后在进行比较
- 任何值和NaN作比较都会返回false

    var result = 5 < null;
    console.log(result);         //false

    var result = 5 < "111";
    console.log(result);         //true

    var result = 0 < false;
    console.log(result);         //false

    var result = 5 < "hello";
    console.log(result);         //false

特殊情况：

如果两边都是字符串则不会转为数值，而是进行比较两边的Unicode编码
比较时是一位一位进行比较的，如果成立则返回true否则返回false
要是两位一样则接着和下一位进行比较
可以以此来对英文进行排序
如果比较两个字符串型的数字可能会有意料之外的结果，因此在进行比较时一定要先对其进行转型

       console.log('12' > '3');     //false

       console.log('12' > '23');    //false

       console.log('a' > 'b');      //false

       console.log('a' < 'b');      //true

       console.log('abb' > 'b');      //false

       console.log('baa' < 'a');      //false

       console.log('aab' > 'a');      //true

       console.log('1234' > '5');      //false

       console.log('1234' > +'5');      //true

08-相等运算符

相等
- 相等运算符用来比较两个值是否相等，如果相等返回true否则返回false
使用==来做相等运算
- 当使用相等来进行比较两个值时，如果类型不同则会进行类型转换，将其转换为相同的类型然后进行比较

    console.log(1 == 1);             //true

    console.log("1" == 1);           //true

    var a = 10;
    console.log(a == 4);             //false

    console.log(NaN == null);        //false

    console.log(NaN == NaN);         //false

全等
- ===用来判断两个值是否相等，和==类似但是不同的是它不会进行类型转换，如果两个值的类型不同则直接返回false

    console.log(123 === 123);        //true

    console.log("123" === 123);      //false

不相等
- !=来判断两个值是否相等，如果不相等返回true否则返回false
- 使用！= 来做不相等运算
- 不相等也会进行自动的类型转换，如果转换后相等它会返回false否则返回true

   console.log(10 != 5);            //true

   console.log(10 != 10);           //false

- 不全等
- ！==用来判断两个值是否不全等，和不等类似，也不会进行类型转换，如果两个值类型不等则返回true否则返回false

   console.log(123 !== 123);        //false

   console.log("123" !== 123);      //true

undefined是衍生自null，所以两个值比较为true

 console.log(undefined == null);  //true

NaN不和任何值相等包括它本身
- 可以通过isNaN()函数来判断一个数是否是NaN

    var a = NaN;
    isNaN(a);
    console.log(a);                  //NaN

09-条件运算符

条件运算符也叫三元运算符
- 语法：条件表达式?语句1：语句2
执行条件：
- 先执行表达式，如果表达式成立则执行语句1并返回结果，否则执行语句2并返回结果。

    true ? alert("语句1！") : alert("语句2！");      //弹出语句1!

    false ? alert("语句1！") : alert("语句2！");      //弹出语句2!

    var a = 10, b = 40, c = 30;
    var max = a > b ? (a > c ? a : c)  :  (b > c ? b : c);
    alert(max);

    var a = 23,b = 45;
    a > b ? alert("a大") : alert("b大");