《七》JavaScript 中的运算符和表达式

2023-10-31

请添加图片描述
运算符的综合运算顺序是:非运算符 > 算术运算符 > 比较运算符 > 逻辑运算符。

3 > 2 && 8 > 3 + 4 // true。首先计算 3 + 4 等于 7;然后比较 3 > 2 为 true;再比较 8 > 7 为 true;最后 true && true;结果为 true

!13 < 5 - 3 // true。首先 13 为 true,!13 就为 false;然后计算 5 -3 等于 2;最后比较 false < 2,false 隐式转换为 0,0 < 2 为 true

算数运算符:

+、减-、乘*、除/ 、取余%

加号 + 有加法和连字符两种作用。
加法运算时,如果有一个操作数是字符串,则将另外的操作数转换为字符串,然后再将两个字符串拼接起来。

var num1 = 10;
var num2 = 5;
var result1= ”num is” + num1 + num2; // num is 105
var result2 = ”num is” + (num1 + num2); // num is 15

被除数 ÷ 除数 = 商
除法运算时,正数除以 0,返回 infinity;负数除以 0,返回 -infinity;0 除以 0,返回 NaN。

console.log(1 + 5 % 3); // 3
console.log((1 + 5) % 3); // 0

如果参与数学运算的某操作数不是数字类型,那么 JavaScript 会自动将此操作数转换为数字类型(除了加法运算符中有操作数为字符串的情况),隐式类型转换的本质是内部调用了 Number()。

console.log(3 * '4'); // 12
console.log(true + true); // 2
console.log(3 * '2天'); // NaN
算术运算符的运算顺序:

默认情况下,乘法、除法和取余的优先级要高于加法和减法,必要时可以使用圆括号来改变运算的顺序。

比较运算符/关系运算符:

比较运算符的表达式的结果为布尔值。

  1. 小与< 、大于> 、小与等于<= 、大于等于>=

    当比较运算符的操作数使用了非数值时,要进行数据转换。如果一个操作数是数值,则将另一个操作数转换为数值。如果两个操作数都是字符串,则比较两个字符串对应的字符编码值。

    JS 中没有连比。
    例如:想要变量 num 的值为 100, 想要判断 num 是否是介于 3 到 15 之间。

    // 错误
    console.log(3 <= num <= 15); // true。因为先判断 3 <= num,结果为 true;再判断 true <= 15,true 被转换为 1,所以结果为 true
    
    // 正确
    console.log(num >= 3 && num <= 15)
    
  2. ==:相等,只根据表面值进行判断,不判断数据类型,会进行隐式类型转换。
    ===:全等,不仅判断表面值,还要判断数据类型。
    !=:不相等,只根据表面值进行判断,不判断数据类型,会进行隐式类型转换。
    !==:不全等,不仅判断表面值,还要判断数据类型。

    console.log(0 == false); // true
    console.log(0 === false); // false
    
    console.log(undefined == null); // true
    console.log(undefined === null); // false
    

逻辑运算符:

  1. !:逻辑非。逻辑非运算符可以应用于任何类型的操作数,只需要一个操作数,会首先将它的操作数转换为布尔值,然后再对其求反。

    逻辑非运算符的表达式的结果总是一个布尔值。

    同时使用两个逻辑非操作符,实际上就会模拟 Boolean() 转型函数的行为。

    console.log(!''); // true
    
  2. &&:逻辑与。逻辑与运算符可以应用于任何类型的操作数,只有当两个操作数的值都为 true 的时候,结果才为 true(都真才真)。

    如果第一个操作数为 true,那么逻辑与运算符的表达式的结果为第二个操作数;如果第一个操作数为 false,那么逻辑与运算符的表达式的结果为第一个操作数。

    逻辑与操作属于短路计算,如果第一个操作数是 false,则无论第二个操作数是什么值,都不会再对其进行求值。

    console.log('哈哈' && 0); // 0。’哈哈‘ 为真,返回第二个操作数
    console.log(0 && '哈哈'); // 0。0 为假,直接返回第一个操作数
    
    var a = ture;
    var result = (a && b); // 发生错误,b 未声明
    console.log(result); // 不会执行
    
    var a = false;
    var result = (a && b); // 不会发生错误
    console.log(result); // 执行
    
  3. ||:逻辑或。逻辑或运算符可以应用于任何类型的操作数,只要两个操作数有一个是 true,则结果为 true(有真就真)。

    如果第一个操作数为 true,那么逻辑或运算符的表达式的结果为第一个操作数;如果第一个操作数为 false,那么逻辑或运算符的表达式的结果为第二个操作数。

    逻辑或运算符属于短路计算,如果第一个操作数是 true,则无论第二个操作数是什么值,都不会再对其进行求值。

