zoukankan      html  css  js  c++  java
  • 【重温基础】5.表达式和运算符

    本文是 重温基础 系列文章的第五篇。
    今日感受:家的意义。

    系列目录:

    本章节复习的是JS中的表达式和运算符,用好这些可以大大提高开发效率。

    一些基础:JavaScript中运算符有一元、二元和三元(条件)运算符,常见写法:

    // 操作数 + 运算符 + 操作数
    1 + 2 ;
    
    // 运算符 + 操作数
    x ++;
    
    // 操作数 + 运算符
    ++ x;
    

    本文将介绍一下几类运算符:

    • 赋值运算符(Assignment operators)
    • 比较运算符(Comparison operators)
    • 算数运算符(Arithmetic operators)
    • 位运算符(Bitwise operators)
    • 逻辑运算符(Logical operators)
    • 字符串运算符(String operators)
    • 条件(三元)运算符(Conditional operator)
    • 逗号运算符(Comma operator)
    • 一元运算符(Unary operators)
    • 关系运算符(Relational operator)

    1.赋值运算符

    最简单的赋值运算符是 = ,它将右边操作数的值赋值给左边的操作数,如 a = b
    另外常见的复合赋值运算符有如下:

    名称 简写的操作符 含义
    赋值 x = y x = y
    加法赋值 x += y x = x + y
    减法赋值 x -= y x = x - y
    乘法赋值 x *= y x = x * y
    除法赋值 x /= y x = x / y
    求余赋值 x %= y x = x % y
    求幂赋值 x **= y x = x ** y
    左移位赋值 x <<= y x = x << y
    右移位赋值 x >>= y x = x >> y
    无符号右移位赋值 x >>>= y x = x >>> y
    按位与赋值 x &= y x = x & y
    按位异或赋值 x ^= y x = x ^ y
    按位或赋值 x |= y x = x | y

    另外在ES6中,新增一类解构赋值

    let a = ['aa', 'bb', 'cc'];
    
    // 不使用解构赋值
    let a1 = a[0];
    let a2 = a[1];
    
    // 使用解构赋值
    let [a1, a2] = a;
    

    2.比较运算符

    通过比较两个比较对象来返回一个是否为真的布尔值,当两个比较的对象不是相同类型,JavaScript会尝试将两个比较对象转换成相同类型进行比较:

    let a = 10;
    let b = '12';
    a > b; // false
    

    常用的比较运算符有:

    名称 描述 返回true的示例
    等于 == 操作符两边数据相等 3 == '3'
    不等于 !== 操作符两边数据不相等 3 != '4'
    全等 === 操作符两边数据相等且类型相同 3 === 3
    不全等 !== 操作符两边数据不相等或类型不相同 3 !== '3'
    大于 > 判断操作符左边大于右边 3 > 2
    大于等于 >= 判断操作符左边大于或等于右边 3 >= 2
    小于 < 判断操作符左边小于右边 3 < 4
    小于等于 <= 判断操作符左边小于或等于右边 3 <= 4

    注意:
    =>不是运算符,而是ES6中新增的箭头函数的标记符号。

    3.算数运算符

    除了标准的加减乘除这些基本运算符,JavaScript还提供一些新的算数运算符:

    名称 描述 示例
    求余 % 返回相除之后的余数 11 % 5 返回 1
    自增 ++ ++N返回加一以后的值,N++返回原数值然后加一 ++3返回4,3++返回3
    自减 -- --N返回减一以后的值,N--返回原数值然后减一 --3返回2,3--返回3
    一元负值符 - 返回操作数的负数,若不是Number则试图转换为Number再取负值 -'-2' 返回2-2返回2
    一元正值符 + 若操作数不是Number类型则试图转换为Number +'-2' 返回-2+'2'返回2
    指数运算符 ** 计算底数a的指数n次方 2 ** 3 返回 8

    4.位运算符

    位运算符是在数字底层(即表示数字的 32 个数位)进行操作的。
    复习数字32位数的表示

    名称 描述 示例
    按位与 AND & ab的位表示中,每一个对应的位都为1则返回1,否则0 a & b
    按位或 OR | ab的位表示中,每一个对应的位,只要有一个为1则返回1,否则0 a | b
    按位异或 XOR ^ ab的位表示中,每一个对应的位,两个不相同则返回1,否则0 a ^ b
    按位非 NOT ~ 反转被操作数的位 ~a
    左移 shift << a的二进制串向左移动b位,右边移入0 a << b
    算术右移 >> 译注:算术右移左边空出的位是根据最高位是0和1来进行填充的 a >> b
    无符号右移(左边空出位用0填充) >>> a的二进制表示向右移动b位,丢弃被移出的所有位,并把左边空出的位都填充为0 a >>> b

    示例解释:
    1的二进制表示为 0 0 0 0 0 0 1
    3的二进制表示为 0 0 0 0 0 1 1

    • 1.按位与 &
    1 & 3 ; // 1
    1 | 3 ; // 3
    1 ^ 3 ; // 2
    ~1 ;    // -2
    1>>1  ; // 0
    

    使用案例

    • 1.16进制颜色值转RGB:
    function hexToRGB(hex){
        let h = hex.replace('#','0x'),
            r = h >> 16,
            g = h >> 8 & 0xff,
            b = h & 0xff;
        return `rgb(${r},${g},${b})`
    }
    hexToRGB('#eeddff');           // "rgb(238,221,255)"
    
    • 2.RGB转16进制:
    function RGBToHex(rgb){
        let r = rgb.split(/[^d]+/),
            c = r[1]<<16 | r[2]<<8 | r[3];
        return `#${c.toString(16)}`;
    }
    RGBToHex('rgb(238,221,255)'); // "#eeddff"
    

    5.逻辑运算符

    常用来处理布尔值,但是当处理非布尔值的时候,往往返回非布尔值:

    运算符 描述 示例
    逻辑与 && ab都能转为true则返回true 1+1==2 && 1-1==0 返回 true
    逻辑或 || ab其中一个能转为true则返回true,若都是false则返回false 1+1==3 || 1-1==0 返回 true
    逻辑非 ! a能转为true则返回false !1+1==2 返回 false

    注意: 能被转成false的值有null0NaN,空字符串""undefined
    几个示例:

    let a1 = true && true;    // true
    let a2 = true && false;   // false
    let a3 = false && true;   // false
    let a4 = false && false;  // false
    let a5 = false && "leo";  // false
    let a6 = true && "leo";   // "leo"
    let a7 = "leo" && "robin";// "robin"
    
    
    let b1 = true || true;    // true
    let b2 = true || false;   // true
    let b3 = false || true;   // true
    let b4 = false || false;  // false
    let b5 = false || "leo";  // "leo"
    let b6 = true || "leo";   // true
    let b7 = "leo" || "robin";// "leo"
    
    let c1 = !true;  // false
    let c2 = !false; // true
    let c3 = !"leo"; // false
    

    常常还使用短路求值

    false && anything ; // 被短路求值为false
    true || anything ;  // 被短路求值为true
    

    6.字符串运算符

    在拼接字符串中,由 + 来连接两个字符串:

    let a = 'leo ' + 'cute~'; // 'leo cute~'
    
    let b = 'ha';
    a += b; // "leo cute~ha"
    

    7.条件(三元)运算符

    可以使用三个操作数的运算符,运算结果为根据给定条件在两个值中取一个:

    // 当条件为真 则取 值1 ,否则取 值2
    // 条件 ? 值1 : 值2
    let a = 10;
    let b = a > 5 ? 'yes' : 'no'; // 'yes'
    

    8.逗号运算符

    对两个操作数求值并且返回最终操作数的值,通常用于for循环中,在每次循环时对多个变量进行更新:

    let a1 = [1,2,3,9,6,6];
    for(let i = 0,j = 5; i<=j; i++, j--){
        console.log(`i:${i},j:${j},i值:${a1[i]},j值:${a1[j]}`)
    }
    // i:0,j:5,i值:1,j值:6
    // i:1,j:4,i值:2,j值:6
    // i:2,j:3,i值:3,j值:9
    

    9.一元运算符

    一元操作符仅对应一个操作数。

    delete

    删除一个对象或一个对象的属性或者一个数组中某一个键值,返回一个布尔值,删除成功返回true,否则返回false:

    let a = {name : 'leo',age : '15'};
    delete a.name;  // true
    a;              // {age: "15"}
    
    let b = [1,3,5];
    delete b[0];    // true
    b;              // [empty, 3, 5]
    b[0];           // undefined
    

    typeof

    返回一个参数的类型的字符串值,参数可以输字符串,变量,关键词或者对象:

    typeof new Function(); // "function"
    typeof "leo" ;         // "string"
    typeof 11 ;            // "number"
    typeof undefined ;     // "undefined"
    
    typeof true ;          // "boolean"
    typeof null ;          // "object"
    

    参数也可以是表达式,typeof会根据其返回结果返回所包含的类型:

    typeof (1+1) ;         // "number"
    typeof (1+1==2 ? 'yes' : 'no') ;   // "string"
    

    void

    表示一个运算没有返回值,常常用在创建一个超链接文本,但是点击的时候没有任何效果:

    <a href="javascript:void(0)">点击</a>
    <a href="javascript:void(document.form.submit())">点击</a>
    

    10.关系运算符

    比较两个操作数:

    in

    判断指定属性是否在指定对象中,若是则返回true

    // 对象
    let a = {name:'leo',age:'15'};
    'name' in a;  // true
    
    // 数组
    let b = ['leo', 'pingan', 'robin'];
    0 in b;       // true
    'length' in b;// true
    

    instanceof

    判断一个对象是否是指定类型,若是则返回true

    let d = new Date();
    d instanceof Date;  // true
    

    11.运算符优先级

    当我们需要调整表达式计算顺序,就需要用到运算符的优先级,通过括号来实现排序,常见优先级从高到低:

    运算符 描述
    . [] () 字段访问、数组下标、函数调用以及表达式分组
    ++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
    * / % 乘法、除法、取模
    + - + 加法、减法、字符串连接
    << >> >>> 移位
    < <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof
    == != === !== 等于、不等于、严格相等、非严格相等
    & 按位与
    ^ 按位异或
    | 按位或
    && 逻辑与
    || 逻辑或
    ?: 条件
    = oP= 赋值、运算赋值
    , 多重求值

    参考资料

    1.MDN 表达式和运算符


    本部分内容到这结束

    Author 王平安
    E-mail pingan8787@qq.com
    博 客 www.pingan8787.com
    微 信 pingan8787
    每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
    JS小册 js.pingan8787.com

    bg

    个人博客:http://www.pingan8787.com 微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。 目前已连续推送文章 600+ 天,愿每个人的初心都能一直坚持下去!
  • 相关阅读:
    Java实现 LeetCode 394 字符串解码
    Java实现 LeetCode 394 字符串解码
    Java实现 LeetCode 392 判断子序列
    Java实现 LeetCode 392 判断子序列
    Java实现 LeetCode 392 判断子序列
    Java实现 LeetCode 391 完美矩形
    Java实现 LeetCode 391 完美矩形
    Java实现 LeetCode 391 完美矩形
    Java实现 LeetCode 390 消除游戏
    Java实现 LeetCode 390 消除游戏
  • 原文地址:https://www.cnblogs.com/pingan8787/p/11838226.html
Copyright © 2011-2022 走看看