美文网首页
2019-07-31ECMAScript 运算符(一)

2019-07-31ECMAScript 运算符(一)

作者: 啊_6424 | 来源:发表于2019-08-01 14:13 被阅读0次

ECMAScript 运算符

运算符也叫操作符,通过运算符可以对一个或者多个值进行运算,并返回运算结果。前面用到的typeof就是一个运算符。
运算符不会直接修改原变量,而是返回一个新数据——运算结果。
我们学习运算符,主要是学习运算符的运算规则和结合性
有一类运算符叫做算术运算符,包括:+-*/%

一元运算符

一元运算符指只需要一个操作数

typeof 运算符

获取操作数的类型,以字符串的形式返回


图片.png

+(一元加法),区别于加号;-(一元减法),区别于减号

一元加法:不会对数字有任何影响;对于其他类型会转换为Number类型。
一元减法:会对数字的符号取反,正号变为负号,负号变为正号;对于其他类型会转换为Number类型,并且求负。

运算规则:

  • 对于不是Number类型的操作数,先转换为Number类型
    /**
     * 一元运算符中的 + 和 -
     */
    console.log(+ "1234.5");  //1234.5
    console.log(- "true");  //NaN
    console.log(+ true);  // 1
    console.log(- false); //-0
    console.log(+ - 1);  //-1
    console.log(- - 1);  //1

另外:我们可以通过 + 号运算符进行某些数据类型的转换。

    console.log(1 + "2" + 3);  //123
    console.log(1 + + "2" + 3); //6
    console.log(+ null);  //0
    console.log(+ false);  //0

++(自增)或者 --(自减)

自增:通过自增运算符可以使变量在自身的基础上增加1
自减:通过自减运算符可以使变量在自身的基础上减少1
我们的一个运算操作又称为表达式,它是对某些运算数,即变量值进行操作后返回了一个数值,即是表达式的值。所以,我们总是会再把表达式的值赋值给原变量。

图片.png

现在,若是对变量使用自增或者自减这两种操作符的话,不需再给原变量赋值就改变了原变量!


无需再赋值

自增分为两种,前缀自增和后缀自增:++a ,a++(自减类似),但是他们是有些不同的!

    /**
     * 区别前缀自增或者后缀自增
     */
    var a = 1;
    console.log(a ++);  //1
    console.log(a);  //2
    console.log(++ a);  //3
    console.log(a);  //3

前缀和后缀规律总结如下:

  • 都会立即使原变量的值自增或者自减1,对于原变量来说没有区别。
  • 后缀自增或者自减表达式的值是自增或者自减之前的变量的值
    后缀表达式先返回变量的值,再对变量进行操作。

位运算符

逻辑运算符:!(NOT)、&&(AND) 和 ||( OR)

不会改变原变量,需要最后手动赋值给原变量。
Boolean 运算符非常重要,它使得程序语言得以正常运行。
集合性:左结合
我们先来回忆一下,其他数据类型转换为Boolean类型:
在js逻辑运算中,0、NaN、空字符串、null、false、undefined都会判为false,其他都为true。

可以用来对一个运算数进行逻辑非运算,返回true或者false。
操作数:一个

运算规则:

  • 对于不是Boolean类型的操作数,先进行Boolean类型转换
  • 变量为true,返回的结果就是false
  • 变量为false,返回的结果就是true
    var a = 0;
    var b = "0";
    var c = "";
    var d = undefined;
    var e = true;
    e = !e
    console.log(!a);  //true
    console.log(!b);  //false
    console.log(!c);  //true
    console.log(!!d);  //false
    console.log(!e);  //true
    console.log(e);  //false

我们可以通过对一个非Boolean类型的值取两次非运算来转换为Boolean类型。

&& 与

运算数:两个
对符号两边的运算数进行与操作,返回相应的值,返回的不一定是Boolean类型。

