我理解的JavaScript运算符

最新推荐文章于 2023-03-01 09:52:25 发布
最新推荐文章于 2023-03-01 09:52:25 发布
阅读量166 收藏
点赞数 1
分类专栏： js运算符 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45952303/article/details/109035850
版权

JavaScript运算符

ECMA-262 描述了一组用于操作数据值的操作符，包括算术操作符（如加号和减号）、位操作符【现在暂进不考虑】、 关系操作符和相等操作符。这些操作符可以运用于我们的很多数据类型，它不像我们其它编程语言，操作符只对某些数据支持

一元操作符

只能操作一个值的操作符我们叫一元操作符。
一元加减操作符在我们的JS里面最主要的作用就是类型转换。
例题:
var a = “01”;
a = -a;
console.log(a);
运行结果：
在这里插入图片描述
一元加减操作符其实就是对当前的变量调用了Number 的方法来进行转换；
一元减操作符就是将当前变量通过Number方法转换以后再乘以-1,它的结果是一个负数；
总结 ：一元操作符最终所得到的结果一定是一个数字类型

递增递减操作符

在原有的数值上面进行相加或相减。
如果不是Number类型的数据执行了递加的操作，它会先通过Number()这个方法去转换一次，然后再操作。
递增操作里面：

  1. ++在后面是先使用这个变量，再把这个变量+1
  2. ++在前面是先把自己+1，再使用这个变量
    递减操作和递增操作一样。
    例题：
    /* var a = 10;
    var b = 20;
    var c = 30;

++a; //11
a++; //11
// 13 21 30 13
var d = ++a + (++b) + (c++) + a++;

console.log(d); //77 */

加法操作符 +

操作原则

  1. 如果两个数都数字，则直接相加
  2. 如果其中有一个是字符串，另一个是字符串，结果是一个拼接型的字符串
  3. 如果都是字符串，则直接拼接
  4. NaN是一个特殊的数字类型，除了与字符串相加外，跟其它任何值相加都是NaN
  5. 数字与布尔类型相加，undefined或null相加，调用Number方法去转换一次，然后再相加
  6. 如果相加的两个值不是数字类型，也不是字符串类型，则整体通过Number去转一次，再按照上面的前4条去操作（所以在加法的操作符里有一个隐形的规则 ，字符串是老大，NaN是老二，其它的都通过Number转）
    例题：
    /* console.log(1+2); //3
    console.log(“1”+2); //12
    console.log(true+1); //2
    console.log(true+“1”); //true1
    console.log(NaN+1); //NaN
    console.log(NaN+true); //NaN
    console.log(NaN+“1”); //NaN1
    console.log(“1”+“2”); //12
    console.log(1+undefined); //NaN
    console.log(“1”+undefined); //1undefined
    console.log(1+null); //1
    //现在在来一看一些不常见的加法运算
    console.log(true+true); //2
    console.log(true+undefined); //NaN
    console.log(true+null); //1 */

减法操作符 -

  1. 减法操作符得到的结果一定是一个Number类型
  2. NaN与任何值相减都是NaN
  3. 如果执行减法的不是数字，则通过Number去转换一次（减法操作符也有一个隐藏规则，数字是老大，NaN是老二，其它类型通过Number转）
    例题：
    console.log(2 - 1); //1
    console.log(“2” - 1); //1
    console.log(“2” - “1”); //1
    console.log(“2” - true); //1
    console.log(2 - false); //2
    console.log(1 - null); //1
    console.log(2 - undefined); //NaN
    console.log(2 - NaN); //NaN
    console.log(null - true); //-1
    console.log(“a” - 1); //NaN
    console.log(“a” - “b”); //NaN
    console.log("" - 1); //-1
    console.log("" - NaN) //NaN

乘法操作符 *

操作原则

  1. 乘法操作符得到的结果一定是一个Number类型
  2. NaN与任何值相乘都是NaN
  3. 如果执行乘法的不是数字，则通过Number去转换一次
    例题：
    console.log(2 * 1); //2
    console.log(“2” * 1); //2
    console.log(“2” * “1”); //2
    console.log(“2” * true); //2
    console.log(2 * false); //0
    console.log(1 * null); //0
    console.log(2 * undefined); //NaN
    console.log(2 * NaN); //NaN
    console.log(null * true); //0
    console.log(“a” * 1); //NaN
    console.log(“a” * “b”); //NaN
    console.log("" * 1); //0
    console.log("" * NaN) //NaN

