前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)

news2024/9/28 23:22:42

一、算术运算符

算术运算符即:加(+)减(-)乘(*)除(/)取余(%)加加(++)减减(–)
算术运算符里比较特殊的是+,它即可以是字符串连接,也可以是加法运算。大致规则是:

  • 如果两边都是数字,则就是普通的数学计算
  • 如果有一边是字符串,则另一边也转成字符串,变成字符串的拼接
  • 如果没有字符串,则调用Number方法,转成数字,再进行相加
  • 如果有一边是对象,则对象调用toString得到字符串表示,再进行计算

例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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var a = 5;
    var b = '10';
    console.log(a + b); // '510'

    var a = 5;
    var b = 10;
    console.log(a + '和' + b + '的和是' + a + b); // 5和10的和是510
    console.log(true + false); // 1
    console.log(true + 'false'); // truefalse
    console.log(true + ''); // true
    console.log(true + undefined); // NaN
    console.log(true + [true]); // truetrue
  </script>
</body>

</html>

在这里插入图片描述

例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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    // ++ -- ( 自增,自减 )
    var a = 2;
    a++; // a = a + 1;
    console.log(a); // 3

    var b = 2;
    ++b; // b = b + 1;
    console.log(b); // 3

    var c = 2;
    var f = 2;
    d = c++; // 先赋值后自增 1
    e = ++f; // 先自增 1 后赋值
    console.log(d); // 2
    console.log(e); // 3
    console.log(c); // 3
    console.log(f); // 3
  </script>
</body>

</html>

在这里插入图片描述
在算术运算符中比较特殊的就是++和–,前者表示自增,后者表示自减,在使用时,有两种情况,分别是++(–)在前和++(–)在后,当++(–)在前时,即:++a(–a),则表示变量a自增(自减)后赋值。++(–)在后时,即:a++(a–),则表示先赋值后自增(自减)。

例3:

var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2; // 22
var num4 = num1 + num2; // 21

其它减乘除取余,都是调用Number转成数字,再进行计算。

例4:

var a = 5 - true; // 4
var b = NaN - 1; // NaN
var c = 5 - 3; // 2
var d = 5 - ""; // 5
var e = 5 - "2"; // 3
var f = 5 - null; // 5

二、赋值运算符

赋值运算符即进行赋值(=)加等于(+=)减等于(-=)乘等于(*=)除等于(/=)等运算。赋值运算符将一个数值赋给一个变量,即 a = 10;则 10 赋值给 a,那么 a 的值为 10。

例1:

var m = 10;
m = m + 2; // 等价 m += 2;
m += 10;   // 往m身上在原来的基础上加东西 m = m+10
console.log(m); // 22
var n = 10;
n *= 2;  //n = n * 2
console.log(n);

三、比较运算符

比较运算符判断两个变量的大小

是否相等(==)
大于(>)
小于(<)
大于等于(>=)
小于等于(<=)
不等于(!=)
绝对等于(===)
绝对不等于(!==

例1:

// 字符串比较时是一位一位进行比较的,而且比较的是ASCII编码
// 字符的编码  0-48  A-65  a-97
console.log("1000"<'2'); // true 字符串的比较
console.log("1000"<2); // false 数字的比较 

// 比较运算符 > >= < <= == != === !==
// 两个等号的比较,只要值是一样即可,会发生类型的转换(一般调Number转成数字
再比较)
console.log("10"== 10); // true 
console.log("10"!= 10); // false

// 三个等号的比较,要值和类型都一样
console.log("10"=== 10); // false
console.log("10"!== 10); //true

console.log(undefined == null); // true,它俩相等,是规定的。它们并不发生
类型转换。即nullundefined同别值进行==的比较时,不会发生类型转换
console.log(undefined === null); // false,类型不一样

四、逻辑运算符

逻辑运算符是与 &&,或 ||, 非 !,&& ||用于连接两个或多个条件。
&& 是都为真才为真;
|| 有一个为真就为真;
! 为取反。

例1:

