作者:WangMin

格言:努力做好自己喜欢的每一件事

JavaScript要进行各种各样的运算,就要使用不同的运算符号。

JavaScript 算数运算符

算数运算符用于对数字执行算数运算,分别有以下几种:

运算符 描述
+ 加法
- 减法
* 乘法
/ 除法
% 系数
++ 递加
-- 递减

1、+、-、*、/ 这四种算数运算符跟数学中的运算方式是一致的,如下:

var a=5+2;
var b=6-3;
var c=9*2;
var d=10/2;
console.log(a,b,c,d);//7 3 18 5

对于运算符 + 需要注意的是:

  • 对非Number(字符串除外)的值进行加运算时会先将其转换成Number型在运算,注意任何值和NaN运算都是NaN,案例如下:
var a=1+null;
var b=1+NaN;
var c=true+false;
var d=true+4;
console.log(a,b,c,d);//1 NaN 1 5
  • 对于含有字符串类型的相加运算则看成连字符,将左右两边连接起来组成一个字符串,从左向右连接,案例如下:
var a=5+'你好,明天';
console.log(a);//5你好,明天

注意:任何数据和 “字符串”相加都会连接到一起转换为字符串。

对于运算符 - 需要注意的是:

  • 对非Number的值进行减运算时会先将其转换成Number型在运算,注意任何值和NaN运算都是NaN,案例如下:
var a=5-'2';
var b=1-0;
var c=6-true;
var d=true-false;
var e=1-'ni';
console.log(a,b,c,d,e);//3 1 5 1 NaN

2、"%" 取余运算符,两个数相除,不是数学中的除号是取余,就是取运算的余数,所得的结果为余数。如果余数为0,则两个数能除尽;如果余数不为0,则两个不能整除。案例如下:

var a=6%5;
console.log(a);//1
var b=10%5;
console.log(b);//0

3、"++" 加1运算符、自增1。

1)"++"作前缀(++i)时,例如:

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

输出结果是a=3,b=3,我们可以看出前置++(++i)是先加1在使用

2)作为后缀(i++)时,例如

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

输出结果是a=3,b=2,我们可以看出后置++(i++)是先使用再加1

4、"--"减1运算符,自减1(情况与运算符 "++" 差不多)

1)"--"作前缀(--i)时,例如:

var a=2,b;
b=--a;
console.log(a,b);//1,1

输出结果是a=1,b=1,我们可以看出前置--(--i)是先减1在使用

2)作为后缀(i--)时,例如

var a=2,b;
b=a--;
console.log(a,b);//1,2

输出结果是a=1,b=2,我们可以看出后置--(i--)是先使用再减1

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。分别有以下几种:

运算符 例子 等同于
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
以上为变量表达式的几种简写方式。例如:
var a=2;
a+=2;
console.log(a);//4

根据上面提供的赋值运算符,我们还可以将上面的例子写为如下格式,效果一致,如下:

var a=2;
a=a+2;
console.log(a);//4

我们常用的变量表达式为第一种简写方式,这样的好处是代码执行性能好。其他几种赋值运算符和上面的例子是一个道理。

JavaScript 比较运算符

比较运算符的运算结果是布尔值(true或false)。

运算符 描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符
1、">"、"<"、">="、"<=" 判断两个值之间的大小关系

通过关系运算符可以判断两个值之间的大小关系,如果关系成立则返回true如果关系不成立则返回false。对于非数值比较时会先转换成数字(数值型)在比较。任何值和NaN比较都返回false。特别注意如果两边都是字符串,则是按照字符编码进行比较。案例如下:

var a=5>4;
console.log(a);//true
var b=5<4;
console.log(b);//false
var c=5>true;
console.log(c);//true
var d=5>null;
console.log(d);//true
var e=5>NaN;
console.log(e);//false
var a1=5>=4;
console.log(a1);//true
var b1=5<=4;
console.log(b1);//false
var d1=5>=false;
console.log(d1);//true
var e1=5<=NaN;
console.log(e1);//false
var a2=5>"hello";
console.log(a2);//false
var d2="11"<"5";
console.log(d2);//true

2、== 等于、!= 不等于、=== 全等、!== 不全等

1)"==" 等于:只比较两个变量的值,而不管其数据类型。只要值一样,就返回true,否则返回false。例子如下:

