【JavaScript】(四) 运算符

已于 2023-02-24 16:07:28 修改
阅读量526 收藏 17
点赞数 18
分类专栏： JavaScript 文章标签： javascript 前端
于 2022-05-06 07:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48650082/article/details/124596944
版权

JS

目录

◆ 1、运算符

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

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

◆ 2、算术运算符

2.1 算术运算符概述

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

运算符描述实例
+加10+20=30
-减10-20=-10
*乘10*20=100
/除10/20=0.5
%取余数（取模）返回除法的余数9 % 2 = 1

例子：

<!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>
        console.log(2 + 2);
        console.log(2 - 2);
        console.log(2 * 2);
        console.log(2 / 2);
        // % 取余（取模）
        console.log(6 % 5);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
算术运算符

2.2 浮点数的精度问题

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

例子：

<!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>
        // 注意：浮点数运行存在精度问题
        console.log(0.1 + 0.2);
        console.log(0.07 * 100);
        // 不能直接拿浮点数进行比较是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
浮点数

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

注意：

  • 如果余数是0 就说明这个数能被整除， 这是 % 取余运算符的主要用途
  • 算术运算符也是有优先级的，先乘除，后加减，有小括号先算小括号里面的

2.3 表达式和返回值

➢ 表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
➢ 简单理解：是由数字、运算符、变量等组成的式子
➢ 表达式最终都会有一个结果，返回给我们，我们称为返回值

例子：

<!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>
        // 由数字、运算符 变量等组成的式子 我们称为表达式  1 + 1
        console.log(1 + 1);   // 2 就是返回值
        // 在我们程序里面 2 = 1 + 1   把右边的表达式计算完毕把返回值赋给左边
        var num = 1 + 1;
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
表达式与返回值

◆ 3、递增和递减运算符

3.1 递增和递减运算符概述

➢ 如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ - - ）运算符来完成。
➢ 在 JavaScript 中，递增（++）和递减（ - - ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
➢ 注意：递增和递减运算符必须和变量配合使用。

3.2 递增运算符

（1）前置递增运算符

➢ ++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值

例子：

<!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;
        ++num1;    // 类似于 num1 = num1 + 1
        console.log(num1);
        var num2 = 10;
        console.log(++num2 + 10);   // 先加1，后返回值
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
前置自增运算符

（2）后置递增运算符

➢ num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加

例子：

<!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;
        num1++;    // num1 = num2 + 1     ++num1;
        console.log(num1);
        // 前置自增和后置自增如果单独使用，效果是一样的
        // 后置自增 口诀：先返回原值，后自加1
        var num2 = 10;
        console.log(num2++ + 10);
        console.log(num2);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
后置自增运算符

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

◆ 4、比较运算符

4.1 比较运算符概述

➢ 概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

运算符名称说明案例结果
<小于号1<2true
>大于号1>2false
>=大于等于号（大于或者等于）2>=2true
<=小于等于号（小于或者等于）3<=2false
==判等号（会转型）6==6true
!=不等号8!=8false
=== !==全等，要求值和数据类型都一致9===‘9’false

例子：

<!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>
        console.log(3 >= 5);
        console.log(2 <= 6);
        // 程序里面的等号符号是 ==
        console.log(5 == 6);
        console.log('香蕉' == '卟NaNa');
        console.log(88 == 88);
        // == 会默认转换数据类型，会把字符串型的数据类型转换为数字型的，只要求值相等就可以 true
        console.log(88 == '88');
        console.log(66 != 66);
        // 全等 ===
        console.log(22 === 22);
        // 全等 ===  要求两侧的值和数据类型完全一致才可以 true
        console.log(22 === '22');
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
比较运算符

4.2 = 小结

符号作用用法
=赋值把右边给左边
==判断判断两边值是否相等（注意此时有隐式转换）
===全等判断两边的值和数据类型是否完全相同

◆ 5、逻辑运算符

5.1 逻辑运算符概述

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

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

5.2 逻辑与 &&

➢ 两边都是 true才返回 true，否则返回 false
逻辑与
例子：

<!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>
        // 逻辑与 &&  and  两边都是true，结果才是true，只要有一侧是false，结果就是false
        console.log(3 > 2 && 3 > 5);
        console.log(3 > 2 && 3 < 5);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
逻辑与例子

5.3 逻辑或 ||

➢ 两边都为 false 才返回 false，否则都为true
逻辑或
例子：

<!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>
        // 逻辑或 ||  or  两侧都为false时，结果才是false，只要有一侧时true，结果就是true
        console.log(3 > 2 || 3 > 5);
        console.log(3 < 2 || 3 > 5);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
逻辑或例子

5.3 逻辑非 ！

➢ 逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