var l = 10;
if(l > 0 && l < 100){alert(“成立”);} // 真 两个为真才为真
if(l < 0 || l > 100){alert(“成立”);} // 假 一真为真
// ! 取反
if(!true){
alert(“条件成立”);
}

五、三目运算符

三目运算符是一个简单的条件的判断,里面只能执行一条语句,不能出现分号。
语法:
条件 ? 条件成立执行的代码 : 条件不成立执行的代码;

例1:

// 三目运算符
// 条件 ? 语句一 : 语句二 
// 如果条件成立,执行 ? 后面语句。不成立执行 : 后面的语句
var s = 10;
s > 0 ? n = 100 :n = 0;
console.log(n); // 100

六、运算符优先级和结合性

JavaScript 运算符优先级,是描述在计算机计算表达式时执行运算的先后顺序。 先执行具有较高优先级的运算,然后执行较低优先级的运算。 例如,我们常说的先执行乘除运算,再执行加减运算。

console.log(3 + 4 * 5); // 3 + 20
console.log(3 > 2 && 2 > 1); // true
console.log(10>5>4); //false

在这里插入图片描述
在这里插入图片描述

圆括号处理Javascript运算:圆括号用于改变由运算符优先级确定的计算顺序。 这就是说,先计算完圆括号内的表达式,然后再将它的值用于表达式的其余部分。

var result1 = 10 * 5 + 3; // 53
var result2 = 10 * (5 + 3); // 80

七、数据类型的隐式转换

数据在进行 ±*/% 等操作的时候会自动转换数据类型进行操作。

例1:

// 加 +
console.log(10 + 100); // 110
console.log(10 + 'string'); // 10string  当加号有一边是字符串,另一边也转成字符串,变成字符串的拼接
console.log(19 + 10 + 'age' + 18 + 10) //29age1810
console.log(10 + '100'); //10100
console.log(10 + true); // 11 boolean 类型在计算是转成 number
console.log(true + false); // 1 1 + 0 = 1
console.log('10' + true); // 10true
console.log('' + 100); // '100'
console.log(10 + null); // 10 null在计算是转成 number 0
console.log(10 + undefined); // NaN,undefined调Number方法转成NaN
// 减 -
console.log(100 - 10); // 90
console.log(100 - 't'); // NaN
console.log(100 - ''); // 100 空字符串转成number 0
console.log(100 - true); // 99 boolean 类型在计算是转成 number 1
console.log(100 - '80'); // 20 '80'转成 number 80
console.log(100 - null); // 100
console.log(100 - undefined); // NaN
// 乘 *
console.log(100 * 'a'); // NaN
console.log(100 * ''); // 0 ''转成 number 0
console.log(100 * '100');// 10000
console.log(100 * null); // 0
console.log(100 * undefined);// NaN
// 除 /
console.log(100 / 'a'); // NaN
console.log(100 / ''); // Infinity
console.log(100 / '70'); // 10/7
console.log(100 * null); // 0
console.log(100 * undefined); // NaN
// 取余 %
console.log(100 % 'a'); // NaN
console.log(100 % ''); // NaN,''转成0,100%0为 NaN
console.log(100 % '70'); // 30
console.log(100 % null); // NaN
console.log(100 % undefined); // NaN
// ++
var n = '10';
n++;
console.log(n); // 11 n 转成 number
// 取反
console.log(!true); // false
console.log(!10); // false
console.log(!'web'); // false

在数据类型之间进行算术运算时,除了加法运算,其他(-*/%)都将转为number类型。加法运算在遇到有字符串时,“+”变为连接符号,将字符串的前后拼接到一起。转换为string类型的值,如果两边都没有字符串,则都转成数字,变成数字的加法运算。

在这里插入图片描述

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

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

相关文章

CleanMyMacX软件有哪些优缺点?值不值得下载

