跟着pink老师前端入门教程（JavaScript）-day04_pink javasript学习路线-CSDN博客

本文链接：https://blog.csdn.net/zyx210603/article/details/136140578

本文详细介绍了JavaScript中的各种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符以及运算符的优先级。特别关注了浮点数的精度问题和表达式与返回值的概念。此外，还讨论了一元运算符的递增和递减以及运算符之间的优先级规则。

摘要由CSDN通过智能技术生成

五、运算符

（一）运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

算数运算符
赋值运算符
一元运算符
比较运算符
逻辑运算符
递增和递减运算符

（二）算术运算符

1、概述

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

2、浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004

console.log(0.07 * 100); // 结果不是 7，而是：7.000000000000001

所以：不要直接判断两个浮点数是否相等

3、优先级

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

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

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结：先乘除后加减，有括号先算括号里面的

课堂提问

3.1 怎么判断一个数能够被整除呢?

它的余数是0就说明这个数能被整除，这就是% 取余运算符的主要用途

3.2 请问1+2*3结果是?

结果是7，注意算术运算符优先级的，先乘除，后加减，有小括号先算小括号里面的

4、表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给开发者，称为返回值

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表达式和返回值</title>
    <script>
        // 表达式：是由数字、运算符、变量等组成的式子 1 + 1
        console.log(1 + 1); //2 就是返回值
        // 1 + 1 = 2
        // 在程序里面 2 = 1 + 1 右（表达式）计算完毕给左变
        var num = 1 + 1;
    </script>
</head>

（三）赋值运算符

赋值运算符：对变量进行赋值的运算符

已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器

其他赋值运算符： += -= *= /= %=

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

    <script>
        let num = 1;
        // num = num +1;
        //赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
        num += 1;
        console.log(num);
    </script>

（四）一元运算符

众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

1、二元运算符：

2、一元运算符

2.1 递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。

在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，称为前置递增（递减）运算符，放在变量后面时，称为后置递增（递减）运算符。

2.2 前置自增运算符

++num 前置自增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。

使用口诀：先自加，后返回值

let num = 10;

alert(++num + 10); // 21

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前置递增运算符</title>
    <script>
        //1. 想要一个变量加1
        let num = 1;
        num = num + 1; //++num
        console.log(num);
        //前置递增运算符 ++ 写在变量的前面
        let age = 10;
        ++age; //类似于 age = age + 1
        console.log(age);
        //3. 先加1 后返回值
        let p = 10;
        console.log(++p + 10);
    </script>
</head>

2.3 后置自增运算符

num++ 后置自增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。

使用口诀：先返回原值，后自加

let num = 10;

alert(10 + num++); // 20

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后置递增运算符</title>
    <script>
        let num = 10;
        num++;
        console.log(num); //11
        // 1. 前置自增和后置自增如果单独使用 效果是一样的
        // 2. 后置自增口诀：先返回原值，后自加
        let age = 10;
        console.log(age++ + 10); //20 
        console.log(age); //11
    </script>
</head>

小结

前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
●后置:先原值运算，后自加(先人后己)
前置:先自加，后运算(先已后人)
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++ 或者 num--

（五）比较运算符

使用场景：比较两个数据大小、是否相等

1、比较运算符：

> ：左边是否大于右边
<：左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边值是否相等
===：左右两边是否类型和值都相等
!==：左右两边是否不全等
比较结果为boolean类型，即只会得到 true 或 false

2、对比：

= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等，强烈推荐使用 ===

    <script>
        console.log(3 > 4);
        console.log(5 > 3);
        console.log(2 == 2);
        // 比较运算符有隐式转换 把'2'转换为2 双符号只判断值
        console.log(2 == '2'); //true
        // === 全等判断 值和数据类型都一样才行
        // 以后判断是否相符 请用===
        console.log(2 === '2'); //false
        console.log(NaN === NaN); //NaN不等于任何人，包括他自己
    </script>

4、补充

字符串比较

比较的字符对应的ASCII码
从左往右依次比较
如果第一位一样再比较第二位，以此类推
比较的少，了解即可

NaN不等于任何值，包括它本身，涉及到"NaN“ 都是false

尽量不要比较小数，因为小数有精度问题

不同类型之间比较会发生隐式转换

最终把数据隐式转换转成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

（五）逻辑运算符

1、使用场景

逻辑运算符用来解决多重条件判断

eg: 正确写法： num > 5 && num < 10

2、逻辑运算符

    <script>
        //二元 逻辑与 一假则假
        console.log(true && true);
        console.log(false && false);
        console.log(3 < 5 && 3 > 2);
        console.log(3 < 5 && 3 < 2);
        console.log('----------------');

        //二元 逻辑或 一真则真
        console.log(true || true);
        console.log(false || true);
        console.log(false || false);
        console.log('----------------');

        //一元 逻辑非 取反
        console.log(!true);
        console.log(!false);
        console.log('----------------');

        /* 需求：用户输入一个，判断这个数能被4整除，但是不能被100整除,满足条件，
        页面弹出true，否则弹出false */
        let num = prompt('请输入一个数');
        alert((num % 4 === 0) && (num % 100 !== 0))
    </script>