逻辑运算符的运算顺序:

逻辑运算符的优先级为:逻辑非的优先级大于逻辑与,逻辑与的优先级大于逻辑或(非 > 与 > 或)。

优先级高不是先执行的意思,可以理解为给它加个括号,使其成为一个整体。执行顺序还是从左到右。

function a(){
    console.log("a");
    return true;
 }
function b(){
    console.log("b");
    return false;
 }
 function c(){
     console.log("c");
     return true;
 }

a() || b() && c(); // a。相当于 a() || (b() && c()),a() 返回 true 为真,后面的表达式就不再执行了

赋值运算符:

赋值运算符的表达式的结果为等号后面的值。

console.log(num = 4); // 4

这就意味着,可以连续使用赋值运算符。

var num, num1;
num = num1 = 15; // 会从右到左进行赋值。先将 15 赋值给 num1;numi = 15 这个表达式的结果也为 15;载将这个结果赋值给 num
console.log(num); // 15
console.log(num1); // 15
  1. 简单赋值运算符:将等号右边的数值,赋值给等号左边的变量。
    var userName = ”tom”;
    
  2. 复合赋值运算符:
    a += b; // 就相当于 a = a + b;
    a -= b; // 就相当于 a = a - b;
    a *= b; // 就相当于 a = a * b; 
    a /= b; // 就相当于 a = a / b;
    a %= b; // 就相当于 a = a % b;
    
  3. 自增运算符 ++ 、自减运算符 --:表示在自身的基础上加 1 或者减 1。分为前置型和后置型。
    前置型:操作符位于要操作的变量之前。前置型先加后用。
    后置型:操作符位于要操作的变量之后。后置型先用后加。
    i = 1;
    j = i++; // 结果为 j = 1,i = 2。因为先用后加,先 i 等于 1 的时候赋值给 j,然后 i = i + 1 = 2
    
    I = 1;
    j = ++i;  // 结果为 j = 2,i = 2。因为先加后用,先 i = i + 1 = 2,然后将 2 赋值给 j
    
赋值运算符的运算顺序:

自增、自减运算符大于其他的赋值运算符。

三元运算符/三目运算符/条件运算符:

三元运算符的语法:条件表达式 ?表达式1 :表达式2;。如果条件表达式的结果为 true,则执行表达式 1;如果为 false,则执行表达式 2。

三元运算符的用途:根据某个条件是否从成立,在两个表达式或者值中选择其中一个。

var num = 10;
num >= 5 ? console.log('大了') : console.log('小了')

var age = 24
var type = age >= 18 ? '成年人' : '未成年人'

位运算符:

位运算符处理32位数。如果对非数值进行位运算,会先自动使用Number()函数将该值转换为一个数值,然后再进行位运算。在对NaN和Infinity值进行位运算时,会被当成0来处理。

在javascript内部,数值都是以64位浮点数的形式存储的。
当对数值做位运算的时候,是以32位带符号的整数进行运算的。也就是说,如果操作数不是整数,则会自动转成整数后再执行。
后台会发生如下转换过程:64位的数值被转换成32位数值,然后执行位运算,最后再将32位的结果转换回64位的数值。

有符号整数使用32位中的前31位表示整数数值,用第32位表示整数符号,0表示正数,1表示负数,这个表示符号的位叫做符号位。

例如:数值18的二进制表示是00000000000000000000000000010010,或者更简洁的10010。这是5个有效位,这5位本身就决定了实际的值。
在这里插入图片描述
负数同样也以二进制存储,但使用的格式是二进制补码。计算一个数值的二进制补码,要经过下列三个步骤:求这个数值绝对值的二进制码;求二进制反码,即将0替换成1,1替换成0;得到的二进制反码加1。

例如:要得到-18的二进制表示,首先要得到18的二进制表示:0000 0000 0000 0000 0000 0000 0001 0010;接下来,计算二进制反码:1111 1111 1111 1111 1111 1111 1110 1101;最后,在二进制反码上加上1;
在这里插入图片描述

二进制转十进制:从右向左依次是第0.1.2…位,第n位的数值(0或1)乘以2的n次方得到的数值相加就是结果。

