JS中的加减乘除和比较赋值

时间:2021-09-14 23:20:09

隐式类型转换


使用Boolean(), Number(), String()去转换数据类型的方法叫显示类型转换,而与它相对的就是隐式类型转换,隐式类型转换并没有明显的标志,而是JS解释器觉得做这样一个转换是合适的,就转换了,例如一元加,一元减,递增和递减,它们可以操作任何数据类型,最后的结果都返回数字,这个是比较好理解的,而加减乘除运算中的类型转换更加复杂麻烦,也因此可能会出现很多奇怪的现象;

乘性操作符


包括乘法、除法和模运算,模运算就是取余数;

在JS中使用乘性操作符时:

  • 如果两边的操作数都是数字,那么就进行数学运算;
  • 如果有一个操作数不是数字的话,就把这个操作数转换成数字,例如
1 * '2';  //'2'会被转换成数字2,然后再参与到运算中
  • 如果操作数不能转换成普通数字,例如
1 * 'abc';  //’abc’会被转换成NaN(不要忘了NaN其实也是一个数字),然后再进行数学运算,结果是NaN

NaN与任何数进行计算结果都是NaN;

注意问题:

1, 涉及到小数计算的时候一定要注意,0.1 * 0.2不等于0.02,而是一个与0.02非常接近的数字,如果要做精确的计算的话,建议先把小数转换成整数,再把结果转回小数;

2, 进行模运算的时候,结果不一定是整数,也可以是小数,如1.5 % 1.2,结果是0.30000000000000004;

3, 使用乘性操作符最后得到的结果一定是一个数字类型;

减法操作符


减法操作符与乘性操作符的规则是相似的:

  • 如果两边都是数字,那就进行减法操作;
  • 如果有一边不是数字,那么就先把它转换成数字再做减法运算;

记住NaN和任何数字进行运算都等于NaN,同时使用减法操作符的时候也要注意小数的问题;

加法操作符


加法操作符可以说是开发中用得最多的一个操作符,也是比较复杂的,它的运算规则与乘性操作符和减法操作符不太一样;

使用加法操作符的情况有两种:

  • 两个数字相加;
  • 两个字符串拼接;
  • 如果两边都是数字类型或布尔类型,那就进行简单的数字相加,或者把布尔类型转换成数字再相加;
    1 + 1;  //
    1 + true; //
    true + false; //
  • 如果左右两个操作数中有一个是字符串,或者两个都是字符串的时候,那就进行字符串的拼接;
    1 + '1';  // "11"
    '1' + true; // "1true"

如果你不确定操作数的数据类型,那么可以先对它做一个显式转换;

String(a) + String(b);  // 得到一个字符串
Number(a) + Number(b); // 得到一个数字

关系运算符


  • 如果是对两个数字进行比较操作,那就是简单的数字比较,返回一个布尔值;
  • 如果是对字符串进行比较,这种比较是基于字符编码的,‘B‘会小于’a‘,因为'B'的编码比'a'小;
  • 如果有对象要参与到关系比较中,首先会把对象转换成一个原始值再进行比较,转换过程中会先调用对象的valueOf方法,再调用toString方法;
  • 如果有一个操作数是数字,那么会把另外一个操作数转换成数字;
  • 如果有一个操作数是NaN,那么运算结果就是NaN,因为NaN不等于任何数字;

关系运算符的返回结果都是一个布尔值;

关系运算符是二元运算符,所以它的结合性是左结合,也就是从左向右运算,所以可能会出现这样一个问题

7 > 6 > 5;

这行代码看上去好像应该返回true,但其实不是,JS会先计算7 > 6,得到true,再计算true > 5,把true转换成数字之后也就是1 > 5,最后的结果是false;

