JavaScript中极易出错的操作符运算总结
算术运算符
+ - * / % ()
非正常情况1: 有特殊值字面量参与的运算
- NaN参与的运算：得到的结果都是NaN
- Infinity参与的运算，视情况而定, 比如:
5/Infinity=0 5%Infinity=5 Infinity%5=NaN Infinity+5=Infinity Infinity / Infinity = NaN Infinity - Infinity = NAN Infinity % Infinity = NAN
工作中并不会使用特殊值运算，没有实际应用的意义，但是要了解，以防面试遇到
非正常情况2: 其他类型的数据参与数学运算。
有字符串参与的 + 运算(包括只有符号一边有字符的情况)：+ 号变为连字符将前后连接成整体字符串。
例如:
var a = 3 - "36" % 5 + "2" - 2
console.log(a)
var b = "36" % 5
console.log(b)
var c = 3 - "36" % 5 + "2"
console.log(c)
输出:
20
1
22
隐式转换：除了字符串参与的 + 运算，其他情况下，所有其他数据类型参与数学运算时，计算机暗中将其他数据类型先自动转换成数字类型，再参与运算，这个过程中不需要使用parseInt()、Number() 等方法，过程是暗中进行，这就是一个隐式转换的过程。
隐式转换
其他的数据类型会隐式转换为数字类型：
- 对应数字：纯数字字符串会转为对应的数字”123”→123
- 转换为1： true
- 转换为0：false、null、 “”空字符串、空白字符串
- 转换为NaN：undefined、非空非纯数字字符串
比较运算符
也叫作关系运算符。一个 比较运算符 comparison operator 比较它的操作数并返回一个布尔类型值。运算结果要么是true，要么是false。
> 大于
< 小于
>= 大于等于
<= 小于等于
== 相等，只判断值大小是否相等，不判断数据类型
!= 不等，与相等完全相反
===全等，不光判断值相等，还要判断数据类型相等
!==不全等，与全等于完全相反
非正常情况1: 特殊值参与比较运算
- NaN参与：不等于和不全等于结果是 true，其他的都得到 false
- Infinity参与的运算，视情况而定, 比如:
Infinity == Infinity ->True Infinity === Infinity ->True Infinity > Infinity ->False Infinity >= Infinity ->True
非正常情况2: 其他数据类型参与比较运算（排除字符串与字符串的比较
其他数据类型也会隐式转换为数字参与比较。
“123”→123 true→1 false→0 null→0 undefined→NaN “”→0 “abc”→NaN
null 的判断比较特殊：null 与 0 判断时，相等判断为 false，>= 和 <= 判断为 true
null == undefined -> True
非正常情况3: 字符串与字符串比较
不会发生隐式转换为数字，而是比较两个字符串的 Unicode 编码顺序
字符编码顺序：从前往后 0-9，A-Z，a-z，前面的小于后面的
比较时，不关心两个字符串的长度，从第一个字符开始比较，依次往后顺延比较，直到比较出大小，就不再往后比较
逻辑运算符
逻辑运算符常用于布尔类型值之间; 当操作数都是布尔值时，返回值也是布尔值
&& 逻辑与运算符且
|| 逻辑或运算符
! 逻辑非运算符
非正常情况
- 除了布尔类型的值之外，其他数据类型的值也可以参与逻辑运算。运算过程中需要将操作数隐式转换为布尔类型的值，参与判断计算，最终运算结果还是原来的某个位置的数据.
- 并不是所有逻辑运算返回结果都是布尔值，其他数据参与得到的就是数据本身
隐式转换为布尔值的规律
- 转为false：NaN、0、 “”空字符串、null、undefined
- 转为true：非0 非NaN数字、非空字符串
当它们用于非布尔值的时候，返回值就可能是非布尔值。其实这种运算非常简单：
- (逻辑与 a && b ) 如果a能被转换为false，那么返回a；否则，返回b
- (逻辑或 a || b ) 如果a能被转换为true，那么返回a；否则，返回b
逻辑运算符运算顺序
综合运算顺序：非、与、或
赋值运算符
= 等于
+= 加等于
-= 减等于
*= 乘等于
/= 除等于
%= 取余等于
++ 递加
-- 递减
一元运算符
++ -- !
++ 或 -- 符号可以写在变量前和变量后面，位置不同可能导致程序运行结果不同
以 ++ 为例：
- a++: ++ 符号在变量之后，a++ 在参与程序过程中使用的原始没有加 1 的值，使用完后第二次用 a 变量时，a 用的就是加 1 后的新值。先参与，后自加.
- ++a：++ 符号在变量之前，++a 在参与过程中整体就使用 a 加 1 之后的新值，使用完后第二次用 a 变量时，a 用的也是加 1 的新值。先自加，后参与
例1
var a = 3; var b = a++; var c = ++a; console.log(a,b,c)
输出:
5 3 5
例2
输出:
运算优先级
优先级从高到底:
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符
例
var a = 4; var num = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || !9; console.log(num)
输出:
4
总结
到此这篇关于JavaScript中极易出错的操作符运算总结的文章就介绍到这了,更多相关JavaScript操作符运算内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现，故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07
- 首先，我想到的是另建一个结果数组，用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较，检测是否重复。于是乎，我写出了如下代码A： Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15
- 这篇文章主要介绍了Javascript类型转换的规则实例解析，涉及到javascript类型转换相关知识，对本文感兴趣的朋友一起学习吧...2016-02-27
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料，小编觉得这篇文章写的还不错，需要的朋友可以参考下，希望能够给你带来帮助...2021-11-10
- 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- 虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24
- 神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念： 抽象语法树： 解释器模式并未解释如...2014-06-07
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- ---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 （2）this.locati...2015-10-30
- tab切换在网页中很常见，故最近总结了4种实现方法。 首先，写出tab的框架，加上最简单的样式，代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08