一、算术运算符算术运算符是咱们最熟悉的老朋友了,但 JavaScript 给它们加了一些"特殊技能".1) 基本算述运算符

let a = 10;let b = 3;
console.log(a + b);  console.log(a - b);  console.log(a * b);  console.log(a / b);  console.log(a % b);  

console.log(1 / 0);  console.log(-1 / 0); console.log(0 / 0);  

2) 指数运算符(**)

console.log(2 ** 3);  console.log(3 ** 2);  
//以前我们得用 Math.pow()console.log(Math.pow(2, 3));  

3) 自增自减

let x = 5;
//后置自增:先返回值,再自增console.log(x++);  console.log(x);    
let y = 5;// 前置自增:先自增,再返回值console.log(++y);  console.log(y);    

4) 一元加和一元减, 这俩运算符能把其他类型转为数字

let str = "123";console.log(+str);  console.log(-str);  
let isTrue = true;console.log(+isTrue);  console.log(-isTrue);  
let isFalse = false;console.log(+isFalse); 

二、比较运算符1) 基本比较运算符

console.log(5 > 3);   console.log(5 < 3);   console.log(5 >= 5);  console.log(5 <= 4);  

2) 相等(==)与严格相等(===)

console.log(5 == "5");   console.log(5 === "5");  
console.log(0 == false);  console.log(0 === false); 
console.log(null == undefined);  console.log(null === undefined); 

建议在大多数情况下使用 === 和 !==, 可以避免很多隐式类型转换带来的意外行为. 3) 特殊比较情况

console.log(NaN === NaN);  console.log(Object.is(NaN, NaN));  
// 比较字符串时按字典序比较console.log("apple" < "banana");  console.log("2" > "12");  

三、逻辑运算符逻辑运算符不只是用于布尔值, 在 JavaScript 中它们有更多灵活用法.1) 基本逻辑运算符

//逻辑与(&&):两边都为true才返回trueconsole.log(true && true);   console.log(true && false);  
// 逻辑或(||):至少一边为true就返回trueconsole.log(true || false);  console.log(false || false); 
// 逻辑非(!)：取反console.log(!true);  console.log(!false); 

2) 短路求值

//&& 的短路特性:如果第一个操作数为假,直接返回它,不计算第二个console.log(0 && "hello");  console.log("" && 123);     
//||的短路特性:如果第一个操作数为真,直接返回它,不计算第二个console.log("hello" || 0);  console.log(123 || "world"); 

利用这个特性可以做很多简洁的操作:

// 设置默认值let name = "";let displayName = name || "匿名用户";  
//条件执行函数function logMessage() {  console.log("消息已记录");}let debugMode = true;debugMode && logMessage();  //只有当debugMode为true时才执行

3) 逻辑运算符的返回值

console.log(1 && 2);  //2 (因为1为真，返回第二个操作数)console.log(0 && 2);  //0 (因为0为假，直接返回第一个操作数)console.log(1 || 2);  //1 (因为1为真，直接返回第一个操作数)console.log(0 || 2);  //2 (因为0为假，返回第二个操作数)

四、赋值运算符1) 基本赋值运算符

let x = 10;  x += 5;      //等同于 x = x + 5console.log(x);  
x -= 3;      //等同于 x = x - 3console.log(x);  
x *= 2;      //等同于 x = x * 2console.log(x);  
x /= 4;      //等同于 x = x / 4console.log(x);  

2) 解构赋值解构赋值是ES6的超实用特性, 可以轻松提取数组或对象中的值数组解构:

let colors = ["红", "绿", "蓝"];
//传统方式//let first = colors[0];//let second = colors[1];
// 解构赋值方式let [first, second] = colors;console.log(first);  console.log(second); 
//跳过某些元素let [ , , third] = colors;console.log(third);  
//默认值let [a, b, c, d = "默认值"] = colors;console.log(d);  

对象解构:

let person = {  name: "张三",  age: 30,  address: {    city: "北京"  }};
//传统方式//let name = person.name;//let age = person.age;
//解构赋值方式let { name, age } = person;console.log(name);  console.log(age);   
// 重命名变量let { name: personName, age: personAge } = person;console.log(personName);  console.log(personAge);   
// 嵌套解构let { address: { city } } = person;console.log(city);  
// 默认值let { name, job = "工程师" } = person;console.log(job);  

函数参数解构

//传统方式function printPerson(person) {  console.log(`姓名: ${person.name},年龄: ${person.age}`);}
//解构方式function printPerson({ name, age }) {  console.log(`姓名: ${name},年龄: ${age}`);}
printPerson(person);  //姓名: 张三,年龄: 30

变换变量值

let a = 1, b = 2;[a, b] = [b, a];  //交换a和b的值console.log(a, b); 

五、其他运算符1) 三元运算符

let age = 20;let canDrink = age >= 18 ? "可以喝酒" : "不能喝酒";console.log(canDrink);  

三元运算符可以嵌套, 但最好不要嵌套太多层, 否则会影响可读性

let score = 85;let grade = score >= 90 ? "A" :             score >= 80 ? "B" :            score >= 70 ? "C" :            score >= 60 ? "D" : "F";console.log(grade);  // "B"

2) 空值合并运算符(??) , 用于处理 null 或 undefined 的情况

let userInput = null;let value = userInput ?? "默认值";console.log(value);  
//与 || 的区别let count = 0;console.log(count || 10);  console.log(count ?? 10);  

3) 可选链运算符(?.) , 可以用于安全访问嵌套对象属性

let user = {  profile: {    name: "李四",    address: {      city: "上海"    }  }};
//传统方式let city;if (user && user.profile && user.profile.address) {  city = user.profile.address.city;}
//可选链方式let city = user?.profile?.address?.city;console.log(city);  
// 如果某个中间属性不存在let city2 = user?.profile?.job?.title;  console.log(city2);  
// 也可以用于函数调用let obj = {  method() {    return "hello";  }};console.log(obj.method?.());  console.log(obj.nonexistentMethod?.());  

六、运算符优先级当表达式中有多个运算符时, JavaScript 会按照优先级顺序来计算. 下面是一些常见运算符的优先级(从高到低): 

1. 成员访问 .、带括号的调用 ()、new (带参数列表)

2. new (无参数列表)

3. 后置递增++、后置递减--

4. 逻辑非!、一元加+、一元减-、前置递增++、前置递减--、typeof、void、delete、await

5. 幂 **

6. 乘*、除/、取余 %

7. 加 +、减 -

8. 关系运算符<、<=、>、>=、instanceof、in

9. 相等==、!=、===、!==


10. 逻辑与 &&

11. 逻辑或 ||

12. 条件（三元）运算符 ? :

13. 赋值 =、+=、-= 等

14. 逗号,

示例说明:

let result = 5 + 3 * 2;  //11 不是16，因为乘法优先级高
let a = 1, b = 2;let c = a++ + b;  //3 (a++返回1，然后a变为2)
let d = 2 ** 3 * 2;  //16 (2的3次方是8，再乘以2)
let e = 5 > 3 && 2 < 4;  //true (先比较，再逻辑与)
let f = true ? false : true ? 1 : 0;  //false (从右向左结合)