最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 学习JavaScript红宝书(十二)——操作符(上)

    正文概述 掘金(程序员阿来)   2021-04-16   651

    操作符

    ECMA-262 描述了一组可用于操作数据值的操作符。

    一元操作符

    只操作一个值的操作符叫一元操作符(unary operator)。一元操作符是 ECMAScript 中最简单的操作符。

    递增/递减操作符

    递增和递减操作符是一种一元操作符,它直接照搬自 C 语言。根据前缀和后缀两个版本,它一共有四种情况:

    ++age; // 前缀递增版
    --age; // 前缀递减版
    age++; // 后缀递增版
    age--; // 后缀递减版
    

    使用前缀版时,变量的值会在语句被求值前就改变。在计算机科学中,这通常被称为具有副作用。 比如:

    newAge = ++age + 1;
    

    等价于

    age = age + 1;
    newAge = age + 1;
    

    而后缀版在计算结束后,再进行递增/递减操作。

    newAge = age++ + 1;
    

    等价于

    newAge = age + 1;
    age = age + 1;
    

    因此前后两种方式得到的 newAge 值是不一样的。要注意这种差别,并根据情况思考应该使用前缀版还是后缀版。

    这 4 个操作符可以作用于任何值。遵循如下规则:

    1. 字符串,如果是有效的数值形式,则转换为数值再应用改变。变量类型从字符串变成数值。
    2. 字符串,如果不是有效的数值形式,则将变量的值设置为 NaN 。变量类型从字符串变成数值。
    3. 布尔值,如果是 false,则转换为 0 再应用改变。变量类型从布尔值变成数值。
    4. 布尔值,如果是 true,则转换为 1 再应用改变。变量类型从布尔值变成数值。
    5. 浮点值,加 1 或减 1。
    6. 对象,则调用其 valueOf()方法取得可以操作的值。对得到的值应用上述规则。如果是 NaN,则调用 toString()并再次应用其他规则。变量类型从对象变成数值。

    通过例子来加深记忆:

    let s1 = "2";
    let s2 = "z";
    let b = false;
    let f = 1.1;
    let o = {
      valueOf() {
        return -1;
      },
    };
    s1++; // 值变成数值3
    s2++; // 值变成NaN
    b++; // 值变成数值1
    f--; // 值变成0.10000000000000009(因为浮点数不精确)
    o--; // 值变成-2
    

    一元加/减

    如果将一元加应用到非数值,则会执行与使用 Number()转型函数一样的类型转换,之后再赋值正或负。

    布尔值 false 和 true 转换为 0 和 1,再赋正负。

    字符串如果可以转换成数值就附上正负,如果不能就得到NaN。

    对象会调用它们的 valueOf()和/或 toString()方法以得到可以转换的值。

    来看一下下面的例子:

    let s1 = "01";
    let s2 = "1.1";
    let s3 = "z";
    let b = false;
    let f = 1.1;
    let o = {
      valueOf() {
        return -1;
      },
    };
    s1 = +s1; // 值变成数值1
    s2 = +s2; // 值变成数值1.1
    s3 = +s3; // 值变成NaN
    b = +b; // 值变成数值0
    f = +f; // 不变,还是1.1
    o = +o; // 值变成数值-1
    

    减号则会把数值变成负数:

    let s1 = "01";
    let s2 = "1.1";
    let s3 = "z";
    let b = false;
    let f = 1.1;
    let o = {
      valueOf() {
        return -1;
      },
    };
    s1 = -s1; // 值变成数值-1
    s2 = -s2; // 值变成数值-1.1
    s3 = -s3; // 值变成NaN
    b = -b; // 值变成数值0
    f = -f; // 变成-1.1
    o = -o; // 值变成数值1
    

    加性操作符

    加法操作符

    加法操作符(+)用于求两个数的和:

    let result = 1 + 2;

    如果两个操作数都是数值:

    1. 如果有任一操作数是 NaN,则返回 NaN;

    2. 如果是 Infinity 加 Infinity,则返回 Infinity;

    3. 如果是-Infinity 加-Infinity,则返回-Infinity;

    4. 如果是 Infinity 加-Infinity,则返回 NaN;

    5. 如果是+0 加+0,则返回+0;

    6. 如果是-0 加+0,则返回+0;

    7. 如果是-0 加-0,则返回-0。

    如果有一个操作数是字符串:

    1. 另一个也是字符串,则按先后顺序拼接两个字符串;

    2. 另一个操作数是对象、数值或布尔值,则调用它们的 toString()方法以获取字符串,然后拼接。对于 undefined 和 null,则调用 String()函数,分别获取"undefined"和"null"。

    比如:

    let result2 = 5 + "5"; // 一个数值和一个字符串
    console.log(result2); // "55"
    

    减法操作符

    一般用于数值相减。

    减法操作符的特殊情况和加法有些不同:

    1. 如果有任一操作数是 NaN,则返回 NaN。
    2. 如果是 Infinity 减 Infinity,则返回 NaN。
    3. 如果是-Infinity 减-Infinity,则返回 NaN。
    4. 如果是 Infinity 减-Infinity,则返回 Infinity。
    5. 如果是-Infinity 减 Infinity,则返回-Infinity。
    6. 如果是+0 减+0,则返回+0。
    7. 如果是+0 减-0,则返回-0。
    8. 如果是-0 减-0,则返回+0。
    9. 如果有任一操作数是字符串、布尔值、null 或 undefined,则先在后台使用 Number()将其转换为数值,然后再根据前面的规则执行数学运算。如果转换结果是 NaN,则减法计算的结果是 NaN。
    10. 如果有任一操作数是对象,则调用其 valueOf()方法取得表示它的数值。如果该值是 NaN,则减法计算的结果是 NaN。如果对象没有 valueOf()方法,则调用其 toString()方法,然后再将得到的字符串转换为数值。

    可以看一下下面的例子:

    let result1 = 5 - true; // true 被转换为1,所以结果是4
    let result2 = NaN - 1; // NaN
    let result3 = 5 - 3; // 2
    let result4 = 5 - ""; // ""被转换为0,所以结果是5
    let result5 = 5 - "2"; // "2"被转换为2,所以结果是3
    let result6 = 5 - null; // null 被转换为0,所以结果是5
    

    乘性操作符

    ECMAScript 定义了 3 个乘性操作符:乘法、除法和取模。如果乘性操作符有不是数值的操作数,则该操作数会被 Number()转型函数转换为数值。

    乘法操作符

    乘法操作符由一个星号(*)表示,可以用于计算两个数值的乘积:

    let result = 34 * 56;
    

    当遇到特殊值时:

    1. 如果有任一操作数是 NaN,则返回 NaN。
    2. 如果是 Infinity 乘以 0,则返回 NaN。
    3. 如果是 Infinity 乘以非 0 的有限数值,则根据第二个操作数的符号返回 Infinity 或-Infinity。
    4. 如果是 Infinity 乘以 Infinity,则返回 Infinity。
    5. 如果有不是数值的操作数,则先在后台用 Number()将其转换为数值,然后再应用上述规则。

    除法操作符

    除法操作符由一个斜杠(/)表示,用于计算第一个操作数除以第二个操作数的商:

    let result = 66 / 11;
    

    当遇到特殊值时:

    1. 如果有任一操作数是 NaN,则返回 NaN。
    2. 如果是 Infinity 除以 Infinity,则返回 NaN。
    3. 如果是 0 除以 0,则返回 NaN。
    4. 如果是非 0 的有限值除以 0,则根据第一个操作数的符号返回 Infinity 或-Infinity。
    5. 如果是 Infinity 除以任何数值,则根据第二个操作数的符号返回 Infinity 或-Infinity。
    6. 如果有不是数值的操作数,则先在后台用 Number()函数将其转换为数值,然后再应用上述规则。

    取模操作符

    取模操作符,即取余数。由一个百分比符号(%)表示:

    let result = 26 % 5; // 等于1
    

    当遇到特殊值时:

    1. 如果被除数是无限值,除数是有限值,则返回 NaN。
    2. 如果被除数是有限值,除数是 0,则返回 NaN。
    3. 如果是 Infinity 除以 Infinity,则返回 NaN。
    4. 如果被除数是有限值,除数是无限值,则返回被除数。
    5. 如果被除数是 0,除数不是 0,则返回 0。
    6. 如果有不是数值的操作数,则先在后台用 Number()函数将其转换为数值,然后再应用上述规则。

    指数操作符

    ECMAScript 7 新增了指数操作符**,和 Math.pow()是一样的:

    console.log(Math.pow(3, 2); // 9
    console.log(3 ** 2); // 9
    console.log(Math.pow(16, 0.5); // 4
    console.log(16** 0.5); // 4
    

    指数操作符还可以用指数赋值操作符**=,该操作符执行指数运算和结果的赋值操作:

    let squared = 3;
    squared **= 2; // 9
    

    布尔操作符

    布尔操作符一共有 3 个:逻辑非、逻辑与和逻辑或。

    逻辑非

    逻辑非操作符由一个叹号(!)表示,可应用给 ECMAScript 中的任何值。它首先将操作数(任意数据类型)转换为布尔值,然后再对其取反。

    它遵循如下规则:

    1. 如果操作数是对象,则返回 false。
    2. 如果操作数是空字符串,则返回 true。
    3. 如果操作数是非空字符串,则返回 false。
    4. 如果操作数是数值 0,则返回 true。
    5. 如果操作数是非 0 数值(包括 Infinity),则返回 false。
    6. 如果操作数是 null,则返回 true。
    7. 如果操作数是 NaN,则返回 true。
    8. 如果操作数是 undefined,则返回 true。

    可以看下面的例子:

    console.log(!false); // true
    console.log(!"blue"); // false
    console.log(!0); // true
    console.log(!NaN); // true
    console.log(!""); // true
    console.log(!12345); // false
    

    同时使用两个叹号(!!),相当于调用了转型函数 Boolean():

    console.log(!!"blue"); // true
    console.log(!!0); // false
    console.log(!!NaN); // false
    console.log(!!""); // false
    console.log(!!12345); // true
    

    逻辑与

    逻辑与操作符由两个和号(&&)表示:

    let result = true && false;
    

    遵循数学真值表。 如果有操作数不是布尔值,则逻辑与并不一定会返回布尔值。它遵循如下规则:

    1. 如果第一个操作数是对象,则返回第二个操作数。
    2. 如果第二个操作数是对象,则只有第一个操作数求值为 true 才会返回该对象。
    3. 如果两个操作数都是对象,则返回第二个操作数。
    4. 如果有一个操作数是 null,则返回 null。
    5. 如果有一个操作数是 NaN,则返回 NaN。
    6. 如果有一个操作数是 undefined,则返回 undefined。

    逻辑与操作符是一种短路操作符,意思就是如果第一个操作数决定了结果,那么永远不会对第二个操作数求值。对逻辑与操作符来说,如果第一个操作数是 false,那么无论第二个操作数是什么值,结果也不可能等于 true。

    let found = true;
    let result = found && someUndeclaredVariable; // 这里会出错
    console.log(result); // 不会执行这一行
    

    因为第一个操作数是 true,所以会返回第二个对象。而 someUndeclaredVariable 是未声明的变量,所以这里会报错。

    当我们把第一个操作符改成 false:

    let found = false;
    let result = found && someUndeclaredVariable; // 不会出错
    console.log(result); // 会执行
    

    因为第一个操作数是 false,所以会直接返回 false。这个时候第二个变量会被无视,所以也就不会报错。

    逻辑或

    逻辑或操作符由两个管道符(||)表示

    let result = true || false;
    

    逻辑或也符合数学真值表的判定方法。

    遇到有操作数不是布尔值时,遵循如下规则:

    1. 如果第一个操作数是对象,则返回第一个操作数。
    2. 如果第一个操作数求值为 false,则返回第二个操作数。
    3. 如果两个操作数都是对象,则返回第一个操作数。
    4. 如果两个操作数都是 null,则返回 null。
    5. 如果两个操作数都是 NaN,则返回 NaN。
    6. 如果两个操作数都是 undefined,则返回 undefined。

    逻辑或操作符也具有短路的特性。只不过对逻辑或而言,第一个操作数求值为 true,第二个操作数就不会再被求值了。这里不再举例说明。

    基于这个特性,可以避免给变量赋值 null 或 undefined。比如:

    let myObject = preferredObject || backupObject;
    

    其中,preferredObject 变量包含首选的值,backupObject 变量包含备用的值。如果 preferredObject 不是 null,则它的值就会赋给 myObject;如果 preferredObject 是 null,则 backupObject 的值就会赋给 myObject。这种模式在 ECMAScript 代码中经常用于变量赋值。

    关系操作符

    关系操作符包括小于(<)、大于(>)、小于等于(<=)和大于等于(>=)。

    当两个变量都是数值时,按数学规则比较大小。

    当有不同数据类型时,按如下规则:

    1. 如果操作数都是字符串,则逐个比较字符串中对应字符的编码。
    2. 如果有任一操作数是数值,则将另一个操作数转换为数值,执行数值比较。
    3. 如果有任一操作数是对象,则调用其 valueOf()方法,取得结果后再根据前面的规则执行比较。
    4. 如果没有 valueOf()操作符,则调用 toString()方法,取得结果后再根据前面的规则执行比较。
    5. 如果有任一操作数是布尔值,则将其转换为数值再执行比较。

    在使用关系操作符比较两个字符串时,关系操作符会比较字符串中对应字符的编码。所以一般来说,“字母顺序靠后”的更大。但如果比较大小写字母,这个规则就不适用:

    let result = "Brick" < "alphabet"; // true
    

    在这里,字符串"Brick"被认为小于字符串"alphabet",因为字母 B 的编码是 66,字母 a 的编码是 97。所以要把他们都转成大写或小写再去比较才有意义:

    let result = "Brick".toLowerCase() < "alphabet".toLowerCase(); // false
    

    在比较两个数值字符串也是这样:

    let result = "23" < "3"; // true
    

    我们第一反映会觉得 23 大,但是因为是字符串,他们会比较“2”和“3”在编码里的数值。字符"2"的编码是 50,而字符"3"的编码是 51。所以后者更大。

    但是如果其中一个是数值,那么另一个会先被转换成数值再比较:

    let result = "23" < 3; // false
    

    当字符串不能转换成数值时。字符串首先会被转换为 NaN。而 NaN 和任何变量比较时都会返回 False。所以会有下面这样的神奇情况:

    let result = "a" < 3; // 因为"a"会转换为NaN,所以结果是false
    let result1 = NaN < 3; // false
    let result2 = NaN >= 3; // false
    

    起源地下载网 » 学习JavaScript红宝书(十二)——操作符(上)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元