JavaScript运算符

285 阅读4分钟

JavaScript运算符

算数运算符

算数运算符 : 进行数学运算的符号

数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)

+: 进行加法运算

1、当符号两边都是数字或者布尔的时候会进行数学运算

2、只要符号任意一边是字符串的时候 就会进行字符串拼接

- 减法运算 * 乘法运算 / 除法预算 % 取余运算 都是进行数学运算

取余运算 :先进行除法运算 获取除法运算元素后 剩下余数

    <script>
        console.log(20 - 10)
        console.log(20 * 10)
        console.log(20 / 10)
        // 取余运算 先进行除法运算 获取除法运算元素后 剩下余数
        console.log(2 % 5)
        console.log(10 % 5)
        // 如果一行内 出现了多个算术运算符
        // 先乘除后加减 如果有括号 就先算括号
        console.log(1 + 1 * 2);
        console.log((1 + 1) * 2);
        // 如果一行内 确实很多个算术运算符 都建议按照自己的想法来加括号
        console.log(1 + (2 * 3 + 3) / 4 + 4 * 4 + 5);
    </script>

同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级

JavaScript中 优先级越高越先被执行,优先级相同时以书从左向右执行

乘、除、取余优先级相同 加、减优先级相同 乘、除、取余优先级大于加、减 使用 ( ) 可以提升优先级

总结: 先乘除后加减,有括号先算括号里面的

案例:计算圆的面积

需求:对话框中输入圆的半径,算出圆的面积并显示到页面

分析:

①:面积的数学公式: π*r²

②:转换为JavaScript写法 : 变量 * r * r

计算圆的面积:计算单位 :π 用 Math.PI 代表

    <script>
        // π * r 的平方
        // 在js中 通过Math.PI来代表 π 
        let r = prompt('请输入圆的半径')
        console.log('圆的面积是:'+ Math.PI * r * r)
    </script>

赋值运算符

赋值运算符 :进行赋值操作的符号

使用这些运算符可以在对变量赋值时进行快速操作

    <script>
        let n1 = 10
        // 加等于运算 就是n1的值 + 10  即是10 + 10 最后结果20
        n1 += 10
        console.log(n1)
        let n2 = 10
        n2 -= 10
        console.log(n2)
        let n3 = 10
        n3 *= 10
        console.log(n3)
        let n4 = 10
        n4 /= 10
        console.log(n4)
        let n5 = 10
        n5 %= 10
        console.log(n5)
        // 其余的计算方式都一样
    </script>

一元运算符

自增自减运算符 : 单独对一个变量进行 +1 或者 -1 操作的符号

符号 ++ : 自增运算符 表示在自身的基础上加1

符号 - - : 自减运算符 表示在自身的基础上减1

除符号不一样 两者计算方式一样

分为前置加加 和 后置加加 两种 都是让自身的变量加1

前置是在变量前添加 符号 如++n

前置添加 计算方式 是 先把变量的值改变 再用改变后的值参与运算

后置是在变量后面加 符号 如 n++

后置加加 则是先把变量的值参与运算 再把变量的值改变

自增示例:

    <script>
        let i = 1
        console.log(++i + 2); //结果是4
        // 注意 :i 是2
        // i 先自加1, 变成2之后 再和后面的2相加
        let age = 1
        console.log(age++ + 2); //结果是3
        // 注意 :此时的 i 是1
        // 先和 2 相加 先运算输出完毕后 i 再自加是2
			// 要查询后置加加的结果 在后面在打印age的结果
        console.log(age);
    </script>

自减示例:

    <script>
			let i = 2
        console.log(--i + 2); //结果是3
        // i 先自减1, 变成1之后 再和后面的2相加
        let age = 2
        console.log(age-- + 2);//结果是4
        // 注意 :此时的 i 还是2
        // 先和 2 相加 先运算输出完毕后 i 再自减是1
    </script>

一元运算符的面试题案例:

        <script>
        let i = 1
        // 面试题 实际结果为7
        console.log(i++ + ++i + i);
        // 步骤分为两部 第一步 i++ 后置加加 此时为1 结果出来后再自增 为2
        // 第二步 ++i  此时第一步已完成后自增 为2  先自增再算值 就是 1+2=3
        // 后面的i 就是前面的值 3 所以就是 1 + 3 + 3 = 7
    </script>

比较运算符

比较运算符: 进行 比较运算 的符号

作用:比较两个数据大小、是否相等

得到的结果不是 true 就是 false

符号 : > :大于比较 < : 小于比较 >= :大于等于 <= 小于等于

以下得到的结果都是 true

    <script>
        console.log(200 > 100)
        console.log(100 < 200)
        console.log(100 >= 100)
        console.log(100 <= 100)
    </script>

另外还有 专门比较等于的 :

== :等于比较 只比较 值 是不是相等 不考虑数据类型

===: 全等于比较 必须要 值 和 数据类型都相等 才是 true

!= : 不等于比较 比较 值 是不是不相等 不考虑数据类型

!== : 不全等于比较 只要 值 和 数据类型任何一个不相等 就是 true

    <script>
        //   ==: 只比较 值 是不是相等 不考虑数据类型
        console.log(100 == 100)
        console.log(100 == '100')
        // ===: 必须要 值 和 数据类型都相等 才是 true
        console.log(100 === 100)
        console.log(100 === '100')
        //   !=: 不等于比较   比较 值 是不是不相等 不考虑数据类型
        console.log(100 != 100)
        console.log(100 != '100')
        // !==: 不全等于比较   只要 值 和 数据类型任何一个不相等 就是 true
        console.log(100 !== 100)
        console.log(100 !== '100')
    </script>

