JavaScript初级篇——操作符

_花卷
91 阅读6分钟

一、加性操作符

加性操作符包括加法运算符与减法运算符（因为a-b相当于a+(-b)）

加法运算符

  1. 如果加号两侧的操作数有其中任何一个是字符串(String)类型，这时候+起到的是拼接作用

  2. 作为加法运算且左右两侧都是Number的话注意以下两点：

    • 如果左右两侧都是数值，那么作为正常的加法进行运算
    • 如果其中一个数值为NaN，那么结果就是NaN

  3. 如果操作数是布尔值，undefined、null，则会根据对应规则转为数字类型，然后进行计算，如果其中转换结果为NaN那么就是NaN

    • 如： 1+null = 1 (内部进行了转换：相当于1+Number(null) = 1+0 = 1)

减法运算符

  1. Number类型

    • 如果左右两侧都是数值的话，正常进行减法运算
    • 如果其中一个操作数是NaN的话，那么结果就是NaN

  2. String Null Undefined Boolean

    • 左右两侧任意一个操作数是以上类型，那么会使用Number()根据对应规则转为数字类型，然后再进行计算

    • 如果其中转换结果为NaN，那么结果就是NaN

console.log(1+undefined); // NaN
console.log(1+null);  // 1
console.log(1+true); // 2
console.log(1+false); // 1
console.log('1'+ 23); // 123
console.log('1'+2+3); // 123  : '1'+Strin(2) = '12' '12'+String(3) = '123'
console.log(10 - NaN); // NaN
console.log(null - '10'); // -10 :相当于 Number(null) - Number('10')
console.log(true + null); // 1

二、乘性操作符

乘性操作符包括：乘法操作符、除法操作符、取模操作符

乘法操作符

  1. Number

    • 左右两侧都是数值，则进行正常的乘法
    • 其中一个操作数是NaN，则结果就是NaN

  2. String Null Undefined Boolean

    • 左右两侧任意一个操作数是以上类型，那么会使用Number()根据对应规则转为数字类型，然后再进行计算如果其中转换结果为NaN，那么结果就是NaN

除法操作符

  1. Number

    • 左右两侧都是数值，则进行正常的除法
    • 其中一个操作数是NaN，则结果就是NaN

  2. String Null Undefined Boolean

    • 左右两侧任意一个操作数是以上类型，那么会使用Number()根据对应规则转为数字类型，然后再进行计算如果其中转换结果为NaN，那么结果就是NaN

  3. 如果非0有限数除以0，则结果返回Infinity或-Infinity

  4. 如果0/0 则返回 NaN

取模操作符

  1. Number

    • 左右两侧都是数值，则进行正常的除法
    • 其中一个操作数是NaN，则结果就是NaN

  2. String Null Undefined Boolean

    • 以上类型则根据对应规则转换为数值再进行计算

  3. 如果除数为 0 则 结果是 NaN

console.log( 10 / 0); // Infinity
console.log( 10 / -0); // -Infinity
console.log( 0 / 0 ); //NaN

console.log(10 % 0 ); // NaN
console.log( 10 % -0); // NaN
console.log(0 % 0); // NaN

三、一元操作符

只能操作一个值的操作符：分为一元加运算符和一元减运算符

一元加运算符

  1. 如果操作数是Number则正号放在前面，完全没有影响
  2. 如果操作数是其他类型，则根据对应规则转换为Number类型

一元减运算符

  1. 如果操作数是数值则会在数值前添加负号
  2. 如果操作数是其他类型，则根据对应规则转换为-Number类型，要注意如果转换为了NaN则还是NaN，不是-NaN（对NaN使用正号或者负号，其结果都是NaN）
console.log( +true ); // 1
console.log( +null ); // 0
console.log( +undefined ); // NaN
console.log( +'a'); // NaN

console.log( -undefined ); NaN
console.log( -false ); -0;
console.log( -'123' ); -123;

// 巧妙利用隐式类型转换来计算字符串与数值的结果
let str = '123';
let result = +str + 3;
console.log(result); // 126

四、递增运算符&递减运算符