CleanMyMac X 2023是一款可靠且功能强大的Mac清洁工具工具&#xff0c;他可以让你随时检查Mac电脑的健康情况&#xff0c;并删除电脑中的垃圾文件&#xff0c;来腾出存储空间&#xff0c;保持Mac系统的整洁。至问世以来&#xff0c;CleanMyMac 系统倍受国内外用户推崇&#xff…

【4】SCI易中期刊推荐——神经科学研究(中科院4区)

🚀🚀🚀NEW!!!SCI易中期刊推荐栏目来啦 ~ 📚🍀 SCI即《科学引文索引》(Science Citation Index, SCI),是1961年由美国科学信息研究所(Institute for Scientific Information, ISI)创办的文献检索工具,创始人是美国著名情报专家尤金加菲尔德(Eugene Garfield…

C#使用迷宫地图来模拟新冠疫情的传播速度(一)

国家开始发布疫情放开政策&#xff0c;本人于2022-12-21开始感染并发高烧。 最近才康复。有感于此 我们用初始感染源来影响九宫网格来查看新冠的传播速度 小游戏规则如下&#xff1a; 一个感染源 可以传播附近相邻的8个网格【类似于扫雷】&#xff0c;假如每个感染源一天只…

Vue--》setup、ref、reactive函数使用讲解

目录 setup ref函数 reactive函数 Vue3中的响应式原理 setup Vue3中的一个新的配置项&#xff0c;值为一个函数。组件中所用到的数据、方法等等&#xff0c;均要配置在setup中。setup函数的两种返回值&#xff0c;如下&#xff1a; 若返回一个对象&#xff0c;则对象中的…

使用Docker快速搭建Hfish蜜罐

HFish简介 HFish是一款社区型免费蜜罐&#xff0c;侧重企业安全场景&#xff0c;从内网失陷检测、外网威胁感知、威胁情报生产三个场景出发&#xff0c;为用户提供可独立操作且实用的功能&#xff0c;通过安全、敏捷、可靠的中低交互蜜罐增加用户在失陷感知和威胁情报领域的能…

源码讲解ThreadLocal父子线程通信问题(图+文+源码)

1 缘起 在复习ThreadLocal相关应用的知识&#xff0c; 有一个老生常谈的问题&#xff1a;父子线程通信&#xff0c; 起初&#xff0c;对于父子线程通信&#xff0c;仅了解ThreadLocal无法通过子线程获取线程数据&#xff0c; 并不了解为什么会这样&#xff1f;以及为什么Inher…

15.4 宏任务和微任务

宏任务和微任务 start 如果彻底理解了事件循环&#xff0c;其实大多数 JS 执行的逻辑都能理解了但是在 ES6 中引入了 Promise, 就引出了两个新概念&#xff0c;宏任务和微任务。 1.宏任务和微任务 1.1 名词 宏任务&#xff1a;macrotask 微任务&#xff1a;microtask 在 E…

异构操作系统的“融合计算”

这些年&#xff0c;由随着应用场景日益丰富和多样化&#xff0c;计算工作越来越复杂&#xff0c;传统的计算方式&#xff08;单机计算/分布式计算&#xff09;已经不能满足&#xff0c;需要一种新的更强大的计算模式来解决这些问题&#xff0c;这是融合计算产生的背景。 …

117.(leaflet之家)leaflet空间判断-点与geojson面图层的空间关系(turf实现)

听老人家说:多看美女会长寿 地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: 下面献上完整代码,代码重要位置会做相应解释 <!DOCTYPE html> <html>

Linux系统下的服务管理

文章目录Linux系统下的服务管理1.基本介绍2.service管理指令3.chkconfig指令4.systemctl管理指今4.1.基本语法4.2.systemctl设置服务的自启动状态4.3.防火墙实验案例4.4.防火墙Linux系统下的服务管理 1.基本介绍 服务(service) 本质就是进程&#xff0c;但是是运行在后台的&a…

软考高项(信息系统项目管理师)经验分享

文章目录前言考试过程第一步&#xff1a;日常刷选择题第二步&#xff1a;考前一个月之前刷完精讲课第三步&#xff1a;计算题统一学习第四步&#xff1a;论文早准备第五步&#xff1a;反复刷冲刺视频第六步&#xff1a;刷近几年真题第七步&#xff1a;准备几份考试当天复习资料…

vue组件之间的数据传递和组件的生命周期

一、组件之间的通信1、组件之间的关系&#xff1a;父子关系、兄弟关系、跨级关系2、父子组件之间的通信&#xff08;数据传递&#xff09;&#xff1a;&#xff08;1&#xff09;父组件 ——-> 子组件&#xff1a;使用propsA、第一步&#xff1a;在父组件中使用子组件时&…

【K哥爬虫普法】大数据风控第一案:从魔蝎科技案件判决,看爬虫技术刑事边界

我国目前并未出台专门针对网络爬虫技术的法律规范&#xff0c;但在司法实践中&#xff0c;相关判决已屡见不鲜&#xff0c;K 哥特设了“K哥爬虫普法”专栏&#xff0c;本栏目通过对真实案例的分析&#xff0c;旨在提高广大爬虫工程师的法律意识&#xff0c;知晓如何合法合规利用…

线段树 - 从入门到入土

普通线段树 线段树是什么 我们要学习线段树&#xff0c;首先要了解线段树的结构长什么样。 线段树是一颗二叉树&#xff0c;树上的节点储存数据&#xff08;可以是值、字符串、数组、多个值&#xff09;。 作用 一般来说&#xff0c;线段树是用来维护一个数组的。 数据储…

手写RPC框架02-路由模块设计与实现

源码地址&#xff1a;https://github.com/lhj502819/IRpc/tree/v3 系列文章&#xff1a; 注册中心模块实现路由模块实现序列化模块实现过滤器模块实现 为什么需要路由模块&#xff1f; 在当今互联网日益发展的情况下&#xff0c;我们一个服务一般都会部署多个&#xff0c;一方…

Python绘制表白代码,又是一个表白神器

前言 嗨呀&#xff0c;又是我&#xff0c;又给你们带来了表白的代码 之前发了那些 照片里面加文字的…还有烟花…还有跳动爱心…emm你们也可以去看看哦 今天带来的这个&#xff0c;也是很不错哦 只不过它出来的有些慢&#xff0c;我这里先给你们看看这个效果图吧 效果展示…

大数据基础平台搭建-(三)Hadoop集群HA+Zookeeper搭建

大数据基础平台搭建-&#xff08;三&#xff09;Hadoop集群HAZookeeper搭建 大数据平台系列文章&#xff1a; 1、大数据基础平台搭建-&#xff08;一&#xff09;基础环境准备 2、大数据基础平台搭建-&#xff08;二&#xff09;Hadoop集群搭建 3、大数据基础平台搭建-&#xf…

如何让小型云台机械手实现按颜色分拣物品?

1. 功能说明 在小型云台机械手附近设置一个工作台&#xff0c;并安装一个TCS3200颜色识别传感器。将红色、蓝色工件分别放置在传感器上&#xff0c;如果检测的物料的颜色为红色&#xff0c;机械臂将物体放在机械臂的左侧&#xff0c;如果检测的物料的颜色为蓝色&#xff0c;机械…

数据结构与算法-希尔排序、归并排序

目录​​​​​​​ 希尔排序 1.算法描述 2.算法的实现 归并排序 4.1算法描述 2.算法实现 希尔排序 1.算法描述 1959年shell发明&#xff0c;第一批突破O&#xff08;n2&#xff09;时间复杂度的排序算法&#xff0c;是简单插入排序的改进版。它与插入之处在于&#xff0…

Android 深入系统完全讲解(二)

操作系统 操作系统是一套软件&#xff0c;它的任务就是为上层开发的用户&#xff0c;提供一个更方便的开发环境&#xff0c;同时 让硬件连接到系统中&#xff0c;能够非常方便&#xff0c;从而提高开发速度&#xff0c;以及稳定可靠。 操作系统就是这么存在的。 我们理解它&am…