var a=2=="2";
console.log(a);//true
var b=2=="10";
console.log(b);//false
var c=2==true;
console.log(c);//false
var d="2"=="2";
console.log(d);//true
var a1=null==undefined;
console.log(a1);//true

2)!= 不等于 与 == 等于一致。例子如下:

var a=2!="2";
console.log(a);//false
var b=2!="10";
console.log(b);//true
var c=2!=true;
console.log(c);//true
var d="2"!="2";
console.log(d);//false
var a1=null!=undefined;
console.log(a1);//false

3) "===" 全等于。既比较变量,也判断其数据类型。如果类型和值都一样,返回true,否则返回false。例子如下:

var a=2==="2";
console.log(a);//false
var b=2==="10";
console.log(b);//false
var c=2===true;
console.log(c);//false
var d="2"==="2";
console.log(d);//true
var a1=null===undefined;
console.log(a1);//false

4)!== 不全等与 === 全等一致。例子如下:

var a=2!=="2";
console.log(a);//true
var b=2!=="10";
console.log(b);//true
var c=2!==true;
console.log(c);//true
var d="2"!=="2";
console.log(d);//false
var a1=null!==undefined;
console.log(a1);//true

注意:NaN不和任何值相等包括它自己。

3、"?" 三元运算符

格式:条件表达式 ?语句1:语句2;

执行流程:先算条件表达式,若条件表达式为真则执行语句1,并返回执行结果。如果条件表达式为假false,则执行语句2,并返回执行结果。如果条件表达式的值是非布尔值则会转换成布尔值。案例如下:

var a=20,b=10;
var c=a>b?a:b;
console.log(c);

注意: 其实三元运算符,就是if else的变形形式。

JavaScript 逻辑运算符

逻辑运算符的运算结果有两个true或false。

运算符 描述
&& 逻辑与
|| 逻辑或
! 逻辑非

1)"&&" 逻辑与(并且关系)。如果左右两个操作数都为true,就是两个条件同时满足时,则结果为true,否则,结果为false。案例如下:

var a=true&&false;
console.log(a);//false
var b=1<2&&2<3;
console.log(b);//true

逻辑&&运算如果两个条件都为true则输出结果是第二个条件的结果,如果第一个是false则输出结果是第一个条件的结果。案例如下:

var a=1&&2;
console.log(a);//2 var b=0&&2;
console.log(b);//0

2)"||" 逻辑或。左右两个条件,只要有一个满足,则返回true,否则,返回false。案例如下:

var a=true||false;
console.log(a);//true
var b=1<2||2<3;
console.log(b);//true

逻辑||运算如果第一个是true则输出结果是第一个条件的结果,如果第一个是false则输出是第二个条件的结果。案例如下:

var a=3||2;
console.log(a);//3 var a=0||2;
console.log(a);//2

3)"!" 取反运算。当条件为真,在条件前面添加"!",此时整体就为假了,案例如下:

var a=!true;
console.log(a);//false
var b=!100;
console.log(b);//false

以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 后续继续更新!!