位运算符直接处理每一个比特位,所以是非常底层的运算。
优点:运算速度极快。
缺点:运算很不直观,许多场合不能使用,否则会使代码难以理解和查错。

  1. 按位非~:返回数值的反码,即将0替换成1,1替换成0。按位非的本质是操作数的负值减1。

    var num1=25;//00000000000000000000000000011001
    var num2=~num1;//11111111111111111111111111100110
    alert(num2);//-26
    
  2. 按位与&:只有两个操作数的对应位都是1,该位才是1,否则该位是0。
    在这里插入图片描述

  3. 按位或|:只要两个操作数的对应位有一个是1,该位就是1,只有两个操作数的对应位都是0 ,该位才是0。
    在这里插入图片描述

  4. 按位异或^:只有两个操作数的对应位只有一个为1时,该位才为1,都为0或都为1时,该位为0。
    在这里插入图片描述

  5. 按位左移a<<b:把a的所有位向左移动b所指定的位数,用0来填充右边空出的位。左移不会影响操作数的符号位。
    在这里插入图片描述
    在这里插入图片描述

  6. 按位右移a>>b:把a的所有位向右移动b指定的位数,从右边移出去的位被丢弃,左边空出的位补符号位。

    如果要移走的值为负数,每一次右移左边的空位补1;如果要移走的值为正数,每一次右移左边的空位补0,这叫做符号位扩展,或者保留符号位。

    在这里插入图片描述

  7. 按位无符号右移a>>>b:把a的所有位向右移b指定的位数,向右移出的位被丢弃,左边空出的位用零来填充。
    在这里插入图片描述

逗号运算符:

多用于声明多个变量;还可以用于赋值,在用于赋值时,总会返回表达式的最后一项。

var num1=1,num2=2,num3=3;
var num=(1,2,3); // num=3
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

《七》JavaScript 中的运算符和表达式 的相关文章

  • 如果字符串不匹配,.split() 返回什么?

    在此 JavaScript 代码中 如果变量data没有那个角色 那么 split 会返回什么呢 x data split 它会是原始字符串的数组吗 是的 根据ECMA262 15 5 4 14 String prototype split
  • 如何使用expressjs发送多个文件?

    我希望能够发送许多文件 如果可能的话 发送整个目录 以便我可以在从 html 文件调用的其他 js 文件中访问它 const app require express const http require http Server app co
  • chai-http/superagent : 设置多部分表单字段的 Content-Type

    在集成测试中上传文件如下 chai request server instance post profile photo 0 set Access Token accessToken set API Key testConfig apiKe
  • 使用通过 (document.getElementById('ID')) 添加到数组的元素

    为什么这段代码不起作用 var all obj element new Array all obj element 0 document getElementById Img3 alert all obj element 0 style w
  • 传单圆圈绘制/编辑问题

    我第一次制作传单 并面临绘制圆圈和编辑 更改圆圈位置 的问题 我面临的问题是 编辑 移动 圆从一个位置到另一位置会改变其半径 Note 请尝试在给定的小提琴中在地图顶部创建圆圈 然后通过单击编辑按钮将其移动到底部 如果我在地图的顶部创建圆圈
  • JSSOR - 无法读取未定义的类型属性“currentStyle”

    我正在尝试将 Jssor 滑块实现到我的页面中 但我不断在标题中出现该错误 我的内容是通过 Javascript 动态创建的 如下所示 var slide app createHTML div id inventorySlides null
  • 确定用户是否在shadow dom之外单击

    我正在尝试实现一个下拉菜单 您可以单击外部将其关闭 下拉列表是自定义日期输入的一部分 并且封装在输入的影子 DOM 内 我想写一些类似的东西 window addEventListener mousedown function evt if
  • Express.js - 监听关闭

    我有一个使用 Express 的 Node js 应用程序 在该应用程序中 我有一个如下所示的块 const app require app const port process env PORT 8080 const server app
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • 如何使用 Eclipse 作为 Javascript IDE?

    我从官方下载页面下载了 eclipse Javascript IDE 但是 当我启动应用程序时 它显示 必须提供 Java 运行时环境或 Java 开发工具包才能运行 eclipse 我已经有一个运行良好的 eclipse 的 java I
  • 有效地获取下拉列表中的选定选项(XHTML Select 元素)

    背景 使用 XHTML Select 元素的下拉列表中有大量选项 数十个 我需要使用 JavaScript 检索所选选项 Problem 目前我正在使用 jQuery selectedCSS 选择器并且它按预期工作 但这种方法效率不高 因为
  • Firefox CSS 旋转与 Chrome 旋转不同

    我想制作一个 3D 矩形 平行六面体 用户可以用箭头移动它 它在 Chrome 中工作得很好 但在 Firefox 中 一些转换 实际上很多 与 Chrome 不同 看着this https jsfiddle net 7273yur9 2
  • 可点击的进度条

    我正在使用 Angular 并在 JavaScript 的帮助下开发了一个可点击的进度条 这是我能做到的最好的 有没有办法将滑块放置在进度条内但不干扰进度可视化 堆栈闪电战 https stackblitz com edit angular
  • 如何比较两个对象数组并更改两个数组中找到的对象的值?

    假设我有两个对象数组 let array1 id 1 name snow id 4 name jo id 8 name bran id 12 name gondo id 13 name peter
  • JQuery 验证不起作用

    我有一种表单 其中一个输入类型的值为 名字 但这可以在 onfocus 函数上更改我想验证此输入字段 如果它为空白或 名字 我有两个 jQuery 文件jquery 1 4 2 min js jquery validate pack js
  • Nuxt + Vuex - 如何将 Vuex 模块分解为单独的文件?

    在 Nuxt 文档中 here https nuxtjs org guide vuex store module files 它说 您可以选择将模块文件分解为单独的文件 state js actions js mutations js an
  • Chrome:window.print() 打印对话框仅在页面重新加载后打开 (javascript)

    我面临着一个非常奇怪的问题 我正在从 javascript 文件调用 window print 这在 Safari IE Firefox 中运行良好 直到两小时前 它在 Chrome 中也运行良好 版本29 0 1547 57 我没有更改我
  • 您最喜欢的 JS/CSS 下拉菜单是什么? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 希望在网站上实现一个 只是好奇其他人都使用过什么以及他们有过什么样的体验 EDIT我也不是一个超级粉丝
  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr
  • 具有值的 TextInput 不会更改值

    在我的react native应用程序中 我有一个API 我从中检索数据 并且我在输入值中设置数据 用户应该能够编辑这些输入并更新 但是当我尝试输入输入时它不会输入任何内容并且值保持原样 这是 TextInput 代码

