Javascript运算符

213 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第20天

运算符

定义

运算符也被称为操作符,用于实现赋值,比较和执行算术运算等功能的符号

Javascript中常用的运算符

  • 算术运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

算术运算符

算术运算使用的符号,用于执行两个变量或值得算数运算

运算符描述实例
+10 + 10 = 20
-10 - 20 = -10
*10 * 10 = 100
/10 / 20 = 0.5
%取余9 % 2 = 1
  • 浮点数得运算可能会有误差,因为是将两个是进行了二进制的转换在进行运算然后转成十进制的结果,所有算出的结果会有误差

image-20220620153648499.png

  • 所以我们不能拿着浮点数直接进行比较
var num = 0.1 + 0.2;
console.log(num == 0.3); //false
  • 算术运算符优先级和我们学的运算是相似的

表达式和返回值

  • 表达式:是由数字、运算符、变量构成的式子

  • 返回值:表达式返回的结果就

递增和递减运算符

如果需要反复给数字变量添加1或减去1,可以使用递增(++)或递减(--)运算符来完成

在Javascript中,递增和递减运算符既可以放在变量前面也可以放在变量后面,放在变量前面时,我们称之为前置递增(递减)运算符,放在变量后面时,我们可以称之为后置递增(递减)运算符

  • 注意:要和变量配合使用

  • 前置和后置的区别:前置就是在当前的代码中先执行递增(递减)然后使用,而后置中是在当前递增(递减)的那一行不执行还保留原数据到下一行才使用递增(递减)的结果单独使用是一样的

<!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 num1 = 10;
        var num2 = 2;
        var num3 = --num1 + num2;
        var num4 = num1 + num2;
        console.log(num1);
        console.log(num3);
        console.log(num4);
        var num1 = 10;
        var num2 = 2;
        var num3 = num1-- + num2;
        var num4 = num1 + num2;
        console.log(num1);
        console.log(num3);
        console.log(num4);    
    </script>
</head>
  • 执行结果:

image-20220620160422922.png

比较运算符

比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果

运算符名称说明案例结果
<小于号1<2true
大于号1>2false
>=大于等于1>=2false
<=小于等于3<=2false
==判断是否相等3==3true
!=不等号2!=2false
=== !==全等 要求值和数据类型一致3==='3'false
  • 隐式转换:== 中默认会转换数据类型,所以3=="3"

  • 总结

符号作用用法
=赋值把右边给左边
==判断判断两边值是否相等
===全等判断两边的值和数据类型是否完全相同

逻辑运算符

逻辑运算符是来进行布尔值运算的运算符,其返回值也是布尔类型。后面开发中经常用于多个条件的判断

逻辑运算符说明案例
&&"逻辑与",简称"与",andtrue&&false
||"逻辑或",简称"或" ,ortrue || false
!"逻辑非",简称"非" ,not!true

短路运算 (逻辑中断)

逻辑运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

  1. 逻辑与短路运算
  • 语法:表达式1&&表达式2

  • 如果第一个表达式的值为真,则返回表达式2

  • 如果第一个表达式的值为假,则返回第一个表达式的值

  • 除0意外的所有数都为真

console.log(-1 && 2);  // 2
console.log(0 && 2);   // 0
console.log('s' && 2); // 2
console.log('' && 2); //
  1. 逻辑或短路运算
  • 语法:表达式1 || 表达式2
  • 如果第一个表达式的值为真,则返回表达式1
  • 如果第一个表达式的值为假,则返回表达式2
console.log(-1 || 2); // -1
console.log(0 || 2);  // 2
console.log(0 || 0 || 789); // 789
var num = 0;
console.log(123 || num++);
console.log(num);

赋值运算符

赋值运算符说明案例
=直接赋值var name = 'mamm403';
+= -=加,减一个数后赋值var age ="10"; age += 5 ;
*= /= %=乘、除、取模后赋值var age =2 ,;age*=5;

运算符优先级

优先级运算符顺序
1小括号()
2一元运算符++ -- !
3算数运算符先* / % 后 + -
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先&& 后||
7赋值运算符=
8逗号运算符,
  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高