JavaScript -- 03. 运算符介绍

news2024/11/25 0:48:26

文章目录

  • 运算符
    • 1 算数运算符
      • 1.1 基础符号
      • 1.2 自动类型转换
    • 2 赋值运算符
    • 3 一元±
    • 4 自增和自减
      • 4.1 ++ 自增运算符
      • 4.2 -- 自减运算符
    • 5 逻辑运算符
      • 5.1 逻辑非
      • 5.2 逻辑与
      • 5.3 逻辑或
    • 6 关系运算符
    • 7 相等运算符
      • 7.1 `==`
      • 7.2 `===`
      • 7.3 `!=`
      • 7.4 `!==`
    • 8 条件运算符(三元表达式)
    • 9 运算符的优先级

运算符

这部分内容主要讲解了JS中的各种运算符。主要有:算术运算符、赋值运算符、一元运算符、自增自减运算符、逻辑运算符、关系运算符、相等运算符、条件运算符、运算符的优先级以及隐式类型转换。

每个运算符都有两个功能,第一个是计算,第二个是返回计算结果(自增自减的时候需要区分)

1 算数运算符

1.1 基础符号

  • 运算符可以用来对一个或多个操作数(值)进行运算

  • 算术运算符:

    • 加法运算符
    • 减法运算符
    • 乘法运算符
    • / 除法运算符
    • ** 幂运算
    • % 模运算,两个数相除取余数
  • 注意:

    • 算术运算时,除了字符串的加法,
    • 其他运算的操作数是非数值时,都会转换为数值然后再运算
let a = 1 + 1
a = 10 - 5
a = 2 * 4
a = 10 / 5
a = 10 / 3
a = 10 / 0 // Infinity, 其他语言会报错
a = 10 ** 4
a = 9 ** 0.5 // 开方
a = 10 % 2
a = 10 % 3
a = 10 % 4

1.2 自动类型转换

JS是一门弱类型语言,当进行运算时会通过自动的类型转换来完成运算

a = 10 - '5' // 10 - 5
a = 10 + true // 10 + 1
a = 5 + null // 5 + 0
a = 6 - undefined // 6 - NaN

计算结果

image-20221130121046737

当任意一个值和字符串做加法运算时,它会先将其他值转换为字符串,然后再做拼串的操作可以利用这一特点来完成类型转换可以通过为任意类型 + 一个空串的形式来将其转换为字符串其原理和String()函数相同,但使用起来更加简洁

let a = true
let b = String(a)
let c = a + ''

image-20221130121501607

2 赋值运算符

赋值运算符用来将一个值赋值给一个变量

=
    - 将符号右侧的值赋值给左侧的变量
??=
    - 空赋值
    - 只有当变量的值为nullundefined时才会对变量进行赋值
+=
    - a += n 等价于 a = a + n
-=
    - a -= n 等价于 a = a - n
*=
    - a *= n 等价于 a = a * n
/=
    - a /= n 等价于 a = a / n
%=
    - a %= n 等价于 a = a % n
**=
    - a **= n 等价于 a = a ** n
let a = 5 // 将右边的值 赋值 给左边的变量
let b = a // 一个变量只有在 = 左边时才是变量,在 = 右边时它是值
a = a + 11 // 大部分的运算符都不会改变变量的值,赋值运算符除外

3 一元±

  • 正号
    • 不会改变数值的符号
  • 负号
    • 可以对数值进行符号位取反
  • 当我们对非数值类型进行正负运算时,会先将其转换为数值然后再运算

image-20221130122555500

4 自增和自减

4.1 ++ 自增运算符

  • ++ 使用后会使得原来的变量立刻增加1
  • 自增分为前自增(++a)后自增(a++)
  • 无论是++a还是a++都会使原变量立刻增加1
  • 不同的是++a和a++所返回的值不同
    • a++ 是自增前的值 旧值
    • ++a 是自增后的值 新值
let a = 10
let b = a++ // a的值变为11, b的值为10

let c = 10
let d = ++c // c的值变为11, d的值为11

let n = 5
/* 算式从左到右执行,
   先执行n++,此时n变为6, n++返回值为5
   然后执行++n,此时n变为7,++n返回值为7
   最终n的值为7
   所以下式等同于 5 + 7 + 7
 */
let result = n++ + ++n + n // 最终结果为19

4.2 – 自减运算符

  • – 使用后会使得原来的变量立刻减少1
  • 自增分为前自减(–a)后自减(a–)
  • 无论是–a还是a–都会使原变量立刻减少1
  • 不同的是–a和a–所返回的值不同
    • a-- 是自减前的值 旧值
    • –a 是自减后的值 新值
