运算符

Author Avatar
Ninefire 6月 08, 2018
  • 在其它设备中阅读本文章

运算符又称为操作符，通过运算符可以对一个或多个值进行运算，并获取运算结果。
比如：typeof就是一个运算符，可以获取一个字面量的类型，它会将字面量的类型以字符串的形式返回。

算术运算符

  • + 加法运算
  • - 减法运算
  • * 乘法运算
  • / 除法运算
  • % 取模运算
  • 对非Number类型的值进行运算时，会将其先转换为Number类型再进行运算。
  • 任何值与NaN进行运算结果都为NaN。
  • 如果对两个字符串进行加法操作，会将两个字符串进行拼接。
  • 任何值与字符串作加法运算，都会将其先转换为String再进行拼串。
    • 可以利用这一特点，将任意类型的数据类型转换为String，只需要为任意的数据+一个""空串，即可将其转换为String，这是一种隐式的类型转换，由浏览器自动完成，实际上也是调用了String()函数。
  • 任何值与字符串作-、*、/运算，都会将其先转换为Number再进行运算。
    • 可以利用这一特点作隐式的类型转换，通过为一个值- 0、* 1、/ 1来将其转换为Number。
result = 1 + 2 + "3"; //result为33

result = "1" + 2 + 3; //result为123

result = 2 * null; //result为0

result = 9 % 3; //9除以3余0，结果为0

result = 9 % 4; //9除以4余1，结果为1

一元运算符

  • + 正号
    正号不会对数值产生任何影响。
  • - 负号
    负号可以对数值进行负号的取反。
  • 对于非Number的值，它会将其先转换为Number，再进行运算。
    可以对其他的数据类型使用+正号运算，来将其转换为Number，原理和Number()相同。

自增和自减

  • ++ 自增
    通过自增可以使变量在自身的基础上增加1，并且原变量的值会立即改变。
    a++;相当于a = a + 1;
    • 表达式a++的值是自增前的值
    • 表达式++a的值是自增后的值
  • -- 自减
    通过自减可以使变量在自身的基础上减去1，并且原变量的值会立即改变。
    a--;相当于a = a - 1;
    • 表达式a--的值是自减前的值
    • 表达式--a的值是自减后的值
var a = 1;
a = a++;
console.log("a的值是" + a);

a的值是1

注意区分变量与表达式。

逻辑运算符

JS中提供了三种逻辑运算符，用来作逻辑判断。

Boolean的逻辑运算：

  • ! 非运算
    非运算就是对一个布尔值进行取反操作，true变false，false变true。
    • 如果对一个值进行两次非运算，它不会改变。
    • 如果对一个非布尔值进行非运算，则会将其转换为布尔值再运算。
      • 可以利用该特点，为任意数据类型作两次非运算，来将其转换为布尔值。
  • && 与运算
    可以对符号两侧的值进行与运算并返回结果。
    • 运算规则
      • 只要有一个false则返回false
      • 两个值都为true时才返回true

JS中的与运算是“短路的与”，当第一个值为false时，便不会再考虑第二个值。

  • || 或运算
    可以对符号两侧的值进行或运算并返回结果。
    • 运算规则
      • 只要有一个true则返回true
      • 两个值都为false时才返回false

JS中的或运算是“短路的或”，当第一个值为true时，便不会再考虑第二个值。

非Boolean的逻辑运算：

对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再进行运算，并且返回原值。

  • 与运算
    • 如果第一个值为true，则返回第二个值。
      例：var result = 5 && 6; 返回6
    • 如果第一个值为false，则返回第一个值。
      例：var result = NaN && 9; 返回NaN
  • 或运算
    • 如果第一个值为true，则返回第一个值。
      例：var result = 2 || NaN; 返回2
    • 如果第一个值为false，则返回第二个值。
      例：var result = "" || "hello" 返回"hello"

赋值运算符

  • =
    str = "I love you."
    可以将符号右侧的值赋值给符号左侧的变量。
  • +=
    a += 5;等价于a = a + 5;
  • -=
    a -= 5;等价于a = a - 5;
  • *=
    a *= 5;等价于a = a * 5;
  • /=
    a /= 5;等价于a = a / 5;
  • %=
    a -%= 5;等价于a = a % 5;

关系运算符

通过关系运算符可以比较两个值之间的大小关系，如果关系成立则返回true，如果关系不成立则返回false。

自动转换类型

Number的关系运算：

  • > 大于
    判断符号左侧的值是否大于右侧的值。
    关系成立则返回true，反之则返回false。
  • >= 大于或等于
    判断符号左侧的值是否大于或等于右侧的值。
    关系成立则返回true，反之则返回false。
  • < 小于
    判断符号左侧的值是否小于右侧的值。
    关系成立则返回true，反之则返回false。
  • <= 小于或等于
    判断符号左侧的值是否小于或等于右侧的值。
    关系成立则返回true，反之则返回false。
  • == 等于
    判断符号左侧的值是否等于右侧的值。
    关系成立则返回true，反之则返回false。
  • != 不等于
    判断符号左侧的值是否不等于右侧的值。
    关系成立则返回true，反之则返回false。

非Number的关系运算：

  • 对于非数值类型的值进行关系运算时，会将其先转换为Number再进行计算。
  • 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会从左至右按位分别比较字符的Unicode编码。
    因此可以用来对英文进行排序，但是比较中文时无任何意义。
    注意：在比较两个字符串型的数字时，一定要先手动转换类型。
  • 任何值与NaN进行关系运算，都返回false。
  • undefined衍生自null，因此这两个值作相等判断时返回true。
    console.log(undefined == null); 结果为true

不自动转换类型

  • === 全等
    判断符号两侧的值是否全等，不会自动做类型转换。
    关系成立则返回true，反之则返回false。
  • !== 不全等
    判断符号两侧的值是否不全等，不会自动做类型转换。
    关系成立则返回true，反之则返回false。

注意：

  • NaN不与任何值相等，包括它本身。
  • console.log(undefined === null); 结果为false
  • 可以使用isNaN()函数来判断一个值是否为NaN，若该值是NaN则返回true，反之则返回false。

条件运算符

也叫三元运算符或者三目运算符。

  • 语法：
    条件表达式?语句1:语句2;
  • 执行流程
    首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回结果；如果该值为false，则执行语句2，并返回结果。
var a = 10, b = 20, c = 30;
/** 获取a、b、c中的最大值 **/
var max = a > b ? a : b; //将a和b中的最大值赋值给max
max = max > c ? max : c; //将max和c中的最大值赋值给max

max = a > b ? a > c ? a : b > c ? b : c;

逗号运算符

使用,可以分割多个语句，一般可以在声明多个变量时使用，使用,运算符同时声明多个变量。

var a, b, c;
var x = 10, y = 20, z = 30;

运算符的优先级

与数学中一样，JavaScript的运算符也有优先级。

运算符的优先级：

  • . [] new
  • ()
  • ++ --
  • ! ~ +（单目） -（单目） typeof void delete
  • % * /
  • +（双目） -（双目）
  • << >> >>>
  • < <= > >=
  • == !== ===
  • &
  • ^
  • |
  • &&
  • ||
  • ?:
  • = += -= *= /= %= <<= >>= >>>= &= ^= |=
  • ,

上表列出的优先级从上至下由高到低，同一行优先级相同。

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/JavaScript.basics/07.html