在加法操作和关系操作中都会进行隐式类型转换,但不同的是加法操作符更偏向于字符串的处理,而比较运算符则偏向于数字的处理;在加法操作中,如果有一个操作数是字符串,那另一个操作数也会被转换成字符串,而在比较运算中,如果有一个操作数是数字,那另一个操作数会被转换成数字;

建议无法确定操作数的数据类型时,先对它们进行显式数据类型转换;

=== 全等判断


  • 首先判断类型是否相同,如果类型不相同直接返回false,只有两个操作数类型相同的情况下才会进行下一步;
  • 如果两边都是数字,那就判断两个数值是否相等,但是要注意的是,在JS中,NaN不等于NaN,它也是唯一一个与自身不相等的值;
  • 如果两边都是布尔类型,那就判断布尔值是否相同;
  • 如果两边都是字符串,那就判断两个字符串的编码是否相同,所以看上去相等的两个字符串可能并不相等,因为它们的编码可能不相同;
  • undefined和null只和自身相等,因为这两个数据类型都只有一个值;
  • 如果是两个对象参加判断,那么判断的是对象的引用,所以即使是两个看起来相同的对象参加判断的结果也是不相等,因为这可能是两个独立的对象,那么引用地址是不一样的,

== 相等判断


它与全等的区别就是它会进行一个隐式类型转换的操作,比如null和undefined,如果对它们进行全等判断,那么结果会是false,因为它们的类型不一样,但如果对它们进行相等判断,结果会是true;

  • 当进行数字和字符串的相等判断时,会把字符串先转换成数字,然后再进行比较;
  • 如果有一个操作数是布尔类型,会先把这个操作数转换成数字;
    true == '1';  // 先把true转换成1,再按照第一条规则把'1'转换成1,再进行比较,得到结果true
  • 对对象进行相等判断时,判断的是引用地址是否是同一个;

当进行对象和原始类型进行相等判断时,首先会先调用对象的valueOf方法,再调用toString方法,把对象转换成原始类型,然后再进行比较;但日期对象比较特殊,它会调用toString方法转换成原始类型;

但日常开发中用得比较多的一个是null和undefined的比较,一个是数字和字符串的比较,会先把字符串转换成数字;

不全等(!==)和不相等(!=)


与全等和相等是相对的,结果反过来就是了;

= 赋值


赋值操作符其实是一个二元操作符,但不同的是,它左侧的表达式必须是一个变量或者是对象的属性,也就是说,它的左侧是一个可以改变的值,也被成为左值;赋值操作符右侧的表达式可以是任何数据类型;

var num = 10;
num = num + 10;

在这行代码中,首先会进行加法操作,再进行赋值操作,这是因为赋值操作符的优先级比加法操作符低;注意代码不要写成num + 10;因为 这样只是进行了计算,没有保存结果,不要把它和num++;搞混,num++;与num = num + 1;的结果是一致的;

复合赋值操作符


也就是带操作符的赋值操作,在等号(=)前面再写一个运算符,一般是

+=

-=

*=

/=

%=

这只是在写法上简单一点,但是性能上完全没有提升;

连续赋值


var a = b = 1;

不推荐这样写,这样b成了全局变量,造成变量污染;

如果a和b是两个对象,尤其是两个有关联的对象,问题会更复杂;

————整理自沙翼老师的前端音频教程#陪你读书#(喜马拉雅)

