JavaScript操作符的一些注意要点

头像
JS菌
    阅读 9 分钟
    1

    操作符

    在ECMA-262 中，描述了一组用于操作数据值的操作符，包括算术操作符（如加减符号）、位操作符、关系操作符和相等操作符。

    一元操作符

    智能操作一个值的操作符叫做一元操作符。

    递增和递减操作符

    此类操作符是借鉴于C 语言，有两个版本，一种是前置型，一种是后置型。

    前置型操作符

    在执行前置型操作符时，变量的值都是在语句被求值以前改变的。（副效应）如：

    var num1 = 10;
var num2 = 20;
var num3 = --num1 + num2;
var num4 = num1 + num2;
document.write(num3 + " " + num4); //29 29
//由于是前置型递减操作符,num3 在计算结果出来之前，num1 已经是9 了，所以num3 的计算结果就是29；同样的，由于计算num3 之后，num1 是9，所以num4 同样是29。
    后置型操作符

    区别就是符号放在变量的后面，以及操作符是在包含他们的语句求值之后才执行的。如：

    var num1 = 10;
var num2 = 20;
var num3 = num1-- + num2;
var num4 = num1 + num2;
document.write(num3 + " " + num4);//30 29
//由于是后置型递减操作符，num3 在计算结果出来之后，num1 才变成9，所以num3 的计算结果仍然是30；同样的，由于计算num3之后，num1才变成9，所以num4 则是29.

    应该注意的是，此类操作符对任何值都适用。它们不仅适用于整数，也适用于字符串、布尔值、浮点数值和对象。如：

    var a = "12";
var b = "abc";
var c = true;
var d = 0.123;
var object = {
    valueOf: function(){
        return 1;
    }
}
document.write(++a); //13
document.write(++b); //NaN
document.write(++c); //2
document.write(++d); //1.123
document.write(++object); //2

    一元加和减操作符

    此类操作符的作用与数学常识完全一样，不再详述。此类操作符主要用于基本的算术运算。

    位操作符

    ECMAScript 中的所有数值都是以IEE-754 64 位格式储存的，但位操作符并不直接操作64 位的值。而是先转换成32 位，操作之后再存储为64位。对于有符号的整数，32 位的前31 位用于表示整数的值。第32位用来表示数值的符号。0 为正，1 为负。这个表示符号的位就是符号位。

    那么在JavaScript 中如何将数值或字符串转换成二进制字符串呢？如下：

    var a = "18";
var numA = parseInt(a,10).toString(2);
document.write(numA); //10010

    按位非(NOT)

    由波浪线（~）表示。执行按位非就是返回数字的反码，就是操作数的负值-1。如：

    var a = "18";
var numA = parseInt(a,10).toString(2);
document.write(numA); //10010
document.write(~numA); //-10011
//这里，18 的二进制码就是10010，它的反码就是-10011

    转换二进制和十进制的方法如下：

    var a = "12";
var x = parseInt(a,10).toString(2);
document.write("这个数的二进制码是：" + x);
document.write("<br/>");

var y = ~x;
document.write("这个数的二进制反码是：" + y);
document.write("<br/>");

var b = parseInt(x,2).toString(10);
document.write("您输入的数字是：" + b);

/*
这个数的二进制码是：1100
这个数的二进制反码是：-1101
您输入的数字是：12
*/

    按位与（AND）

    用& 字号表示。简单的说就是按位与操作只在两个数值的对应位都是1 时才返回1，任何一位是0，结果都是0.如：

    var num1 = 25;
var num2 = 3;
document.write(num1 & num2) //1
//首先其底层操作实际上就是25 和3 的二进制码在对应位都是1 时才返回1，其他都是0，所以结果就是十进制1 的二进制码。

    按位或（OR）

    用| 竖线符号表示，简单的说就是有一个位是1 的情况下就返回1，而只有在两个位都是0 的情况下才返回0。如：

    var num1 = 25;
var num2 = 3;
document.write(num1 | num2) //27

    按位异或（XOR）

    用^ 插入符号表示，简单的说就是对应位上只有一个1 时才返回1，如果对应的两位都是1 或都是0，则返回0。如：

    var num1 = 25;
var num2 = 3;
document.write(num1 ^ num2) //26

    左移

    用<< 两个小于号来表示，这个操作符会将数值的所有位向左移动指定的位数。如：

    var num1 = 2;