运算规则:

  • 只要“&&”前面的运算数转换为Boolean类型为false,返回“&&”前面的原值。
  • 只要“&&”前面的运算数转换为Boolean类型为true,返回“&&”后面的原值。
    console.log(new Object() && true , true && {id:"2"});  //true  {id: "2"}
    console.log(true && true, true && false, false && false);  //true false, false
    console.log(null && true ,undefined && false);  //null undefined
    console.log("false" && true, "  " && false, "0" && true);  //true , false ,true
    console.log("" && false, "" && true);  //两个空格
    console.log(0 && true, 1 && true, NaN && false, false && NaN)  //o true NaN false
    console.log(1 && new Object() && 6);  //6
    true && alert("我会被弹出来");
    false && alert("我不会被弹出来");

|| 或

运算数:两个

  • 只要“||”前面的运算数转换为Boolean类型为false,返回“||”后面的原值。
  • 只要“||”前面的运算数转换为Boolean类型为true,返回“||”前面的原值。

总结:真前假后

tips:
在实际开发中,可以通过合理使用&&或者||来规避一些潜在的由于参数数据类型引起的错误(主要指undefined)
if(pattern && pattern.toLowerCase() === "yyyy-mm-dd"){}
var list = JSON.parse(localStorage.getItem("cmts") || "[]");

乘性运算符:* (乘法),/ (除法),%(取模)

二元运算符
乘法,除法好理解;取模即是取余运算,返回的是余数

* 运算规则

  • 对于不是Number类型的运算数,会先转换为Number。
  • 一般的数字就执行常规的乘法运算,一些特殊数字返回特殊结果。
  • 如果结果太大或太小,那么生成的结果是 Infinity 或 -Infinity。
  • 如果某个运算数是 NaN,结果为 NaN。
  • Infinity 乘以 0,结果为 NaN。
  • Infinity 乘以 0 以外的任何数字,结果为 Infinity 或 -Infinity。
  • Infinity 乘以 Infinity,结果为 Infinity。
    console.log("10" * "1.1");  //11
    console.log("10" * "" * "   ");  //0
    console.log(10 * true);  //10
    console.log(10 * "true");  //NaN
    console.log(10 * NaN);  //NaN
    console.log(10 * null);  //0
    console.log(10 * undefined);  //NaN

/ 运算规则

  • 对于不是Number类型的运算数,会先转换为Number。
  • 一般的数字就执行常规的除法运算,一些特殊数字返回特殊结果。
  • 如果结果太大或太小,那么生成的结果是 Infinity 或 -Infinity。
  • 如果某个运算数是 NaN,结果为 NaN。
  • Infinity 被 Infinity 除,结果为 NaN。
  • Infinity 被任何数字除,结果为 Infinity。
  • 0 除一个任何非无穷大的数字,结果为 NaN。
  • Infinity 被 0 以外的任何数字除,结果为 Infinity 或 -Infinity。
    console.log(10 / "0");  //Infinity
    console.log(null / 1);  //0
    console.log("10" / 1);  //10
    console.log(10 / true);  //10

% 运算规则

  • 对于不是Number类型的运算数,会先转换为Number。
  • 一般的数字就执行常规的除法运算,一些特殊数字返回特殊结果。
  • 如果被除数是 Infinity,或除数是 0,结果为 NaN。
  • Infinity 被 Infinity 除,结果为 NaN。
  • 如果除数是无穷大的数,结果为被除数。
  • 如果被除数为 0,结果为 0。
    console.log(10 % "0");  //NaN
    console.log(null % 3);  //0
    console.log("10" % 3);  //1
    console.log("re" % 3);  //NaN
    console.log(10 % true);  //0

加性运算符: + -

二元运算符
+ 与 - 类似,主要来关注 + ,因为开发中经常用到它。

+ 运算规则:

  • "+"号的两边有一个操作数是字符串类型时,"+"变为字符串连接符
    另一个非字符串类型(Number,Boolean,Null,Undefined)(Object以后讨论),会先被转换为字符串,然后执行字符串拼接的操作。
  • “+”号两边的运算数数都不是String类型的话(Number,Boolean,Null,Undefined)(Object以后讨论),会被当成数字参与计算,不是Number的先转换为Number类型。
  • 一般的数字就执行常规的加法运算,一些特殊数字返回特殊结果
  • “+”号两边的某个运算数是 NaN,那么结果为 NaN。
  • -Infinity 加 -Infinity,结果为 -Infinity。
  • Infinity 加 -Infinity,结果为 NaN。
  • +0 加 +0,结果为 +0。
  • -0 加 +0,结果为 +0。
  • -0 加 -0,结果为 -0。