JS中的加减乘除和比较赋值的更多相关文章

  1. js中 变量的解构赋值

    es6新特性, 提取数组或对象中的值,按照对应位置, 为变量赋值. let [a, b, c] = [1, 2, 3]; 交换变量的值变得容易 let x = 1; let y = 2; [x, y] ...

  2. js 中数组对象的定义赋值 以及方法

    1.定义数组 var m=new Array(); var n=[]; 2.数组的赋值(两种) A. var m=new Array(2); 一个值表示数组length var m=new Array ...

  3. 在js中为图片的src赋值时,src的值不能在开头用 破浪号~

    <img id="aa" src="~/Content/Manager/no01.png" /> document.getElementById(& ...

  4. 在js中绑定onclick事件为什么不加括号,在html代码中必须要加?

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 图文结合深入理解JS中的this值

    文章目录 Js 中奇妙的this值 1. 初探this 2. this指向总结 2.1 普通函数调用 2.2 对象的方法调用 2.3 构造函数调用 2.4 利用call,apply,bind方法调用函 ...

  6. 问题解决:在js中绑定onclick事件为什么不加括号,在html代码中必须要加?(转载)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 图文结合深入理解 JS 中的 this 值

    图文结合深入理解 JS 中的 this 值 在 JS 中最常见的莫过于函数了,在函数(方法)中 this 的出现频率特别高,那么 this 到底是什么呢,今天就和大家一起学习总结一下 JS 中的 th ...

  8. JS中的数组创建,初始化

    JS中没有专门的数组类型.但是可以在程序中利用预定义的Array对象及其方法来使用数组. 在JS中有三种创建数组的方法: var arr = new Array(1,2,3,4); var arr = ...

  9. JS中Float类型加减乘除 修复 JQ 操作 radio、checkbox 、select LINQ to SQL&colon;Where、Select&sol;Distinct LINQ to SQL Count&sol;Sum&sol;Min&sol;Max&sol;Avg Join

    JS中Float类型加减乘除 修复   MXS&Vincene  ─╄OvЁ  &0000027─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄Ov ...

随机推荐

  1. 项目自动化建构工具gradle 入门2——log4j输出helloWorld

    上一章节呢,有一个能跑的程序了.但是对做工程的人来说,用日志输出感觉比用System.out要有档次一点.比如使用log4j.直接上例子: 1进入D:\work\gradle\log目录  ,您电脑没 ...

  2. bzoj1536&colon; &lbrack;POI2005&rsqb;Akc- Special Forces Manoeuvres

    Description 在一次军事行动中有一批空降兵要降落在沙漠中拆除炸弹. 空降兵按照预定的顺序跳伞并降落到指定的位置.一旦降落他们便呆在原地不动了. 每个空降兵都有一个生存半径. 如果炸弹与他的距 ...

  3. 【Javascript】&colon; for循环中定义的变量在for循环体外也有效

    for循环中定义的变量在for循环体外也有效 <script> (function(){ var a = 111; for(var i=0;i<5;i++){ var carl = ...

  4. Templates

    Templates Templates are the site's markup, where images and js, css files are located as well as the ...

  5. Activity一共有以下四种launchMode

    1. standard: 无论什么情况都会生成一个新的Activity实例,并且放于栈顶. 2. singleTop:如果Activity纯在但是不位于栈顶,就重新生成一个Activity实例. 3. ...

  6. java开源项目之IQQ学习记录之单例模式与log4j日志记录

    作者:sushengmiyan 本文地址:http://blog.csdn.net/sushengmiyan/article/details/18992741 打开IQQ项目,打开包iqq.app中的 ...

  7. LeetCode155&period;最小栈

    设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中. pop() -- 删除栈顶的元素. top() -- 获取栈顶元素. ...

  8. linux ssh root登陆出现错误:Permission denied&comma; please try again

    密码已检测过多遍还是登录失败 经检查 vim /etc/ssh/sshd_config PermitRootLogin no 改成 PermitRootLogin yes 修改之后重启就可以了

  9. d3 选择器

    一.隔了一段时间没看D3了,好多api又陌生了.武林太大,唯有自强不息. D3 选择器算是学习D3的第一步吧. 跟 学习JQ一样.先熟悉下api,才能够如鱼得水,手到勤来. 二. 选择器 1.选择器 ...

  10. Hive2:Unable to instantiate org&period;apache&period;hadoop&period;hive&period;ql&period;metadata&period;SessionHiveMetaStoreClient

    [root@node1 ~]# hive which: no hbase in (/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bi ...