var num2 = num1 << 5;
document.write(num2); //64

    有符号的右移

    用>> 两个大于号来表示，但是保留符号位！如：

    var num1 = -64;
var num2 = num1 >> 5;
document.write(num2); //2

    无符号的右移

    用>>> 三个大于号来表示，这样就没有办法保留符号位了！如：

    var num1 = 64;
var num2 = num1 >>> 5;
document.write(num2); //2
//对于正数来说，结果依然还是原来的结果（保留符号位）

var num1 = -64;
var num2 = num1 >>> 5;
document.write(num2); //134217726
//但是对于负数，结果就不同了（不保留符号位）

    布尔操作符

    主要用来执行if...else 等循环之类的语句。包括逻辑非（!）、逻辑与（&&）以及逻辑或（||）

    逻辑非

    用! 叹号表示。主要规则如下：

    • 如果操作数是对象，返回false；

    • 如果操作数是空字符串，返回true；

    • 如果操作数是数值0，返回true，非零（包括infinity），返回false；

    • 如果操作数是null、NaN、undefined，返回true；

    具体例子如下：

    var obj = {};
document.write(!obj); //false
var str = "";
document.write(!str); //true
var num = Infinity;
document.write(!num); //false
var thing = NaN;
document.write(!thing); //true

    逻辑与

    用&& 两个和号表示。主要规则如下：

    • 如果第一个操作数是对象，则返回第二个操作数；

    • 如果第一个操作数求值结果是true，且第二个操作数是对象，则返回第二个操作数；

    • 如果两个操作数都是对象，则返回第二个操作数；

    • 如果有一个操作数是null、NaN或者undefined，则返回null、NaN或undefined；

    具体例子如下：

    var obj1 = {};
var obj2 = {name:"-helloworld-"};
var result1 = (obj1 && 321);
document.write(result1); //321 第一个是true 的对象，返回第二个操作数
var result2 = (!obj1 && 321);
document.write(result2); //false 第一个是false，没有必要对321 求值
var result3 = (obj1 && obj2.name);
document.write(result3); //"-helloworld-" 第一个是true 的对象，返回第二个对象的操作数
var result4 = (321 && 33);
document.write(result4); //第一个为true，返回第二个操作数
var result5 = (321 && null);
document.write(result5); //第一个为true，返回null

    值得注意的是，如果第一个操作数能够决定结果，那么就不会对第二个操作数求值。如：

    var x = true;
var y = {name:"helloworld"};
var result = (x && y.name);
document.write(result); //"helloworld" 第一个操作数不能判定结果，要继续执行下一个操作数，才能执行document.write

var x = true;
var result = (x && z);
document.write(result); //由于z 没有被定义，这里会发生错误，不会执行document.write

var x = false;
var y = {name:"helloworld"};
var result = (x && y.name);
document.write(result); //false 第一个操作数能够判定结果，不需要执行下一个操作数，就可以直接执行document.write

var x = false;
var result = (x && z);
document.write(result); //false 第一个操作数能够判定结果，不需要执行下一个操作数，所以无论下一个操作数是否被定义，不会发生错误。都可以直接执行document.write

    逻辑或

    用|| 两个竖线符号表示。主要规则如下：

    • 如果第一个操作数是对象，则返回第一个操作符；

    • 如果第一个操作数的求值结果是false，则返回第二个操作数；

    • 如果两个操作数都是对象，则返回第一个操作数；

    • 如果两个操作数都是null、NaN或者undefined，则返回null、NaN或undefined；

    值得注意的是，如果第一个操作数的求值结果是true，就不会对第二个操作数求值了。如：

    var x = true;
document.write(x || z); //true 虽然这里并没有定义z 但是由于第一个操作数能够判定结果，则不需要继续对第二个操作符进行求值

var x = false;
document.write(x || z);
document.write("false"); //这里之所以不会返回false，是因为在第一个操作数判定不了结果的情况下，会对第二个操作数进行求值，但是第二个操作数未定义。所以会出现错误。

    另外，还需要注意的是，我们可以利用逻辑或的这一行为来避免为变量赋予null 或 undefined 值。例如：

    var str1 = "hello there!";
