JS运算符大全

运算符

• JavaScript 中的运算符用于执行各种运算。

赋值运算符

简单赋值运算符

• 将右侧的值赋给左侧的变量, 先算等号右侧，再算等号左侧
  • =
• 示例

  let a = 5;
  console.log(a); //5
  

算术运算符

• + 加法
• - 减法
• * 乘法
• / 除法
• % 取模，即求余数
• ** 指数运算符，用于计算基数（base）的指数（exponent）次幂。在ES2016（即ES7）中引入，作为数学幂运算的一种简写方法。
• ++ 自增运算符 在自身的基础上+1，正常运算
  • i++ : 先取值，后运算
  • ++i : 先运算，后赋值
• -- 自减运算符

组合赋值运算符

• 将左侧的变量与右侧的值进行运算后再赋值给左侧的变量
  • +=
  • -=
  • *=
  • /=
  • %=
• 示例

  let num = 2;
  num += 3; // num+=3 => num=num+3
  console.log(num); //5
  

比较运算符

• == 等于，进行数据类型转换后比较，返回一个布尔值
• === 全等, 严格等于，不进行类型转换, 只要数据类型不一样，返回 false
• != 不等于，进行类型转换后比较
• !== 绝对不等, 严格不等于，不进行类型转换
• > 大于
• < 小于
• >= 大于等于
• <= 小于等于

逻辑运算符

• && 逻辑与 左右两边都成立，这个条件成立，整体结果就是 true
  • 如果前边转布尔是 true,那就取后边的，反之就取前边的
• || 逻辑或 左右两边只要有一个成立，这个条件就成立，整体结果就是 true
  • 如果前边转布尔是 false，就取后面的,反之就是前面的
• ! 逻辑非 把其他数据类型先转布尔，然后取反
  • !! 两次逻辑非运算操作，就相当于把操作数转换为布尔值
• 示例

  // &&
  let num = 1 && 2;
  console.log(num); //2
  let num1 = 0 && 1;
  console.log(num1); //0
  
  if (1 == "1" && 2 === "2") {
    console.log(100);
  }
  
  // ||
  let num = 1||2;
  console.log(num);//1
  
  let num1 = 0||1;//1
  
  let num3 = 0&&1||1&&2；//2
  
  if(1==true||2===3){
    console.log(200) // 200
  }
  

位运算符

• 位运算 (运算符)

其他运算符

字符串运算符

• + 连接字符串

三元运算符

• condition ? value1 : value2 如果condition为true返回value1,否则返回value2

逗号运算符

• , 允许在一条语句中执行多个操作，返回最后一个操作的结果

let x = 1;
x = (x++, x);
console.log(x);
// Expected output: 2

x = (2, 3);
console.log(x);
// Expected output: 3

关系运算符

• in 判断对象是否拥有给定的属性
• instanceof 判断对象是否是某个构造函数的实例

展开运算符和剩余参数

• … 展开运算符用于将数组或对象的元素/属性扩展到一个新的数组或对象中，或者在函数调用时将数组转换为参数序列。剩余参数用于将不定数量的参数表示为一个数组
  • 展开语法不是一个运算符

需计算的成员访问

• 属性访问器提供了两种方式用于访问一个对象的属性，它们分别是点号和方括号。
  • .
  • [] 获取变量只能用中括号
    • 中括号法可以用变量作为属性名,而点方法不可以;
    • 中括号法可以用数字作为属性名,而点语法不可以;

运算符优先级

• 每种运算符都有特定的运算顺序，称为运算符优先级。在复杂表达式中，运算符优先级和结合性决定了表达式的计算顺序。可以使用圆括号 () 来明确指定运算顺序。
• 运算符的优先级决定了表达式中运算执行的先后顺序。优先级高的运算符会作为优先级低的运算符的操作数
  • 运算符优先级 MDN

    所有运算符按照优先级的不同从高（19）到低（1）排列
    成员访问：寻找对象里的属性名所对应的属性值就是成员访问(19)
    new(带参数列表):就是构造函数执行有括号(19)
    new(无参数列表):就是构造函数执行没有括号(18)
    优先级一样，从左到右运算
    

ES2020 （ES11）

可选链操作符（Optional Chaining）

• 当检查嵌套对象内部的属性时，通常必须检查中间对象的存在。
• ES2020的可选链接运算符让我们可以新加一个?(可选链操作符语法?.)，检查对象深处是否存在值。
• 不用像以前用&&去判断前一项是否存在或者部分情况用三元去判断。

        const res = { 
            "result": true, 
            "message": "success", 
            "data": { 
                "id": 726, 
                "title": "你要努力的去生活，因为你只有努力了，才知道自己真的不行。", 
                "hits": 31, 
                "status": 1, 
                "user_id": 1 ,
                "obj":{
                    "name":"zhainanya"
                }
            } 
        }
        
        let a=res.data?.obj?.name;
        //如果返回的对象中有data，就取res.data.obj,没有返回undefined
        //如果data中有obj，就取res.data.obj.name,没有返回undefined
        console.log(a);

空位合并运算符（Nullish coalescing Operator）

• 空位合并运算符是一个非常简单的名称，使我们能够检查一个值是否为null或undefined，如果是，则默认为另一个值，仅此而已。
• 转布尔为false是下面五种情况
• null
• undefined
• 空字符串 “”
• 0
• 没有数字-NaN

        const result={
            "result":true,
            "message":"success",
            "data":{
                "a":0,
                "b":"",
                "c":null,
                "d":undefined,
                "e":NaN,
            }
        }
        let b=result.data.a?result.data.a:"";
        console.log(b);//想要0但是结果是""
        let c=result.data.a??""
        console.log(c);//0
        let d=result.data.c??"";
        console.log(d);//""

        let f=result.data?.c??"";
        console.log(f);//""
        let e=result.data?.a??"";
        console.log(e);//0
        //如果result.data存在，就取result.data.a
        // 如果result.data.a其值不为null或undefined，就取自身，反之取??后面的"""

ES2021（ES12）

数字分隔符

• 数字分隔符是指数值字面量中使用的下划线（_），目的是为了提高可读性，特别是在处理大量数字时。这一特性在ES2021（即ES12）中被引入。使用数字分隔符，可以将数字分隔成更易于阅读的形式，但是在解析时，分隔符会被忽略，不会影响数字的实际值。

let billion = 1_000_000_000; // 十亿 1,000,000,000
let bytes = 0xFF_FF_FF_FF;   // 一个32位的十六进制数 4294967295

需要注意的是，数字分隔符有以下几个使用规则：

不能在数字的最前面或最后面使用分隔符（例如，不可以写成_100或100_）。
不能有连续的分隔符（例如，不可以写成10__000）。
不能在数字的小数点或科学记数法的e（或E）直接前后使用（例如，不可以写成1_.5、1.5、1e_7或1e7）。
遵守这些规则，你可以在任何你觉得有助于增加可读性的地方使用数字分隔符，无论是整数、小数还是不同进制的数值（如二进制、八进制、十六进制）。

逻辑或赋值

• ||= 是逻辑或赋值（Logical OR assignment）运算符，是逻辑运算符 || 和赋值运算符 = 的组合，用于仅在左侧的操作数是“false”值时，将右侧的操作数赋值给左侧的操作数。
  • “false”值包括：false、0、-0、0n（BigInt的0）、“”（空字符串）、null、undefined 和 NaN。

  let a = null;
  let b = "default value";
  
  a ||= b;
  console.log(a); // 输出："default value" 因为 a 是 null（一个 false 值）
  
  let c = "existing value";
  c ||= b;
  console.log(c); // 输出："existing value" 因为 c 是一个 true 值