分为前置型和后置型

  1. 如果单独对一个操作数使用则前置和后置结果一样

  2. 如果参与了语句输出或其他运算，那么前置和后置不一样

    • 前置型，变量的值都是在语句被求值前发生改变（自身先增加/减少，然后再参与语句的输出与计算）
    • 后置型，变量的值都是在语句被求值后发生改变（先参与运算或语句输出，在自身增加/减少）
let num1 = 0;
let num2 = 0;

// 情况1 单独对一个操作数使用，输出的结果一样
num1++;
++num2;
console.log('num1', num1); // 1
console.log('num2', num2);  // 1

 // 情况2 
 console.log('num1', num1++); //0
 console.log('num2', ++num2); //1

// 情况3
let result1 = num1++ + 2;
let reuslt2 = ++num2 + 2;
console.log('result1', result1); //2
console.log('result2', reuslt2); //3
console.log('num1', num1); // 1
console.log('num2', num2); // 1

五、赋值运算符

包括: = 、+=、 -= 、*=、/=、%=

// 赋值运算符中的隐式类型转换：
let num = 10;
console.log(num += '5'); // 105 (存在字符串则会把10变为 ‘10’)

六、比较运算符

包括关系操作符：

有 >、<、 >= 、<=

和相等操作符：

有 !=(不等)、 ==(相等) 、 ===(全等) 、 !==（全不等）

最终返回的结果是一个布尔值

关系操作符

  1. 左右两侧都是数值，就比较数值大小
  2. 不是数字的情况：

  • 字符串的比较

    字符串比较的是字符对应的字符编码的大小，字符串的比较是逐位比较的

  • 比较中出现了NaN，那么结果就是false

  • 比较中出现了null、undefined、true、false会根据规则进行相应的转换

相等操作符

1 相等

比较两个操作数之间是否相等，在比较的时候会进行隐式类型转换

  1. NaN不等于任何类型的数值，包括自己本身，所以一定返回false
  2. 如果都是String类型，则比较字符编码值，如果完全一致才返回true
  1. 如果都是Number类型，则比较数值是否相等
  2. 如果都是Object类型，则比较地址值是否一致
  1. null == undefined返回true
  2. 如果一侧是String，一侧是Number，会将String转为Number(如果不是数值的字符串则会转为NaN)再进行比较
  1. 如果一侧是Boolean，则把布尔值转换成Number类型后进行比较

2 全等

全等会从以下两点进行考虑：

  • 值是否相等

  • 类型是否相等

  1. 如果类型不同，直接返回false
  2. 一旦出现NaN，直接返回false
  1. 当类型一致的情况下，比较值是否相同，如果不同返回false，相同返回true

七、逻辑运算符

包括：&&、 ||、 ！

&&

作用在两个条件之间返回值不一定是布尔值，返回布尔值是因为存在if后面的小括号（这个小括号存在隐式转换，会把小括号里面的值转换为Boolean值）

会看左侧操作数，并进行隐式类型转换：

  1. 当第一个条件转换为Boolean为false，返回左侧操作数；
  2. 当第一个条件转换为Boolean为true，返回右侧操作数；
let num1 = 0 && 3;
let num2 = 1 && 3;
console.log(num1); // 0
console.log(num2); // 3

console.log(undefined && 2); // undefined
console.log(false && 1); // false

||

会看左侧操作数，并进行隐式类型转换：

  1. 当第一个条件转换为Boolean为true，返回左侧操作数；
  2. 当第一个条件转换为Boolean为false，返回右侧操作数；
console.log(1 || 2); // 1
console.log(0 || 3); //3

!

取反，只作用于一个操作数，得到的结果一定是布尔值

如果操作数不是布尔值。会先进行隐式类型转换为布尔值再进行取反

  1. 如果操作数是Object，结果返回false，所有对象均为true
  2. 如果操作数是一个非空字符串，则结果返回false
  1. 如果操作数是0或者NaN，则结果是true
  2. 如果操作数是非0数值，则结果是false
  1. 如果是null或undefined，则结果是true
console.log(!0); // true

let num = 1;
console.log(!!num);  // true

技巧：

可利用!!双重取反来对一个操作数进行布尔值转换

avatar
文章
阅读
粉丝