var str2 = null;
var str = str2 || str1;
document.write(str);
str2 = undefined;
var str = str2 || str1;
document.write(str);
//这样就能规避其中一个操作数是null 或者undefined，把第二个操作数作为后备值

    乘性操作符

    ECMAScript 定义了3个乘性操作符：乘法、除法和求模。

    乘法

    用* 星号表示该操作符。

    主要规则有：

    • 如果计算结果超过了表示范围，则会返回+/-Infinity；

    • 如果有一个操作数是NaN，则结果是NaN。

    • 如果是Infinity 与0 相乘，则结果是NaN。

    • 如果Infinity 与 Infinity 相乘，则结果是+/-Infinity；

    • 如果其中一个操作数不是数值，后台将会先用Number()对齐进行转换，然后按照上面的规则求值。

    具体例子：

    var result = (-Number.MAX_VALUE * Number.MAX_VALUE)
document.write(result) //-Infinity
result = (NaN * 321);
document.write(result) //NaN
result = (-Infinity * 0);
document.write(result) //NaN
result = (Infinity * -Infinity);
document.write(result) //=Infinity
result = (1 * "321");
document.write(result) //321
result = (1 * false);
document.write(result) //0

    除法

    用/ 斜线符号表示。

    主要规则如下：

    • 如果计算结果超过了表示范围，则会返回+/-Infinity；

    • 如果有一个操作数是NaN，则结果是NaN；

    • 如果是0 除以0，结果则是NaN；

    • 如果是非零的有限数被0 除，结果是+/-Infinity；

    • 如果是Infinity 被任何非零数值除，结果则是+/-Infinity；

    具体例子如下：

    var result = (Number.MAX_VALUE / Number.MIN_VALUE);
document.write(result) //Infinity
result = (NaN / Number.MIN_VALUE);
document.write(result) //NaN
result = (0 / 0);
document.write(result) //NaN
result = (-421 / 0);
document.write(result) //-Infinity
result = (-Infinity / 2);
document.write(result) //-Infinity

    求模

    用% 百分号表示，求模就是求余数。

    主要规则如下：

    • 如果被除数是无穷大，除数是有限大，则返回NaN；

    • 如果被除数是有限大，除数是0，则返回NaN；

    • Infinity 除以Infinity 结果是NaN；

    • 被除数是有限大，除数是无穷大，结果是除数；

    • 被除数如果是0，结果就是0；

    • 如果其中一个操作数不是数值，则后台先转换成数值再进行上述规则。

    具体例子如下：

    var result = (Infinity % 2);
document.write(result) //NaN
var result = (2 % 0);
document.write(result) //NaN
var result = (Infinity % Infinity);
document.write(result) //NaN
var result = (2 % Infinity);
document.write(result) //2
var result = (0 % 2);
document.write(result) //0

    加性操作符

    加法

    用+ 加号表示，规则如下：

    • 如果一个操作数是NaN，则结果是NaN；

    • 如果是Infinity 加-Infinity，结果是NaN；

    • 如果是Infinity 加Infinity，结果是Infinity；

    • 如果是-Infinity 加-Infinity，结果是-Infinity；

    • 如果是+0 加-0，结果是+0；

    • 如果是+0 加+0，结果是+0；

    • 如果是-0 加-0，结果是-0；

    • 如果两个操作数都是字符串，则拼接两个字符串；

    • 如果只有一个操作数是字符串，则将另一个转换成字符串再拼接起来；

    具体例子如下：

    var num1 = NaN;
var num2 = Infinity;
var result = num1 + num2;
document.write(result); //NaN
var num1 = Infinity;
var num2 = -Infinity;
var result = num1 + num2;
document.write(result); //NaN
var num1 = Infinity;
var num2 = Infinity;
var result = num1 + num2;
document.write(result); //Infinity;
var num1 = -Infinity;
var num2 = -Infinity;
var result = num1 + num2;
document.write(result); //-Infinity
var num1 = "hello ";
var num2 = "there";
var result = num1 + num2;
document.write(result); //"hello there"
var num1 = 1000;
var num2 = " there";
var result = num1 + num2;
document.write(result); //"1000 there"
var result_num = parseInt(result);
document.write(result_num);//可以证明result 是字符串

    值得注意的是，加性操作符在编程中的常见的错误：

    var num1 = 11;
