一、算术运算符算术运算符是咱们最熟悉的老朋友了,但 JavaScript 给它们加了一些特殊技能.1) 基本算述运算符let a 10;let b 3;console.log(a b);//13加法console.log(a - b);//7减法console.log(a * b);//30乘法console.log(a / b);//3.333...除法console.log(a % b);//1取余(10除以3余1)console.log(1 /0);//Infinityconsole.log(-1 /0);//-Infinityconsole.log(0 /0);//NaN (Not a Number)2) 指数运算符(**)console.log(2 **3);//8 (2的3次方)console.log(3 **2);//9 (3的2次方)//以前我们得用 Math.pow()console.log(Math.pow(2,3));//83) 自增自减let x 5;//后置自增:先返回值,再自增console.log(x);//5console.log(x);//6let y 5;// 前置自增:先自增,再返回值console.log(y);//6console.log(y);//64) 一元加和一元减, 这俩运算符能把其他类型转为数字let str 123;console.log(str);//123 (数字类型)console.log(-str);//-123 (数字类型)let isTrue true;console.log(isTrue);//1 (true转为1)console.log(-isTrue);//-1let isFalse false;console.log(isFalse);//0 (false转为0)二、比较运算符1) 基本比较运算符console.log(5 3);//trueconsole.log(5 3);//falseconsole.log(5 5);//trueconsole.log(5 4);//false2) 相等()与严格相等()console.log(5 5);//true (类型不同值相同)console.log(5 5);//false (类型不同)console.log(0 false);//trueconsole.log(0 false);//falseconsole.log(null undefined);//trueconsole.log(null undefined);//false建议在大多数情况下使用和!,可以避免很多隐式类型转换带来的意外行为. 3) 特殊比较情况console.log(NaN NaN);//false (NaN不等于任何值包括它自己)console.log(Object.is(NaN,NaN));//true (ES6的Object.is方法)// 比较字符串时按字典序比较console.log(apple banana);//trueconsole.log(2 12);//true (因为是字符串比较2的字符编码大于1)三、逻辑运算符逻辑运算符不只是用于布尔值, 在 JavaScript 中它们有更多灵活用法.1) 基本逻辑运算符//逻辑与():两边都为true才返回trueconsole.log(true true);//trueconsole.log(true false);//false// 逻辑或(||):至少一边为true就返回trueconsole.log(true ||false);//trueconsole.log(false ||false);//false// 逻辑非(!)取反console.log(!true);//falseconsole.log(!false);//true2) 短路求值// 的短路特性:如果第一个操作数为假,直接返回它,不计算第二个console.log(0 hello);// 0console.log( 123);// //||的短路特性:如果第一个操作数为真,直接返回它,不计算第二个console.log(hello ||0);//helloconsole.log(123 ||world);//123利用这个特性可以做很多简洁的操作:// 设置默认值let name ;let displayName name ||匿名用户;//匿名用户//条件执行函数functionlogMessage() {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);//15x -3;//等同于 x x - 3console.log(x);//12x *2;//等同于 x x * 2console.log(x);//24x /4;//等同于 x x / 4console.log(x);//62) 解构赋值解构赋值是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);//30// 重命名变量let {name: personName,age: personAge } person;console.log(personName);//张三console.log(personAge);//30// 嵌套解构let {address: { city } } person;console.log(city);//北京// 默认值let { name, job 工程师 } person;console.log(job);//工程师(因为person中没有job属性)函数参数解构//传统方式functionprintPerson(person) {console.log(姓名:${person.name},年龄:${person.age});}//解构方式functionprintPerson({ name, age }) {console.log(姓名:${name},年龄:${age});}printPerson(person);//姓名: 张三,年龄: 30变换变量值let a 1, b 2;[a, b] [b, a];//交换a和b的值console.log(a, b);//2 1五、其他运算符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); //B2) 空值合并运算符(??) , 用于处理null或undefined的情况let userInput null;let value userInput ??默认值;console.log(value);//默认值//与 || 的区别let count 0;console.log(count ||10);//10 (因为0是假值)console.log(count ??10);//0 (只有当count是null或undefined时才用默认值)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;//不会报错,返回undefinedconsole.log(city2);// undefined// 也可以用于函数调用let obj {method() {returnhello;}};console.log(obj.method?.());// helloconsole.log(obj.nonexistentMethod?.());// undefined六、运算符优先级当表达式中有多个运算符时, JavaScript 会按照优先级顺序来计算. 下面是一些常见运算符的优先级(从高到低):1. 成员访问.、带括号的调用()、new(带参数列表)2. new(无参数列表)3. 后置递增、后置递减--4. 逻辑非!、一元加、一元减-、前置递增、前置递减--、typeof、void、delete、await5. 幂**6. 乘*、除/、取余%7. 加、减-8. 关系运算符、、、、instanceof、in9. 相等、!、、!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 (从右向左结合)