随机推荐

  • redis 由浅入深之 redis.conf配置文件

    是否以后台进程运行 默认为no 如果需要以后台进程运行则改为yes daemonize no 如果以后台进程运行的话 就需要指定pid 你可以在此自定义redis pid文件的位置 pidfile var run redis pid 接受连
  • 2021-04-09

    C 实现XN 2图灵机模拟 算法分析 代码实现 算法分析 1 首先需要完成数的进制转换 将二进制数转化成十进制数 如何转化呢 这里采用除二取余的方法 这种方法就是不断得到余数 放进数组arr 最后除以颠倒一下就行了 2 转换成拓展二进制编码
  • Leetcode刷题-522最长特殊序列II

    题目描述 给定字符串列表 strs 返回它们中最长的特殊序列 如果最长特殊序列不存在 返回 1 最长特殊序列定义 该序列为某字符串独有的最长子序列 即不能是其他字符串的子序列 s 的子序列可以通过删去字符串 s 中的某些字符实现 来源 力扣
  • 灰色预测原理及实例(附代码)

    灰色预测 引言 古人说 凡事预则立 不预则废 办任何事情之前 必须先调查研究 摸清情况 深思熟虑 有科学的预见 周密的计划 这样才能达到预期的成功 所谓预测 就是人们根据可获得的历史和现实数据 资料 运用一定的科学方法和手段 对人类社会 政
  • CSS文本设置超出2行显示省略号

    需求 如图所示 当居住地址字段太长超过2行时就显示 1 强制一行so easy div class line style 内容部分内容部分内容 div line white space nowrap 强制一行显示 overflow hidd
  • 快速入门

    之前正运动技术与大家分享了 运动控制器的固件升级 ZBasic程序开发 ZPLC程序开发 与触摸屏通讯和输入 输出IO的应用 运动控制器数据与存储的应用 运动控制器ZCAN EtherCAT总线的使用 示波器的应用 多任务运行的特点 运动控
  • 【Linux】echo命令用法详解

    作者 柒号华仔 个人主页 欢迎访问我的主页 个人信条 星光不问赶路人 岁月不负有心人 个人方向 专注于5G领域 同时兼顾其他网络协议 编解码协议 C C linux等 感兴趣的小伙伴可以关注我 一起交流 目录 1 echo命令介绍 2 命令
  • 【Linux】——makefile

    文章目录 1 什么是makefile 2 makefile优势与make命令 3 makefile文件内容 3 1makefile文件的基础写法 3 2 makefile文件的优化 1 什么是makefile 在一个大型工程中 工程中的源文
  • 构建Python,Raspberry Pi和PostgreSQL数据服务器

    视频教程 PostgreSQL初学者 学习Raspberry Pi Linux初学者指南 在Raspberry Pi安装和设置PostgreSQL 前提 下载Raspbian 格式化SD卡 使用Disk Utility在macOS中格式化S
  • 自制番茄钟脚本

    Shell脚本 bin bash i 0 if 1 then t 25 60 else t 5 60 fi while i lt t do sleep 1 i 1 m t i 60 s t m 60 i echo en m s r done
  • parsing XML document from class path resource [applicationContext.xml]…

    方法 1 可能是缺失了resource文件 项目右键 Build Path Configure Build Path Java Build Path source Add Folder 将Resource添加应用 2 可能缺失了spring
  • SqliLab_Mysql_Injection详解_字符型注入(五)_时间盲注(8~10)

    文章目录 1 SqliLab Mysql Injection详解 字符型注入 五 1 1 SQL注入 时间盲注 1 1 1 原理 1 1 2 常用的函数 2 SqliLab关卡 包含8 9 10 图片占据空间太大 payload具体返回情况
  • [从零学习汇编语言] - 模块化程序设计

    文章目录 前言 回顾 一 模块化程序设计 1 1 子程序 1 2 子程序的参数和返回值 1 3 批量数据的传递 1 4 寄存器的冲突处理 结语 前言 点赞再看 养成习惯 回顾 还记得我们之前讲过的ret指令搭配call指令实现的子程序模板吗
  • SpringCache通过注解实现redis缓存

    1 SpringCache介绍 2 SpringCache常用注解 底层是基于map实现的 缺点 重启后数据就不存在了 在Spring Cache使用方式中将底层实现替换成了redis缓存技术 1 CachePut 参考演示 CachePu
  • Loading自定义指令

    目录 Loading自定义指令 一 介绍 二 自定义指令及使用 1 创建loading组件 2 自定义指令 3 main js中全局注册 4 使用 三 结果演示 Loading自定义指令 相关知识查看官方文档 自定义指令 一 介绍 通过v
  • mysql5.5 导入 mysql5.6 或者 mysql 5.7 的sql文件失败

    今天导入数据库的时候 一直失败 发现是mysql版本的问题 唉 难道不能向下兼容嘛 下面说解决方案 第一步 用nodepad 打开sql文件 第二部 按照下面方式进行全文替换 代表任意数字字符 datetime gt datetime TI
  • 一线大厂:从需求提出到上线流程总结

    在一线大厂 从需求提出到上线 整个流程是怎样的 笔者结合腾讯的工作流和调研了阿里 字节等公司的项目开发流程 发现大厂的工作流大同小异 总结了如下的整体流程图 下面将按照这个流程的每个节点 详细阐述 全文3000多字 阅读大概需要6分钟 目录
  • Struts2的国际化文件配置样式以及中文字体设置

    我来填坑划水来了 这次讲的是我在工程中通过在国际化文件中来设置样式 这样页面调用国际化的话 不用在页面控制字体样式 那国际化文件文件怎么设置字体样式呢 其实很简单就是用HTML实例 虽然我还没找到资料证明是HTML实例 只是按照工程常遇见的
  • Python深度学习实战PyQt5信号与槽的连接

    本文讲解信号与槽的连接机制 详细示范各种类型的信号 槽连接的实现方法 这是图形用户界面的核心内容 还将介绍面向对象的程序设计 这是图形用户界面的基本思想 目录 1 信号与槽 Signals and slots 信号与槽机制是 PyQt 的核
  • 《七》JavaScript 中的运算符和表达式

    运算符的综合运算顺序是 非运算符 gt 算术运算符 gt 比较运算符 gt 逻辑运算符 3 gt 2 8 gt 3 4 true 首先计算 3 4 等于 7 然后比较 3 gt 2 为 true 再比较 8 gt 7 为 true 最后 t