zoukankan      html  css  js  c++  java
  • javascript应该注意的小case操作符

        

          javascript做为一个脚本语言,像它的前辈一样提供了操作数据值的操作符,如算术操作符、位操作符、关系操作符和相等操作符。你可以按照其它常用语言如C、C#等一样来使用js的操作符,但是远不如此,它的使用对象不仅限于特定类型,可以对任何类型使用,同时在处理时有着很大的不同。

    算术操作符

          对数字类型执行++、—、+、-操作不用多说了,js可以对其它任何类型执行这个操作,让我们看几个实例:

    先声明一些变量,这些变量是这篇文章中的例子都会用到的:

           var a = 123;
           var b = "123";
           var c = "123d";
           var e = true;
           var f = false;
           var g = {};
    
           function h_f() { };
           h_f.prototype.valueOf = function () { return 123; };
           h_f.prototype.toString = function () { return 456; };
           var h = new h_f();
    
           var i_f = function(){};
           i_f.prototype.toString = function () { return 123; };
           var i = new i_f();
    

    然后执行如下操作:

           a++;b++;c++;e++;f++;g++;h++;i++;
    
           console.log(a + "|" + b + "|" + c + "|" + e + "|" + f + "|" + g + "|" + h + "|" + i);

          在浏览器的控制台,可以看到结果:124|124|NaN|2|1|NaN|124|124,这样我们可以得出一个简单的结论,js会自动为操作数调用Number()转换先将操作数转化为数值,然后再执行操作。Number()转换的规则,请见javascript应该注意的小case--数据类型

          其实js只是在执行这样的数值操作如++、—、一元+、一元和二元-、*等时,对操作数执行的Number()的转换操作,但是对于二元的相加操作+却不是:如果任何一个值为字符串,js会自动为另一个操作数执行toString()的操作,然后执行字符串拼接。

    布尔操作符(!、&&、||)

         其实我们大部分见到它们时候是和逻辑判断语句一块的,如if(condition1 && !condition2 || condition3)这样的语句,在javascript应该注意的小case--数据类型中我们知道js为默认为这样的语句执行Boolean()的操作,但是我们现在主要讨论的是如下面例子的操作。

    console.log(!a + "|" + !b + "|" + !c + "|" + !e + "|" + !f + "|" + !g + "|" + !h + "|" + !i);

         其中变量还是上个例子的,得到如下结果:false|false|false|false|true|false|false|false,如果这里我们还可以认为是对操作符执行Boolean()操作之后再执行正常的逻辑非的操作,而对于&&、||却完全不是这样了。(通常我们会连用两个非操作,如!!a来模拟Boolean()转换)

    如下面的例子:

           console.log(e && a);
    
           console.log(f && a);
    
           console.log(b && a);
    
           console.log(undefined && a);
    
           console.log(null && a);

           我们得到的结果是123、false、123、undefined、null。有了这样的结果,我们似乎可以得出其中的规则:第一个操作数的Boolean()转换为true,就返回第二个操作数,如果为false,返回第一个操作数。其实&&操作是短路操作,只有第一个操作数转换为true时,才会去处理第二个操作数并返回结果;如果为false,直接返回第一个操作数。

          而 || 操作数与 && 相反,只有当第一个操作数转换的值为false时,才会处理第二个操作数,并返回第二个操作结果。

          事实上我们可以看到很多地方的应用,如var obj = otherObj || {};这样的操作就很好理解了,如果otherObj存在,obj就获得了引用;如果不存在,相当于一个新对象。总是能保证obj不为null.

    关系操作符(>、>=、<、<=)

          有了以上的基础,对于js这样的操作,可能就有些心理准备,不会那么突兀了。

          规则如下:如果都是数字类型,直接比较;如果都是字符串,刚会比较对应位的字符编码值;如果有一个是数字类型,则把另一个转换为数值类型;如果是对象,先调用valueOf方法,如果没有些方法调用toString方法,再执行以上规则;如果有一个是布尔型 ,则将布尔型先转为数值类型再比较。

    相等操作符(==、!=、===、!==)

    还是先看例子:

           console.log(55 == "55");

    你能猜测下结果吗?false??

    再看下面的例子:

           console.log(55 == "55");
    
           console.log(55 === "55");

    或许到这里,你已经能得猜测出答案了:true、false。

           先说全等操作===、!==,这个操作就是比较原始值,不对值进行任何的转换,这个是如此的确定,因些推荐大家使用全等的操作,避免一些诡异的bug。

           再来说==、!=,他们会对操作数执行强制转换,然后再比较:如果是操作数是布尔值,把true转为1、false转为0;如果一个是字符串,一个是数字,则将字符串转为数字再比较;如果一个是对象,另一个不是,则调用对象的valueOf之后,再按以上的规则比较。

           在进行以上的比较之前,有一些特殊会被执行:null与undefined相等比较返回true;null、undefined不会进行任何的类型转换;NaN不与任何值相等,甚至是自己;如果两个都是对象,只有两个操作数是同一个对象时才相等。

         本文并没有详细的介绍js所有的操作符,只是就js在操作符上与其它常用语言不一样的独特之处列举一二,了解了这些,至少不会让我们在读一些开源框架js代码时一头雾水,并且可以让我们的js代码更简洁、更安全(少出bug)。

  • 相关阅读:
    SceneBuilder 打不开 .fxml文件,只在任务栏显示
    JDK1.6 1.7 1.8 多版本windows安装 执行命令java -version 版本不变的问题
    新手根据菜鸟教程安装docker,从No package docker-io available开始遇到的坑...
    Linux安装mysql
    用Eclipse搭建ssh框架
    前端面试之vue相关的面试题
    前端面试之闭包理解
    HTML5新规范和CSS3新特性
    vue2.0项目创建之环境变量配置
    windows下SVN服务器搭建--VisualSVN与TortoiseSVN的配置安装
  • 原文地址:https://www.cnblogs.com/forcertain/p/2461735.html
Copyright © 2011-2022 走看看