JavaScript 语法:运算符号的更多相关文章

  1. Javascript语法基础

    Javascript语法基础   一.基本数据类型   JavaScript中支持数字.字符串和布尔值三种基本数据类型: 1.数字 数字型是JavaScript中的基本数据类型.在JavaScript ...

  2. JavaScript(二):JavaScript语法及数据类型

    一.JavaScript语法 1.区分大小写ECMAScript中的一切,包括变量.函数名和操作符都是区分大小写的.例如:text和Text表示两种不同的变量.2.标识符所谓标识符,就是指变量.函数. ...

  3. JavaScript 位运算总结&拾遗

    最近补充了一些位运算的知识,深感位运算的博大精深,此文作为这个系列的总结篇,在此回顾下所学的位运算知识和应用,同时也补充下前文中没有提到的一些位运算知识. 把一个数变为大于等于该数的最小的2的幂 一个 ...

  4. javascript语法详解

    javascript语法:运算符 条件语句if...else...  条件语句switch  循环语句for  循环语句while   跳转语句 js运算符 1.算数运算符:+ - * % / ++ ...

  5. 第九十八节,JavaScript语法、关键保留字及变量

    JavaScript语法.关键保留字及变量 学习要点: 1.语法构成 2.关键字保留字 3.变量 任何语言的核心都必然会描述这门语言最基本的工作原理.而JavaScript的语言核心就是ECMAScr ...

  6. JavaScript DOM 编程艺术(1)---> JavaScript语法

    一.  JavaScript语法目录 语法 操作 条件语句 循环语句 函数 对象 二.  具体内容 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一 ...

  7. JavaScript语法详解:JS简介&变量

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. JavaScript简介 Web前端有三层: HTML:从语义的角度,描 ...

  8. (网页)12种不宜使用的Javascript语法(转)

    转自阮一峰: 最近写的一些小东西,总是出各种各样的问题,用了angular.js反应居然比我的jQuery还慢,客户吐槽了,我又把一个小操作,改成了jQuery.浏览一下大神的的博客.转载一点东西: ...

  9. 一张图彻底搞懂JavaScript的==运算

    一张图彻底搞懂JavaScript的==运算 来源 https://zhuanlan.zhihu.com/p/21650547 PS:最后,把图改了一下,仅供娱乐 : ) 大家知道,==是JavaSc ...

  10. JavaScript DOM 编程艺术 ---> JavaScript语法

    二.  JavaScript语法目录 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一点,第一种是将JavaScript代码放到文档<head ...

随机推荐

  1. [Spring+SpringMVC+Mybatis]框架学习笔记(八):Mybatis概述

    第8章 Mybatis概述 8.1 几个概念 ORM Object-Relationship Mapping 对象关系映射,它是一种思想,它的实质是将数据库中的数据用对象的形式表现出来. JPA Ja ...

  2. 《最新出炉》系列入门篇-Python+Playwright自动化测试-9-页面(page)

    1.简介 通过前边的讲解和学习,细心认真地小伙伴或者童鞋们可能发现在Playwright中,没有Element这个概念,只有Page的概念,Page不仅仅指的是某个页面,例如页面间的跳转等,还包含了所 ...

  3. MyBatis使用注解开发(及Sqlsession连接器的本质)

    使用注解开发 底层实现机制是反射和,动态代码.反射可以获得这个类的方法属性还可以创建对象,执行方法. 面向接口编程 之前学过,面向对象编程,也学习过接口.但是真正的开发中,很多时候我们会选择面向接口编 ...

  4. linux-服务操作和运行级别和关机重启

    服务操作: service  network   [] systemctl     [ disable(禁用)  enable(启用)]     network [] 中为操作命令 : 1.statu ...

  5. TypeChat源码分析:基于大语言模型的定制化 AI Agent 交互规范

    TypeChat源码分析:基于大语言模型的定制化 AI Agent 交互规范 本文深入介绍了微软最近发布的 TypeChat 项目,该项目允许开发者定义大语言模型返回的响应结构.通过分析源代码,探讨了 ...

  6. 去中心化组件共享方案 —— Webpack Module Federation(模块联邦)

    在大型应用中, 我们可能会对其进行拆分,分成容器.主应用和多个子应用,使拆分后的应用独立开发与部署,更加容易维护.但无论是微应用.公共模块应用,都需要放到容器中才能使用. 如果多个应用之间希望资源共享 ...

  7. 发布关于PostGIS对于USD格式的拓展

    我们非常高兴的发布为了一年一度的SIGGRAPH 2023发布关于为PostGIS支持USD格式的新拓展. 新添加了3个函数 ST_AsUSDA(geom geometry, usd_root_nam ...

  8. [oracle]用户与权限管理

    创建用户 CREATE USER 用户名 IDENTIFIED BY 密码 DEFAULT TABLESPACE 表空间 TEMPORARY TABLESPACE 临时表空间 QUOTA 空间配额大小 ...

  9. 《Kali渗透基础》07. 弱点扫描(一)

    @ 目录 1:漏洞发现 1.1:Exploit-DB 1.2:searchsploit 1.3:nmap 2:漏洞管理 3:弱点扫描类型 4:漏洞基本概念 4.1:CVSS 4.2:CVE 4.3:O ...

  10. Vue【原创】日历组件Calendar

    最近项目中封装了一个日历组件,用于节假日管理,支持输入默认选中的日期,选择管理日期. 效果图: calendar组件: 1 <template> 2 <div class=" ...