var num2 = 100;
document.write("the result is " + num1 + num2); //"the result is 11100" 错误，num1 和num2 被拼接成字符串
document.write("the result is " + (num1 + num2)); //“the result is 111” 正确，括号内的为计算值

    减法

    用- 减号表示，规则如下：

    • 如果一个操作数是NaN，结果是NaN；

    • 如果Infinity 减Infinity，结果是NaN；

    • 如果-Infinity 减-Infinity，结果是NaN；

    • 如果Infinity 减-Infinity，结果是Infinity；

    • 如果-Infinity 减Infinity，结果是-Infinity；

    • 如果是+0 减+0，结果是+0；

    • 如果是+0 减-0，结果是-0；

    • 如果是-0 减-0，结果是+0；

    • 如果有一个操作数是字符串、布尔值、null 或undefined，则后台会先把它转换成数值；

    具体例子如下：

    document.write(3 - null); //3
document.write(NaN - true); //NaN
document.write(3 - ""); //3
document.write(3 - "1"); //2
document.write(Infinity - Infinity); //NaN
document.write(-Infinity - Infinity); //-Infinity

    关系操作符

    用< 小于、> 大于、<= 小于等于、>= 大于等于表示。规则是：

    • 如果两个操作数都是字符串，则比较两个字符串对应的字符编码值；

    • 如果一个操作数是数值，则将另一个操作数转换成一个数值再比较；

    • 如果一个操作数是数值，则将另一个操作数转换成一个数值，当不能转换成数值时，会当做NaN 进行比较，但是与NaN 进行比较的结果都是false；

    • 大写字母的字符编码全部小于小写字符编码；

    具体例子如下：

    document.write("Blackbarry" < "apple"); //true 大写字母字符编码小于小写字符编码
document.write("blackbarry" < "apple"); //false
document.write("10" < "3"); //true 两个都是字符串 所以比较的是字符编码
document.write("10" < 3); //false “10”字符串被转换成10 数值，比较数值大小
document.write("a" < 3); //false "a"字符串被转换成了NaN，任何操作数与NaN 比较都是false；

    相等操作符

    用== 表示相等、!= 不等、=== 全等、 !==不全等。

    相等和不等

    规则如下：

    • null 和undefined 是相等的

    • 如果一个操作数是NaN，相等则返回false，不等则返回true。如果两个操作符都是NaN，相等还是返回false，因为NaN 与NaN 不相等；

    • 如果两个操作数都是对象，则比较他们是不是同一个对象；

    具体例子如下：

    document.write(null == undefined); //true
document.write(null == NaN); //false
document.write(NaN == NaN); //false
document.write("NaN" == NaN); //false
document.write("null" == undefined); //false
document.write(0 == undefined); //false
document.write(0 != "0"); //false
document.write(0 != false); //false

    全等和不全等

    与相等和不等类似，例子如下：

    document.write(undefined === null); //false 两个是不同类型的值
document.write(undefined == null); //true 两个是不同类型的值 但相等 不全等
document.write("21" == 21); //true
document.write("21" === 21); //false

    千万注意null 和undefined 是相等但不全等

    条件操作符

    语法形式是：

    变量 = 条件 ？ true : false;

    举个例子：

    var num1 = 10;
var num2 = 30;
var num = (num1 > num2) ? num1 : num2;
document.write(num); //30 选择最大的那个赋值给变量并打印出来

    赋值操作符

    用= 等号来表示，另外，复合赋值操作还可以用复合赋值操作符来表示。如：

    
var x = 10;
x = x + 1;
document.write(x); //11
//上面这种可以写成下面这种
var x = 10;
x +=1;
document.write(x); //11
var x = 10;
x *=2;
document.write(x); //20

    其他还有：

    • (*=)

    • (/=)

    • (%=)

    • (+=)

    • (-=)

    • (<<=)

    • (>>=)

    • (>>>=)

    值得注意的是，使用上面这些并不能带来任何性能的提升，无非是省了几个字符

    逗号操作符

    逗号操作符可以在一条语句中执行多个操作，如：

    var num1 = 1,
num2 = 2,
num3 = 3;
document.write(num1 + num2 + num3) //6

    另外，逗号也可以用来赋值，逗号最后面的数值会被赋值到变量中。比如：

    var x = (1,2,3,4,5);
document.write(x); //5
var x = (1,2,3,4,5,);
document.write(x); //出现错误
    javascript
    JS菌
    6.4k 声望2k 粉丝
    « 上一篇
    JavaScript数据类型的一些注意要点
    下一篇 »
    JavaScript语句的一些注意要点

    引用和评论

    推荐阅读
    头像
    一个例子了解什么是桥接模式

    JS菌赞 3阅读 2.9k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.4k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新