例子：

<!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>
        // 逻辑非 ！ not
        console.log(!true);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
逻辑非例子

5.4 短路运算（逻辑中断）

➢ 短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值;

（1） 逻辑与
  • 语法： 表达式1 && 表达式2
  • 如果第一个表达式的值为真，则返回表达式2
  • 如果第一个表达式的值为假，则返回表达式1

例子：

<!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>
        // 逻辑与短路运算 如果表达式为真，则返回表达式2，如果表达式1为假，则返回表达式1
        console.log(123 && 456);
        console.log(123 && 456 && 789);
        console.log(1 && 2 + 3 && 8 - 6);
        // 如果有如果有空的或者是否定的为假的，其余是真的，0、''、null、undefined、NaN为假
        console.log(0 && 456);
        console.log('' && 456);
        console.log(0 && 1+2 && 345);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
逻辑与短路运算

（2）逻辑或
  • 语法： 表达式1 || 表达式2
  • 如果第一个表达式的值为真，则返回表达式1
  • 如果第一个表达式的值为假，则返回表达式2

例子：

<!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>
        // 逻辑或短路运算 如果表达式1结果为真，则返回表达式1，如果表达式1结果为假，则返回表达式2
        console.log(123 || 456);
        console.log(123 || 456 || 789);
        console.log(0 || 456 || 789);
        // 逻辑中断会影响程序的运行结果
        var num = 0;
        console.log(123 || num++);
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
逻辑或短路运算

◆ 6、赋值运算符

➢ 概念：用来把数据赋值给变量的运算符。

赋值运算符说明案例
=直接赋值var usrName = ‘我是值’;
+=、-=加、减一个数后再赋值var age = 10; age += 5; // 15
*=、/=、%=乘、除、取模 后再赋值var age = 2; age *= 5; // 10

例子：

<!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 num = 10;
        num += 5;           // 相当于 num = num + 5; 此处num运算前的值是10，运算后是15
        console.log(num);
        num -= 3;           // 相当于 num = num - 3; 此处num运算前的值是15，运算后是12
        console.log(num);
        num *= 2;           // 相当于 num = num * 2; 此处num运算前的值是12，运算后是24
        console.log(num);
        num /= 2;           // 相当于 num = num / 2; 此处num运算前的值是24，运算后是12
        console.log(num);
        num %= 7;           // 相当于 num = num % 7; 此处num运算前的值是12，运算后是5
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
赋值运算符

◆ 7、运算符优先级

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

例子：

<!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>
        console.log( 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)
        var num = 10;
        console.log( 5 == num / 2 && (2 + 2 * num).toString() === '22');
        var a = 3 > 5 && 2 < 7 && 3 == 4; 
        console.log(a); 
        var b = 3 <= 4 || 3 > 1 || 3 != 2; 
        console.log(b); 
        var c = 2 === "2"; 
        console.log(c); 
        var d = !a || b && c;
        console.log(d);
    </script>
</head>
<body>
    
</body>
</html>

结果展示：
运算符优先级

香蕉卟NaNa
关注
  • 18
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 32
    评论