除法操作符 /

操作原则

  1. 除法操作符得到的结果一定是Number类型
  2. NAN与任何数相除都是NaN
  3. 如果执行除法的不是数字，则通过Number去转换一次
  4. 如果被除数为0，则最终的结果为Infinity无穷大
    例题：
    console.log(2 / 1); //2
    console.log(“2” / 1); //2
    console.log(“2” / “1”); //2
    console.log(“2” / true); //2
    console.log(2 / false); //infinity
    console.log(1 / null); //infinity
    console.log(2 / undefined); //NaN
    console.log(2 / NaN); //NaN
    console.log(null / true); //0
    console.log(“a” / 1); //NaN
    console.log(“a” / “b”); //NaN
    console.log("" / 1); //0
    console.log("" / NaN) //NaN

取余操作符 %

操作原则

  1. 取余操作符得到的结果一定是Number类型
  2. 如果在操作的时候有NaN，则结果就是NaN
  3. 如果执行取余的不是数字，则通过Number去转换一次
  4. 如果除数为0，则最终它的余数的结果为NaN；被除数为0，最终取余结果为 0
    例题：
    console.log(10 % 3); //1
    console.log(“10” % 3); //1
    console.log(“10” % “3”); //1
    console.log(“2” % true); //0
    console.log(2 % false); //NaN
    console.log(1 % null); //NaN
    console.log(2 % undefined); //NaN
    console.log(2 % NaN); //NaN
    console.log(NaN % 2); //NaN
    console.log(null % true); //0
    console.log(“a” % 1); //NaN
    console.log(“a” % “b”); //NaN
    console.log("" % 1); //0
    console.log("" % NaN); //NaN

赋值运算符 =

它使用我们的=来进行，，从右往左赋值
a=a+5
高级写法：
a += 5;
a -= 5;
a *= 5;
a /= 5;

相等操作符 ==

在JS的编程里面，我们经常要对两个变量进行判断 ，看他们是否相等。JS在判断相等的时候有两种情况

简单的相等，通过符号==来表示

简单的相等是判断 等号两边的值是否相等，如果等号两边的数据类型不相同，则会自动调用Boolean()，Number()或String()这三个方法进行类型转换