- 运算规则:

先回忆一下,哪些数据可以正确的转换为Number。
1.空字符或者是全是空格的字符串串转换为0
2.纯数字的字符串转换为对应数字
3.非纯数字的字符串转为NaN
4.true转换为1,false转换为0
5.null转为0,undefined:转为NaN
我们来一一测试:

    console.log("10" - "1.1");  //8.9
    console.log("10" - "" - "   " - true);  //9
    console.log(10 - "true");  //NaN
    console.log(10 - NaN);  //NaN
    console.log(10- null);  //10
    console.log(10 - undefined);  //NaN
  • 对于不是Number类型的运算数,会先转换为Number。
  • 一般的数字就执行常规的减法运算,一些特殊数字返回特殊结果
  • 某个运算数是 NaN,那么结果为 NaN。
  • Infinity 减 Infinity,结果为 NaN。
  • -Infinity 减 -Infinity,结果为 NaN。
  • Infinity 减 -Infinity,结果为 Infinity。
  • -Infinity 减 Infinity,结果为 -Infinity。
  • +0 减 +0,结果为 +0。
  • -0 减 -0,结果为 -0。
  • +0 减 -0,结果为 +0。

结合规则:左结合

例如:10 + 1 + "1" = 111
先计算 10 + 1 = 11
再计算11 + “1” ,因为有一个操作数为String类型,所以+变为了字符串的拼接,返回的结果为111

例子:

    /**
     * 加法运算符 +
     */
    console.log(10+ 10 + 10.1 + 10.2);  //40.3
    console.log(true + false + 10);  // 11
    console.log(10 + "1" + "r");  //  "101r"
    console.log(10 + 1 + "1");  //  "111"
    console.log("1" + 10);  //  "110"
    console.log(0.1 + 0.2);  //0.30000000000000004
    console.log(null + 0);  //0
    console.log(0 + NaN);  //NaN
    console.log("1" + NaN);  // "1NaN"
    console.log(true + "q");  // "trueq"

关系运算符

等性运算符

条件运算符

赋值运算符

逗号运算符

相关文章

  • 2019-07-31ECMAScript 运算符(一)

    ECMAScript 运算符 运算符也叫操作符,通过运算符可以对一个或者多个值进行运算,并返回运算结果。前面用到的...

  • 2018年6月13日【Python学习笔记】

    一、运算符 运算符:算数运算符、比较运算符、赋值运算符、逻辑运算符 1.比较运算符:>、<、>=、<=、==、!=...

  • 12-26运算符与字串符

    一.运算符 运算符:数学运算符、比较运算符、逻辑运算符、赋值运算符、位运算符。 1. 数学运算符 + , - , ...

  • Swift--运算符

    算数运算符 关系运算符 逻辑运算符 位运算符 其他运算符 算数运算符 算数运算符有 一元运算符、 二元运算符、 算...

  • Python3 基础03-运算符

    算数运算符、比较运算符、赋值运算符、逻辑运算符、身份运算符、成员运算符 一、算数运算符 例子: 二、比较运算符 返...

  • Java 运算符和表达式

    一、Java 运算符分类: 算术运算符 关系运算符 位运算符 逻辑运算符 赋值运算符 其他运算符 1. 算术运算符...

  • javascript中的操作符

    算术运算符 一元运算符 逻辑运算符(布尔运算符) 关系运算符(比较运算符) 赋值运算符 运算符的优先级 做一做

  • 18-12-26 运算符与字符串

    一, 运算符类型:Python支持数学运算符,逻辑运算符, 比较运算符,赋值运算符,(位运算符) 数字运算符:+(...

  • Day_03-运算符和字符串

    一、python运算符 python支持哪些运算符? 数学运算符、比较运算符、逻辑运算符、赋值运算符(位运算符) ...

  • day 03.运算符和字符串 2018-12-26

    一、运算符 前期准备: Python支持:数学运算符、比较运算符、逻辑运算符、赋值运算符、(位运算符)注意:运算符...

网友评论

      本文标题:2019-07-31ECMAScript 运算符(一)

      本文链接:https://www.haomeiwen.com/subject/lhwtdctx.html