专栏目录
洛谷-【入门3】循环结构——C语言
去无人的岛，摸鲨鱼的角
01-05 4040
洛谷-【入门3】循环结构——C语言
正则表达式
快乐学代码
04-14 617
正则表达式 一.限定符 ？ 前面的那个字母出现零次或者1次 ab?c ------------------>(ac)-(abc) *号 零个或者多个
元字符匹配
weixin_30369041的博客
12-25 609
介绍下Shell中的${}、##和%%使用范例，本文给出了不同情况下得到的结果。假设定义了一个变量为：代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得到不同的值：${file#*/}：删掉第一个 / 及其左边的字符串：dir1/dir2/dir3/my.file.txt${file##*/}：删掉最后一个 / 及其左边的字符串：my.file.tx...
2021-07-23 Day12-JS第二天 运算符、流程控制
weixin_49911270的博客
07-23 226
一、运算符 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript中常用的运算符有： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符 二、算数运算符 2.1算数运算符概述 概念：算术运算使用的符号，用于执行两个变量或值的算术运算。 运算符 概述 实例 + 加 10+20=30 - 减 20-10=10 * 乘 10*20=200 / 除 20/10=2 % 取余数(取模) 返回除法的余数9%2=1
console.log`123`是什么？
前端-尔嵘
12-02 394
['123', raw: Array(1)]
JavaScript js运算符 示例代码
最新发布
06-07
本资源文件是js运算符相关学习代码的示例 包含算术运算符、比较运算符、逻辑运算符等 JavaScript 是一种广泛使用的脚本语言，主要用于网页和Web应用程序的客户端开发。 JavaScript（简称JS）是一种轻量级、解释型、...
javascript三元运算符用法实例
10-24
主要介绍了javascript三元运算符用法实例,本文讲解了三元运算符用法实例和编程语言中的三元运算符介绍,需要的朋友可以参考下
深入剖析JavaScript instanceof 运算符
10-16
主要介绍了深入剖析JavaScript instanceof 运算符,ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。,需要的朋友可以参考下
全面了解javascript三元运算符
10-22
下面小编就为大家带来一篇全面了解javascript三元运算符。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript逻辑运算符相关总结
10-14
JavaScript逻辑运算符是编程语言中不可或缺的一部分，它们用于处理布尔逻辑和控制程序流程。这篇总结主要探讨了JavaScript中的逻辑运算符，包括`&&`（逻辑与）、`||`（逻辑或）以及`!`（逻辑非）的机制、用法和一些...
猴子摘香蕉问题求解完整代码
12-29
利用一阶谓词逻辑求解猴子摘香蕉问题：房内有一个猴子，一个箱子，天花板上挂了一串香蕉，其位置如图1所示，猴子为了拿到香蕉，它必须把箱子搬到香蕉下面，然后再爬到箱子上。请定义必要的谓词，列出问题的初始化状态（即下图所示状态），目标状态（猴子拿到了香蕉，站在箱子上，箱子位于位置b）。
js初学自用知识点
qq_48321086的博客
04-10 1563
自己自学时做的一些知识点
var a={}, b={key:‘a‘}, c={key:‘c‘}； a[b]=123； a[c]=456； console.log(a[b])；结果为什么是456？
weixin_42125732的博客
05-21 2019
今天在技术交流群看到了一个很有意思的一道题 var a={}, b={key:‘a’}, c={key:‘c’}; a[b]=123; a[c]=456; console.log(a[b]);//为什么是456？ 我也不懂什么原理，这道题我做错了 于是乎我进行了一些资料的查阅，因为b跟c都是对象，而普通对象的属性名如果是对象的话，就首先要把它转为字符串，所以这样下来的话，这里用b或者c作为属性名的话，每次都是的结果都是 object object了，只是给了他两次赋值而已，接下来我们对这段代码进行深度分
为什么123 and 456结果是456而123 or 456结果是123？
HWP
11-04 5116
转载：方便自己找。原文链接在下面。 自己加了点总结哈哈！ and:空格不要忘记了！ 对于and,首先计算第一个表达式，若为真，则计算第二个表达式，若为真，则返回第二个真值。 如：123 and 456 返回456 若为假，则返回该假值。 如：123 and 0 返回0...
console.log的高级用法
細水、長流√的专栏
09-03 3534
//基本用法 console.log('最常见用法\n换行'); console.error('输出错误信息 会以红色显示'); console.warn('打印警告信息 会以黄色显示'); console.info('打印一般信息'); console.clear();//清空上面的console显示 //进阶用法 console.assert(false,'判断为false才显示的信息');//console.assert(bool,”info”)..
JavaScript
weixin_45808482的博客
02-20 381
JavaScript基础第01天 1 - 编程语言 1.1 编程 编程： 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 计算机程序： 就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 1.2 计算机语言 计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。 计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。
关于window.console&&console.log(123)的思考
weixin_30901729的博客
11-26 319
一、JS的且运算记得最开始看到window.console&&console.log(123)，当时知道能起什么作用但是没有深入研究，最近在研究后总算弄明白了。要理解这个，首先得明白三个知识点第一：短路原则这个大家都非常清楚的了，在做且运算的时候，“同真才真，一假则假”，比如true&&true==truetrue&&false==falsefals...
Javascript运算符： 算术运算符 递增/递减运算符 比较运算符（等号区别） 逻辑运算符 赋值运算符 （运算符优先级）
Echo_bx的博客
06-06 301
Javascript运算符： 算术运算符 递增/递减运算符 比较运算符（等号区别） 逻辑运算符 赋值运算符 （运算符优先级）
console.log()的使用
热门推荐
一个有梦想的年轻人
10-09 2万+
通常情况下，很多人会用alert（）进行调试，这样通常很麻烦，很多浏览器自带一个console，可以看到一些信息，下面为一个HTML的实例                                        console.log(xx.inTxt.value);     用某个浏览器打开这个HTML文件，按下F12，就
javascript 赋值运算符
10-15
JavaScript 中的赋值运算符有以下几种： 1. 等号赋值运算符（=）：将右侧的值赋给左侧的变量。 2. 加等于赋值运算符（+=）：将右侧的值加到左侧的变量上，并将结果赋给左侧的变量。 3. 减等于赋值运算符（-=）：将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 32
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值