正文

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

IP云
IP云V管理员/4 阅读
09/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

隐式类型转换

使用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是两个对象，尤其是两个有关联的对象，问题会更复杂；

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