比较 一般都是对数字做比较

对于字符串做比较 更多是判断两者是否相等

// console . log('A' === 'B')

如果拿字符串去大小比较 判断标准是 先把字符串 拿去做 转数字

// 转完了数字之后 才能根据数字大小比较

1648351803513.png

如:

console . log ('A' > 'B') 结果为 false A为65 B为66 所以不是A大于B

// NaN = A NaN = B

console . log (NaN === NaN) false 不能以为两者代码一样就相等 (不是一个数字)

// JS 处理小数 有问题 后面会补充 精度问题 在数学的角度没问题 但是在代码的世界就不一样

console . log (0.4 + 0.2 === 0.6)false

逻辑运算符

逻辑运算符 : 进行 逻辑运算 的符号

1648299049466.png

&& : 与 运算 必须两边都为 true 最终结果才是 true

    <script>
        // && : 必须两边都为 true 最终结果才是 true
        let num = 6
        console.log(num > 5 && num < 10)  //结果都为 true 
        console.log(num > 5 && num > 10)  //结果都为 false  有一个结果为假 一假则假
        console.log(true && true);
        console.log(true && false);
        console.log(false && true);
        console.log(false && false);
    </script>

|| : 或 运算 只要任意一边为 true 最终结果就是 true

    <script>
        // || : 只要任意一边为 true 最终结果就是 true
        let money = 10
        console.log(money === 1 || money === 0)  // 一真则真
        console.log(true || true);
        console.log(true || false);
        console.log(false || true);
        console.log(false || false);
    </script>

! : 非 运算 (取反运算)本身是 true 结果就是 false 本身是 false 结果就是 true

    <script>
        //  ! : 本身是 true 结果就是 false 本身是 false 结果就是 true
        console.log(!true);
        console.log(!false);
    </script>

案例 :判断一个数是4的倍数,且不是100的倍数

需求:用户输入一个,判断这个数能被4整除,但是不能被100整除

分析:

①:用户输入

②:控制台: 是否能被4整除并且不能被100整除

    <script>
        // 判断一个数是4的倍数 且不是100的倍数
        let digit = prompt('请输入你的数字')
        console.log(digit % 4 === 0 && digit % 100 !== 0 );
        // 要知道 逻辑与 还是 逻辑或   数一数有几个条件
        // console.log((条件1) &&(条件2));
        // 1、获取到用户的一个输入
        // 2、判断是否满足某些条件
            // 1、条件1 这个数可以被4 整除   % 整除和不整除的区别就在于 a % b = 0
            // 2、条件2 这个数不能被100 整除 %
            // 等于0 就是被整除 不等于0 = 不被整除
        // 小结:
        // 1、逻辑与 还是 逻辑或
        // 2、当前是几个判断条件
        // 3、写出大体的结构   console.log((条件1) &&(条件2));
        // 4、按个网里面填充我们的代码即可
    </script>

小结:

1、逻辑与 还是 逻辑或

2、当前是几个判断条件

3、写出大体的结构 console.log((条件1) &&(条件2));

4、按个网里面填充我们的代码即可

逻辑运算符的两个短路运算

逻辑运算符里的短路 :只存在于 && 和 || 中,当满足一定条件会让右边代码不执行

运算结果:无论 && 还是 || ,运算结果都是最后被执行的表达式值,一般用在变量赋值

    <script>
        // 一假则假 && 左边为false 右边就不在=再执行
        console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2)
        // 工作常见的写法
        // 如果今天还下雨 那我就去打架
        // 不下雨 不去打架

        // false 不成立 假 不执行  true 成立 真  执行
        let rain = true
        // 左边成立 右边才会去执行
        rain && console.log('下雨 干架去');

        // 逻辑或 一真则真
        // 只要 || 左边成立了 为true 右边就不再执行 为false 就去执行
        console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);
        // 工作常用技巧
        // 如果下雨 那么我就不玩了  真 不执行 假 执行
        let rain1 = false
        rain1 || console.log('去玩');
        // 两个短路运算 逻辑或 和 逻辑与
        // 工作中的语法 逻辑与 来说 满足了 就去执行
        // 工作中的语法 逻辑或 来说 不满足了 就去执行
    </script>

判断

1648367605869.png

    <script>
			// 我们的 undefined 如果 转换成 布尔类型 其实是个false
        // 那段代码是最后执行即可
        let result = 1 > 0 && 30
        console.log(result)
    </script>

转换成false只有五个内容 其他都会转成true

false : 分别是 0 nan ‘ 空字符串 ’ undefined null NaN 这几个内容

运算符优先级

目标:掌握运算符优先级,能判断运算符执行的顺序

优先级运算符顺序
1小括号( )
2一元运算符++ -- !
3算数运算符先 * / % 后 + -
4比较运算符> > = < <=
5相等运算符== != === !==
6逻辑运算符先 && 后 ||
7赋值运算符=
8逗号运算符,

一元运算符里面的逻辑非优先级最高 逻辑与比逻辑或优先级高

判断

1648367773097.png