JavaScript运算符与表达式详解

一、算术运算符

算术运算符是咱们最熟悉的老朋友了,但 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));  //8

3) 自增自减

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

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

let str = "123";console.log(+str);  //123 (数字类型)console.log(-str);  //-123 (数字类型)
let isTrue = true;console.log(+isTrue);  //1 (true转为1)console.log(-isTrue);  //-1
let 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);  //false

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

console.log(5 == "5");   //true (类型不同，值相同)console.log(5 === "5");  //false (类型不同)
console.log(0 == false);  //trueconsole.log(0 === false); //false
console.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); //true

2) 短路求值

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

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

// 设置默认值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);  //15
x -= 3;      //等同于 x = x - 3console.log(x);  //12
x *= 2;      //等同于 x = x * 2console.log(x);  //24
x /= 4;      //等同于 x = x / 4console.log(x);  //6

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);   //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属性)

函数参数解构

//传统方式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); //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);  // "B"

2) 空值合并运算符(??) , 用于处理 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() {    return "hello";  }};console.log(obj.method?.());  // "hello"console.log(obj.nonexistentMethod?.());  // undefined

六、运算符优先级

当表达式中有多个运算符时, 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 (从右向左结合)