let a = 10
let b = a-- // a的值变为9, b的值为10

let c = 10
let d = --c // c的值变为9, d的值为9

5 逻辑运算符

  • !:逻辑非
  • &&: 逻辑与
  • || :逻辑或

5.1 逻辑非

逻辑非的符号是英文的感叹号,不要敲成中文了

  • 这个运算符可以对一个值进行非运算

  • 可以对一个布尔值进行取反操作

    !true // false
    !false // true
    
  • 如果对一个非布尔值进行取反,它会先将其转换为布尔值然后再取反,可以利用这个特点将其他类型转换为布尔值(可以使用!!m代替Boolean(m)

    image-20221130124746659

5.2 逻辑与

  • 可以对两个值进行与运算
    • 当&&左右都为true时,则返回true,否则返回false
    • 与运算是短路的与,如果第一个值为false,则不看第二个值
    • 与运算是找false的,如果找到false则直接返回,没有false才会返回true
    • 对于非布尔值进行与运算,它会转换为布尔值然后运算,但是最终会返回原值
      • 如果第一个值为false,则直接返回第一个值
      • 如果第一个值为true,则返回第二个值
result = true && true // true
result = true && false // false
result = false && true // false
result = false && false // false

let a = 2
result = 0 && a++ // 短路发生,第一个值为false,直接终止逻辑运算,不会运算a++
console.log(a) // 2

result = true && 1 > 2 && a-- // 执行到第二项的时候就返回false,也就是说找到第一个计算结果为false就会直接停止计算后面的值

布尔值计算最终会返回原表达式的值

  • 从左到右计算,返回第一个计算结果为false的表达式计算结果
  • 如果最终返回的是true,则会返回最后一项的计算结果

image-20221130130640795

5.3 逻辑或

  • 可以对两个值进行或运算
    • 当||左右有true时,则返回true,否则返回false
    • 或运算也是短路的或,如果第一个值为true,则不看第二个值
    • 或运算是找true,如果找到true则直接返回,没有true才会返回false
    • 对于非布尔值或运算,它会转换为布尔值然后运算, 但是最终会返回原值
      • 如果第一个值为true,则返回第一个
      • 如果第一个值为false,则返回第二个
result = true || false 	// true
result = false || true 	// true
result = true || true 	// true
result = false || false // false

let a = 2
result = 1 || a++ // 短路发生,true,直接终止逻辑运算,不会运算a++
console.log(a) // 2

result = false || 1 < 2 || a-- // 执行到第二项的时候就返回true,也就是说找到第一个计算结果为true就会直接停止计算后面的值

返回值的计算结果与逻辑与的返回方式相似

  • 从左到右计算,返回第一个计算结果为true的表达式计算结果
  • 如果最终返回的是false,则会返回最后一项的计算结果

image-20221130131430690

6 关系运算符

关系运算符:关系运算符用来检查两个值之间的关系是否成立;成立返回true,不成立返回false

  • >:用来检查左值是否大于右值
  • >=:用来检查左值是否大于或等于右值
  • <:用来检查左值是否小于右值
  • <=:用来检查左值是否小于或等于右值

注意:

  • 当对非数值进行关系运算时,它会先将前转换为数值然后再比较
  • 当关系运算符的两端是两个字符串,它不会将字符串转换为数值,
    • 而是逐位的比较字符的Unicode编码
    • 利用这个特点可以对字符串按照字母排序
  • 注意比较两个字符串格式的数字时一定要进行类型转换
let result = 10 > 5 // true
result = 5 > 5 // false
result = 5 >= 5 // true

result = 5 < "10" // true,自动类型转换
result = "1" > false // true,自动类型转换

result = "a" < "b" // true
result = "z" < "f" // false
result = "abc" < "b" // true

result = "12" < "2" // true
result = +"12" < "2" // false,自动类型转换

// 检查num是否在5和10之间
let num = 6
// result = 5 < num < 10 // 错误的写法!!!
// 对于上面这个式子会先执行 5 < num 得到结果是true
// 然后再比较true < 10,这时候会进行自动类型转换
// 将true转换为1后和10比较,也就是1<10,最终结果得到false
result = num > 5 && num < 10  // true,这个是正确写法

7 相等运算符

7.1 ==

  • 相等运算符,用来比较两个值是否相等
  • 使用相等运算符比较两个不同类型的值时,
    • 它会将其转换为相同的类型(通常转换为数值)然后再比较类型转换后值相同也会返回true
  • null和undefined进行相等比较时会返回true
  • NaN不和任何值相等,包括它自身
let result = 1 == 1 // true
result = 1 == 2 // false
result = 1 == '1' // true
result = true == "1" // true

result = null == undefined // true
result = NaN == NaN // false

7.2 ===

  • 全等运算符,用来比较两个值是否全等
  • 它不会进行自动的类型转换,如果两个值的类型不同直接返回false
  • null和undefined进行全等比较时会返回false
result = 1 === "1" // false
result = null === undefined // false

7.3 !=

  • 不等,用来检查两个值是否不相等
  • 会自动的进行类型转换

7.4 !==

  • 不全等,比较两个值是否不全等
  • 不和自动的类型转换
result = 1 != 1 // false
result = 1 != "1" // false
result = 1 !== "1" // true

8 条件运算符(三元表达式)

写法:条件表达式 ? 表达式1 : 表达式2

  • 执行顺序:条件运算符在执行时,会先对条件表达式进行求值判断,
    • 如果结果为true,则执行表达式1
    • 如果结果为false,则执行表达式2
let a = 100
let b = 200
let max = a > b ? a : b // 200

9 运算符的优先级

和数学一样,JS中的运算符也有优先级,比如先乘除和加减。

可以通过优先级的表格来查询运算符的优先级

  • 在表格中位置越靠上的优先级越高,优先级越高越先执行,优先级一样自左向右执行
  • 优先级我们不需要记忆,甚至表格都不需要看
  • 因为()拥有最高的优先级,使用运算符时,如果遇到拿不准的,可以直接通过()来改变优先级即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/50837.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

专栏 | 解析“全闪对象存储”(三)

在上一节“对象存储的使用场景”中&#xff0c;我们介绍了对象存储在大规模非结构化数据存储、云存储、大数据和数据湖等场景的使用。 那么&#xff0c;优秀对象存储产品是怎样的&#xff1f;如何设计、实现&#xff1f;本节&#xff0c;我们来分析、探讨这些问题。 通过前两…

推荐系统-召回-概述(四):热门推荐

无论个性化多么重要&#xff0c;热门推荐都是推荐系统里不可或缺的一部分。其一、根据“二八定律”&#xff0c;电商系统中的20%的头部内容被80%的流量消费&#xff0c;因此&#xff0c;在产品早期&#xff0c;仅仅推荐热门内容&#xff0c;实施成本不高&#xff0c;且效果也会…

【Android App】利用腾讯地图获取地点信息和规划导航线路讲解及实战(附源码和演示视频 超详细必看)

需要源码请点赞关注收藏后评论区留言~~~ 一、获取地点信息 至于如何集成腾讯地图和调用腾讯地图接口此处不再赘述&#xff0c;有需要请参见我之前的博客 腾讯地图用来搜索POI地点的工具是TencentSearch&#xff0c;通过它查询POI主要分为下列四个步骤&#xff1a; &#xff0…

MySQL---基于CentOS7

在Linux上安装MySQL 本章简单阐述一下&#xff0c;mysq基于centos7的安装步骤 在VM上模拟安装 MySQL版本为&#xff1a;8.0.30 文章目录在Linux上安装MySQL1. MySQL下载卸载MariaDB查看版本卸载2.安装解压mysql压缩包重命名创建用户和组修改权限编写配置文件配置PATH变量初始化…

基于PHP+MySQL集训队员管理系统的设计与实现

ACM是国际大学生程序设计竞赛,这是一个展示大学生风采的平台,但是在ACM报名的时候可能会有很多的队员,管理员对队员的管理是一个繁琐且复杂的过程,通常的管理模式是手工进行管理,这在很大程度上有一些弊端,为了改成这一现状需要一个对应的管理系统出现。 本设计尝试用PHP开发一…

机组运行约束对机组节点边际电价的影响研究(Matlab代码实现)

目录 1 概述 2 日前市场单时段节点电价出清优化模型 2.1 目标函数 2.2 约束条件 3 算例及运行结果 4 结论 5 参考文献 6 Matlab代码及详细文章讲解 1 概述 基于节点边际电价(locational marginal priLMP)的现货巾划lm易能量价值&#xff0c;节点电本确定节点电价&a…

高校部署房产管理系统可实现那些目标?

随着技术的不断进步和升级&#xff0c;以及高校房屋建筑物数量的不断扩充&#xff0c;建立房屋资产管理信息系统进行信息化、数字化、图形化房屋资产管理已经是势在必行。数图互通自主研发FMCenterV5.0平台&#xff0c;是针对中国高校房产的管理特点和管理要求&#xff0c;研发…

易基因科技|单细胞甲基化测序低至2500元/样

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。12月活动来袭&#xff5e; 限时特惠&#xff01;单细胞甲基化测序低至2500元/样&#xff01; 易基因高通量单细胞DNA甲基化测序&#xff1a;单细胞DNA甲基化组学研究很大程度上受制于建库…

P3 创建Tensor

前言&#xff1a; 这里面主要讲解一下创建一个Tensor 对象的不同方法 目录&#xff1a; numpy 创建 list 创建 empty 创建 set_default_type 随机数创建 torch.full arange&linespace ones|zeros|eye r…

Springboot毕业设计毕设作品,微信网上图书商城购物小程序设计与实现

功能清单 【后台管理员功能】 会员列表&#xff1a;查看所有注册会员信息&#xff0c;支持删除 录入资讯&#xff1a;录入资讯标题、内容等信息 管理资讯&#xff1a;查看已录入资讯列表&#xff0c;支持删除和修改 广告设置&#xff1a;上传图片和设置小程序首页轮播图广告地…

【Pandas数据处理100例】(八十九):Pandas使用date_range()生成date日期

前言 大家好,我是阿光。 本专栏整理了《Pandas数据分析处理》,内包含了各种常见的数据处理,以及Pandas内置函数的使用方法,帮助我们快速便捷的处理表格数据。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10语言环境:python3.7编译器:PyCharmPandas版本:1.3.5N…

Oracle 11g RAC 原地升级到 19c

作者 | JiekeXu来源 |公众号 JiekeXu DBA之路&#xff08;ID: JiekeXu_IT&#xff09;如需转载请联系授权 | (个人微信 ID&#xff1a;JiekeXu_DBA)大家好&#xff0c;我是 JiekeXu,很高兴又和大家见面了,今天和大家一起来看看 Oracle 11g RAC 原地升级到 19c&#xff0c;欢迎点…

Android kotlin在实战过程问题总结与开发技巧详解

1、介绍 目前Android开发中&#xff0c;分为两派&#xff0c;Java派和Kotlin派&#xff0c;Java是宇宙开发第一语言&#xff0c;地位一直处于领先位置&#xff0c;但是Java会出现一个空指针的情况&#xff0c;所以kotlin的出现&#xff0c;填补了java的一些缺陷&#xff0c;但是…

擎创技术流 | ClickHouse实用工具—ckman教程(5)

哈喽~友友们&#xff0c;又到了一期一会的技术分享时刻了&#xff0c;本期继续以视频形式与大家分享&#xff0c;话不多说&#xff0c;我们直接上干货&#xff0c;建议收藏分享马住 戳↓↓↓链接&#xff0c;一键回看前期内容&#xff1a; 擎创技术流 | ClickHouse实用工具—c…

独立IP和共享IP的区别以及各自的优势有哪些

如果您在网上做生意&#xff0c;您可能对什么是IP地址有一个大概的了解。然而&#xff0c;您可能不知道的是&#xff0c;IP 地址分为两种类型。下面将介绍在选择独立服务器时最常遇到的两种IP的区别和联系&#xff1a; 简而言之&#xff0c;独立IP地址是标识您的网站的唯一数字…

基于云原生技术的融合通信是如何实现的?

孵化于云端&#xff0c;云通信成为时代的主流。01 云通信的「前世今生」 通信与每个人息息相关。 生态合作和渠道的规模上量&#xff0c;给传统通信模式带来巨大的挑战&#xff0c;由此衍生出云通信。 云通信&#xff0c;即基于云计算平台&#xff0c;将传统通信能力进行云化&a…

常用测试用例模板大全

一些常用模块的测试用例 1、登录  2、添加  3、查询  4、删除 1、登录 ①用户名和密码都符合要求&#xff08;格式上的要求&#xff09; ②用户名和密码都不符合要求&#xff08;格式上的要求&#xff09; ③用户名符合要求&#xff0c;密码不符合要求&#xff08;格…

LeetCode HOT 100 —— 75 .颜色分类

题目 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sort 函数的情况下…

【ESP32-Face】ESP32人脸检测MTMN 模型以及face_detect()函数详解

ESP32-Face 人脸检测MTMN模型以及 face_detect 函数详解1. MTMN 模型2. 模型网络3. API 函数接口介绍4. 模式选择5. 参数配置1. MTMN 模型 MTMN 是一个人脸检测的轻量级模型&#xff0c;专门应用于嵌入式设备。它是由 MTCCN 和 MobileNets 结合而成。 2. 模型网络 MTMN由三个…

搬砖日记:关于sync用不了的问题

自己封装了个输入框的组件&#xff0c;想要实现的输入框的值的修改可以实时修改到父组件的值 印象中看到过人家用.sync修饰符去实现这个功能&#xff0c;大抵是 //父组件 <searchInput :value.sync"value"></searchInput> //子组件 <input v-model&qu…