全等，通过符号===来表示
判断原则

  1. null与undefined是相等的，除此之外与任何值都不相等
  2. NaN不与任何值相等，包括它自身
  3. 如果一个操作数是字符串，另一个操作数是数值，在比较之前先将字符串转为数值
  4. 布尔类型转换成数字，true就为1，false就为0
  5. 在比较相等之前，不能将null与undefined转换成任何类型（它们如果参于了比较，不能做类型转换）
    例题：
    console.log(12);
    console.log(1    1);
    console.log(1true);
    console.log(0    false);
    console.log(“0”==false);
    //-------------------------
    console.log(“10"10);
    console.log(""0);
    console.log(NaN    0);
    console.log(null    undefined);
    console.log(”"null);
    console.log(0    undefined);

全等操作符 ===

全等操作符有时候也叫严格相等
判断原则

  1. 符号两边的数据类型一定要相同
  2. 符号两边的值一定要相等
  3. NaN不与任何值相等
    例题：
    console.log(10===10); //true

console.log(“10”===10); //false

console.log(1===true); //false

console.log(0===false); //false

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

console.log(NaN===NaN); //false

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

console.log(10===9); //false

不相等操作符

根上在的相等与全等来比较，它其实就是一个反向的操作,它使用!=或!==来进行
console.log(1 != 2); //true
console.log(true != 1); //false
console.log(null != undefined); //false
console.log(0 !== false); //true

### 关系操作符

关系操作符指的是几个值之间的大小关系，它们使用大于(>)或小于(<)，大于等于(>=)或小于等于(<=)来表示 ，它们返回的值一定是布尔类型

console.log(100<99);		//false			
console.log("1"<2);			//true			
console.log("1"<"2");		//true				
console.log(true<2);		//true				
console.log("blue"<"action");	//false		
console.log("aa"<"ab");			//true			
console.log("A"<"a");			//true			
console.log("我">"你");			//true

判断规则

  1. 如果两个数是数值，则直接比较数值大小

  2. 如果一个操作数是数值 ，另一个不是数值，则将另一个数通过Number转换成数值以后再比较

  3. 如果有个操作数是布尔值 ，则先将布尔值转换成数值 再比较

  4. 如果两个操作数都是字符串，则比较两个字串所对应的编码值（ASCII码）

    ASCII码指的是计算机通用信息编码，它将我们所有的字母都使用一个数字编码来表示 ，同时也将我们的数字使用了编码来表示

  5. 如果是中文比较，则比较unicode码【目前暂时不用考虑第5条，我们后面讲字符串对象以后就可以了】

附注：ACSII码表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zaa164vc-1602507684455)(http://www.softeem.xin:8090/upload/2020/05/image-20200414105241592-d12e49233708494396688bd3a02addb2.png)]

条件操作符

条件操作符在某些编程语言里面也叫条件表达式。它是根据一个条件来赋值的 三元运算符

语法：
条件是否成立?成立的值:不成立的值;
执行的流程：
条件运算符在执行时，首先对条件表达式进行求值，
如果该值为true，则执行语句1，并返回执行结果
如果该值为false，则执行语句2，并返回执行结果
如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算
例题：
var a = 10;
var b = 20;
//通过这一个条件操作符，我们可以将比较大的一个值赋值给max
var max = a>b?a:b;



### 逗号运算符

使用逗号操作符可以在一条语句中执行多个操作，这个操作符最常见的使用场景就是在定义变量的时候，如下所示

```javascript
//我们以前定义变量是这么定义
var a;
var b = 10;
var c;

现在有了逗号运算符以后，可以简化成如下操作

var a,b = 10,c;

逗号运算符不会中断语句的运行，直到碰到分号才会结束 ，正是因为有了一个像这样的优点，我们在定义多个变量的时候就会使用这个逗号运算符

布尔操作符

在一门编程语言中，布尔操作符的重要性堪比相等操作符，如果没有测试两个值关系的能力，那么 诸如 if…else 和循环之类的语句就不会有用武之地了。布尔操作符一共有 3 个：非（NOT）、与（AND） 和或（OR）。

布尔操作符有时候也叫关系操作符，它主要是有三个操作符

或（OR）：一直即真

与（AND）：一假即假

非（NOT）：非真即假，非假即真

在JS里面，我们有6个明确的false,分别是0,false,NaN,null,undefined,""，这些值在经过Boolean转换的时候会得到false，其他的值都得到true

逻辑与操作符

逻辑与操作符由两个和&&符号来表示 ，表示执行一个与的操作。这个操作符的结果 不一定是布尔类型

逻辑与执行的是一个一假即假的操作

var a  = true && false && true;			//false

在上面的操作的里面，我们所有的操作都是布尔类型的值在进行操作，但是在日常工作当中，我们有时候操作的时候并非是布尔类型的值

console.log(true&&false);		//false	
console.log(true&&123);			//123	
console.log(false&&123);		//false	
console.log(true&&"");			//""	
console.log(true&&""&&123);		//""	
console.log(NaN&&false);		//NaN	
console.log(NaN&&null);			//NaN	
console.log(null&&"abc");		//null	
console.log(123&&"abc");		//"abc"	
console.log(0&&123);		    //0

判断原则

  1. 与：一假即假
  2. 明确的false有哪些，如果不是布尔类型，就用Boolean()去转
  3. 短路原则：当已经能够得到表达式的结果的时候，我们就不用再进行后面的运算了
逻辑或操作符

逻辑或操作符由两个竖线||来构成，执行一真即真的操作，它的运算结果 不一定是布尔类型
逻辑或的操作根逻辑与的操作差不多，也可以对非布尔类型的数据进行操作

console.log(true||123||false);		//true		
console.log(false||123||false);		//123		
console.log(666||true||"hello");	//666		
console.log(NaN||false||null);		//null		
console.log(null||"world");			//"world"		
console.log(false||NaN);			//NaN

**判断原则 **

  1. 或：一真即真
  2. 明确的false有哪些，如果不是布尔类型，则通过Boolean()去转换
  3. 短路原则：如果表达式已经能够得到结果 ，我们就不再进行后面的运算了
逻辑非操作符

布尔类型里面是有两个操作符的，即true与false，逻辑非操作符的结果一定是一个布尔类型

采用!来表示，可以应用于JS中的任何值，无论你之前是什么类型的值，只要进行了逻辑非的操作得到的结果一定是一个布尔类型

编辑非操作符如果操作的并非是一个布尔类型的值，则会先将这个值进行Boolean转换，然后再进行逻辑非的操作

console.log(!false);		//true
console.log(!123);			//false
console.log(!NaN);			//true
console.log(!undefined);	//true
console.log(!null);			//true
console.log(!"");			//true
console.log(!0);			//true
console.log(!"hello");		//false

逻辑非操作符的本质重点就在Boolean模拟数据转换

📚 小技巧：有些时候使用两个逻辑非操作可以模拟Boolean类型的数据转换行为

console.log(Boolean(0));		
console.log(!!0);

在执行与，或，非的逻辑操作的时候，一定要根据我们的判断原则来进行

判断原则

  1. 一真即真，一假即假，非真即假，非假即真
  2. 有哪些明确的false，如果不是布尔类型，则通过Boolean()去转换
  3. 短路原则：如果表达式已经能够得到结果 ，我们就不再进行后面的运算了
  4. 先取“非”，再来“与”，最后“或"

*补充：

JS中只有六个明确的false值：0 ，“ ”，null ,undefine ,NaN,false
除此之外都为true

weixin_45952303
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中“&&”和“||”操作符的意义，深入理解和使用场景
weixin_34194702的博客
06-26 411
一、概念 与其他语言不同，在js中，逻辑运算符可以返回任何类型的数据，不仅仅是true和false。 &&和||的返回值是两个操作数的其中一个。即a&&b或者a||b返回的是要么是a，要么是b，而其他语言中返回的是true or false。 在js逻辑运算中，需要隐式的转换为boolean类型再来运算，转换规则为： 1. 对象、非零number、非空st...
深入解析JavaScript中的操作符：从基础到高级
最新发布
weixin_45074231的博客
04-02 1193
本文深入解析了JavaScript中的操作符，从基础算术到高级位操作等各个方面进行了详细介绍。文章首先概述了操作符在编程中的重要性，随后详细讲解了算术、比较、逻辑、位、赋值、条件、类型和指数操作符的用法。此外，还探讨了操作符的优先级、结合性以及在使用中可能遇到的常见陷阱和最佳实践。通过本文，读者可以更加全面地理解JavaScript操作符，并提升编程效率和代码质量。
BOM基础
天才小胖达的博客
09-06 437
本文概述了BOM的基础学习，针对location对象，history对象，navigator对象，window对象，三种缓存存储，JSON和URL对象进行了详细的概述
在线影院的实现
weixin_45656074的博客
07-01 2376
html ---------------------------------------------------------------- 决定前端架构css------------------------------------------------------------------- 决定前端样式js--------------------------------------------------------------------- 决定页面行为jQuery ( js 框架 )Bootstrap
vue项目实战
小蜗牛的博客
03-01 407
node连接服务器 【全栈初体验】Vue+Node+MySQL实现前后端分离开发_艾欢欢的博客-CSDN博客 node项目 1.猫眼电影移动端 在博客‘前端学习三’中项目入门的基础上进行 1.首先上图是测试了跳转，现在正式开发：要展示的是电影列表，这个列表对于正在上映和即将上映都需要，只是请求的数据/调用的接口不同，因此将其设置为一个组件 1.在components中新建一个moviesDetail.vue:其展示的内容是每次点击最上面的正在热映/即将上映触发一个请求进行返回的.
JavaScript逻辑运算符相关总结
10-14
主要介绍了JavaScript逻辑运算符的相关资料,帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
深入理解JavaScript系列
09-30
第3部分深入探索JavaScript，介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常捕获、函数、变量、对象与继承、数组、正则表达式、Date、Math、JSON、标准全局变量、编码和JavaScript、ECMAScript 5的新...
JavaScript 扩展运算符用法实例小结【基于ES6】
12-11
本文实例讲述了JavaScript 扩展运算符用法。分享给大家供大家参考，具体如下： 扩展运算符格式 扩展运算符格式很简单，就是三个点(…) 重点：需要ES6 语法支持 扩展运算符作用？？？ 扩展运算符允许一个表达式在...
JavaScript知识图谱--运算符
11-08
JavaScript的运算符知识图谱，有助于你更好的理解JavaScript运算符
javascript表达式和运算符详解.docx
01-18
javascript 表达式和运算符详解 javascript 表达式是指能计算出值得任何可用程序单元。它是一种短语，javascript...javascript 运算符的优先级是非常重要的，建议大家都去了解一下，以便更好地理解和使用 javascript。
使用socket抓取网页源码
11-05
本人前面已经写了一个抓取网页的程序，准确性很高，但是没有蜘蛛的爬行功能，而且效率也不是怎么很理想；本人经过一段时间的研究，参考了其他高手的程序，然后自己写了一个网页抓取的，具有蜘蛛爬行功能，大家有兴趣可以去学习一下
微信小程序实现打开并下载服务器上面的pdf文件到手机
10-16
主要介绍了微信小程序实现打开并下载服务器上面的pdf文件到手机，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
【vue项目实战】Vue工程化项目--猫眼电影移动端（三）
艾欢欢的博客
05-06 7976
vue工程化第三节 组件化开发，标题部分 多处用到的代码就在全局进行注册 优化用户体验：当网速过慢时，显示加载动画。 播放宣传片 保留组件状态，避免重新渲染 keep-alive 图片懒加载 本节完整demo 组件化开发（标题） 思想：不同种类的组件，划分不同模块 从首页进入详情页，标题文字会改变，也会多出一个返回按钮，但样式还是不变的，所以这里也可以拆分为一个组件（我不会告诉你们，是我在...
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
热门推荐
艾欢欢的博客
04-20 1万+
vue工程化第二节 添加内容和样式 使用axios请求数据，参考这里 添加局部左右滑动（即将上映页），参考 （左右滑动也可使用插件） 组件化开发，相同代码可以提取出来作为一个组件来调用，减少代码量，提高代码可复用性 路由传值跳转电影详情页，[参考] 本节完整[demo参考] 提高代码可复用性 相同代码单独作为一个组件，提高代码可复用性。 下面两个界面的红色框框，样式和内容都差不多，可以...
NaN是什么？NaN == NaN 的结果是什么?为什么?
maybemetoo的博客
03-15 1万+
NaN是什么？ 定义: 1.not a number 不是一个数值 2.表示存储数据的数据类型，不是一个数值 3.如果有非数值进行运算，结果就是NaN NaN == NaN 的结果？ console.log( NaN == NaN ); //false 执行结果为false 在JavaScript中的规定, NaN表示的是非数字, 但是这个非数字也是不同的；因此 NaN 不等于 NaN，两个...
线程并发问题(线程安全)
Superzhaoy的博客
07-26 2071
day18 - 线程同步 线程并发问题(线程安全) 案例场景 银行取钱问题 买票问题 限时秒杀 线程安全 多线程并发时，多个线程同时操作同一个内存区域(变量)，可能会导致的结果不一致的问题；所谓线程安全，指的是在多线程并发操作的时候能保证共享的变量数据一致 并发编程三要素 线程并发时需要保证线程安全，需要满足三大条件: 原子性 可见性 有序性 原子性（Atomicity) 对于一条线程执行来说要保证，要么都成功，要么都失败；对于原子性操作可以通过加锁的方式实现；Synchronized和Reentr
javascript数据类型转换百度面试题
CSDN_156的博客
06-27 163
这是前两天百度电话面试一面中的数据类型转化题，感兴趣的可以自己试试 console.log('true+true='+(true+true)) // 2 console.log('null+undefined='+(null+undefined)) // NAN console.log('[]+[]='+([]+[])) // console.log('true+1='+(true+1)) // 2 console.log('null+2='+(null+2)) // 2 console.log('..
JavaScript中的加法
weixin_47075145的博客
06-19 5436
先来看一些简单的 + 法： 一些较难理解的 + 法： 直接看看不懂，先给出加法运算规则（灰常重要！！！）： 现在给出例子理解加法运算规则：eg1：console.log(null + undefined);结果为？ eg2：console.log(NaN + "1");结果为？ "NaN1"NaN 看作是一种基本数据类型。eg3:console.log(1 + true); 结果为？ eg4：console.log([1] + 1); 结果为？"11" 为什么呢？eg5:console.
你能带我学习JavaScript魔
07-15
首先，您可以开始学习JavaScript的基础知识，例如语法、变量、数据类型、运算符等。以下是一些学习JavaScript的资源和步骤： 1. 在线教程和课程：有很多免费的在线资源可供学习JavaScript，如MDN Web Docs、W3...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值