javascript:第二章运算符与表达式
目录
第二章 运算符与表达式
2.1 运算符概述
运算符（Operator）是用于执行操作的符号，表达式（Expression）是由运算符和操作数组成的代码片段，会产生一个值。
JavaScript的运算符可以分为以下几类：
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 位运算符
- 条件（三元）运算符
- 其他运算符（typeof、instanceof、in等）
2.2 算术运算符
2.2.1 基本算术运算符
let a = 10, b = 3; // 加法 a + b; // 13 "Hello" + " " + "World"; // "Hello World" // 减法 a - b; // 7 // 乘法 a * b; // 30 // 除法 a / b; // 3.333... // 取余（模运算） a % b; // 1（10除以3余1） 10 % 2; // 0（偶数） // 指数运算（ES2016） a ** b; // 1000（10的3次方） Math.pow(a, b); // 1000（等价写法） // 字符串与数字运算 "5" + 3; // "53"（字符串拼接） "5" - 3; // 2（字符串转数字） "5" * 3; // 15 "5" / 3; // 1.666...
2.2.2 一元算术运算符
let x = 5; // 一元正号（通常无实际作用，但可用于类型转换） +"123"; // 123（转数字） +true; // 1 // 一元负号（取反） -x; // -5 // 递增（++） let y = 5; y++; // 后置递增，返回5，然后y变为6 ++y; // 前置递增，y先变为7，然后返回7 // 递减（--） let z = 5; z--; // 后置递减，返回5，然后z变为4 --z; // 前置递减，z先变为3，然后返回3 // 前置和后置的区别 let a = 5; let b = a++; // b = 5, a = 6 let c = ++a; // a = 7, c = 7 let m = 5; let n = --m; // m = 4, n = 4 let p = m--; // p = 4, m = 3
2.2.3 算术运算符详解
特殊数值运算：
// Infinity运算 Infinity + Infinity; // Infinity Infinity - Infinity; // NaN Infinity * 0; // NaN Infinity / Infinity; // NaN 10 / 0; // Infinity -10 / 0; // -Infinity // NaN传播 NaN + 5; // NaN NaN * 0; // NaN NaN / NaN; // NaN // 任何数与NaN比较都是false NaN === NaN; // false NaN == NaN; // false isNaN(NaN); // true Number.isNaN(NaN); // true
浮点数运算问题：
// 精度丢失 0.1 + 0.2; // 0.30000000000000004 0.1 + 0.2 === 0.3; // false // 解决方案 // 1. 使用toFixed parseFloat((0.1 + 0.2).toFixed(10)); // 0.3 // 2. 使用整数运算 (1 + 2) / 10; // 0.3 // 3. 使用Number.EPSILON function floatEqual(a, b) { return Math.abs(a - b) < Number.EPSILON; } floatEqual(0.1 + 0.2, 0.3); // true
2.3 赋值运算符
2.3.1 基本赋值运算符
// 简单赋值 let x = 10; // 连续赋值（从右到左） let a, b, c; a = b = c = 5; // a=5, b=5, c=5
2.3.2 复合赋值运算符
let x = 10; // 加法赋值 x += 5; // x = x + 5; 结果为15 // 减法赋值 x -= 3; // x = x - 3; 结果为12 // 乘法赋值 x *= 2; // x = x * 2; 结果为24 // 除法赋值 x /= 4; // x = x / 4; 结果为6 // 取余赋值 x %= 4; // x = x % 4; 结果为2 // 指数赋值（ES2016） x **= 3; // x = x ** 3; 结果为8 // 位运算赋值（稍后讲解） let y = 5; y &= 3; // y = y & 3; y |= 4; // y = y | 4; y ^= 2; // y = y ^ 2; y <<= 1; // y = y << 1; y >>= 1; // y = y >> 1; y >>>= 1; // y = y >>> 1;
2.3.3 解构赋值（ES6）
// 数组解构 let [a, b] = [1, 2]; console.log(a, b); // 1 2 // 跳过元素 let [x, , z] = [1, 2, 3]; console.log(x, z); // 1 3 // 剩余元素 let [first, ...rest] = [1, 2, 3, 4]; console.log(first); // 1 console.log(rest); // [2, 3, 4] // 默认值 let [m = 1, n = 2] = [10]; console.log(m, n); // 10 2 // 对象解构 let {name, age} = {name: "张三", age: 25}; console.log(name, age); // "张三" 25 // 重命名 let {name: userName, age: userAge} = {name: "李四", age: 30}; console.log(userName); // "李四" // 默认值 let {status = "active"} = {}; console.log(status); // "active" // 嵌套解构 let user = { info: { address: { city: "北京" } } }; let {info: {address: {city}}} = user; console.log(city); // "北京"
2.4 比较运算符
2.4.1 相等比较
// 宽松相等（==）- 会进行类型转换 5 == "5"; // true 0 == false; // true "" == false; // true null == undefined; // true // 严格相等（===）- 不进行类型转换（推荐） 5 === "5"; // false 0 === false; // false null === undefined; // false // 不等比较 5 != "5"; // false 5 !== "5"; // true
严格相等 vs 宽松相等：
始终使用 === 和 !==，避免意外的类型转换。
// 宽松相等的奇怪行为 [] == false; // true [] == ![]; // true '' == false; // true 0 == '0'; // true 0 == []; // true '0' == []; // false // NaN的特殊性 NaN == NaN; // false NaN === NaN; // false Object.is(NaN, NaN); // true（ES6新方法）
2.4.2 大小比较
let a = 5, b = 10; // 大于 a > b; // false // 小于 a < b; // true // 大于等于 a >= 5; // true // 小于等于 b <= 10; // true // 字符串比较（按字典序） "apple" < "banana"; // true "Apple" < "apple"; // true（大写字母ASCII码小） "10" < "2"; // true（字符串逐字符比较）
字符串比较原理：
// Unicode码点比较 "a".charCodeAt(0); // 97 "b".charCodeAt(0); // 98 "A".charCodeAt(0); // 65 // 中文字符比较 "中".charCodeAt(0); // 20013 "国".charCodeAt(0); // 22269 "中国" < "美国"; // true（因为 20013 < 32654）
2.5 逻辑运算符
2.5.1 逻辑与（&&）
// 基本用法 true && true; // true true && false; // false false && true; // false false && false; // false // 短路求值 // 如果第一个操作数为假，直接返回第一个，不计算第二个 let x = 0; false && (x = 10); // x 仍然是 0 // 常用模式：条件执行 isValid && processData(); // 返回第一个假值或最后一个真值 0 && "hello"; // 0 1 && "hello"; // "hello" "hello" && 42; // 42
2.5.2 逻辑或（||）
// 基本用法 true || true; // true true || false; // true false || true; // true false || false; // false // 短路求值 // 如果第一个操作数为真，直接返回第一个，不计算第二个 true || console.log("不会执行"); // 常用模式：默认值 let name = userName || "Anonymous"; // 返回第一个真值或最后一个假值 0 || "hello"; // "hello" "" || 42; // 42 null || undefined; // undefined
空值合并运算符 ??（ES2020）：
// || 的问题：假值会被替换 0 || 100; // 100（但0可能是有效值） "" || "default"; // "default"（但空字符串可能是有效的） // ?? 只在 null 和 undefined 时返回右侧值 0 ?? 100; // 0 "" ?? "default"; // "" null ?? "default"; // "default" undefined ?? "default"; // "default"
2.5.3 逻辑非（!）
// 基本用法 !true; // false !false; // true // 双重否定转布尔 !!"hello"; // true !!0; // false !!{}; // true !![]; // true // 等价的布尔转换 Boolean("hello"); // true Boolean(0); // false
2.5.4 逻辑赋值运算符（ES2021）
let x = 0; let y = 10; // 逻辑与赋值（&&=） x &&= y; // 等价于 x = x && y // x 是 0（假值），所以 x 保持 0 // 逻辑或赋值（||=） let name = ""; name ||= "default"; // name 是 ""（假值），所以赋值为 "default" // 空值合并赋值（??=） let value = null; value ??= "fallback"; // value 是 null，所以赋值为 "fallback" let zero = 0; zero ??= 100; // zero 保持 0（不是null或undefined）
2.6 位运算符
位运算符直接操作数字的二进制表示。
2.6.1 基础位运算
// 按位与（&）- 两个都为1才是1 5 & 3; // 1 // 5: 101 // 3: 011 // &: 001 = 1 // 按位或（|）- 有一个为1就是1 5 | 3; // 7 // 5: 101 // 3: 011 // |: 111 = 7 // 按位异或（^）- 不同为1，相同为0 5 ^ 3; // 6 // 5: 101 // 3: 011 // ^: 110 = 6 // 按位非（~）- 取反（包括符号位） ~5; // -6 // 5: 0000...00000101 // ~5: 1111...11111010 = -6（补码表示） // 左移（<<）- 乘以2的n次方 5 << 1; // 10 5 << 2; // 20 // 右移（>>）- 带符号右移（除以2的n次方，保留符号） -16 >> 2; // -4 16 >> 2; // 4 // 无符号右移（>>>）- 用0填充高位 -16 >>> 2; // 1073741820（很大的正数）
2.6.2 位运算实际应用
权限管理：
// 使用位运算管理权限 const PERMISSION_READ = 1 << 0; // 1 (0001) const PERMISSION_WRITE = 1 << 1; // 2 (0010) const PERMISSION_EXECUTE = 1 << 2; // 4 (0100) const PERMISSION_DELETE = 1 << 3; // 8 (1000) // 组合权限 let userPermissions = PERMISSION_READ | PERMISSION_WRITE; // 3 // 检查权限 if (userPermissions & PERMISSION_READ) { console.log("有读权限"); } if (userPermissions & PERMISSION_EXECUTE) { console.log("有执行权限"); // 不会执行 } // 添加权限 userPermissions |= PERMISSION_EXECUTE; // 现在为7 // 移除权限 userPermissions &= ~PERMISSION_WRITE; // 现在为5 // 切换权限 userPermissions ^= PERMISSION_DELETE; // 添加或删除权限
颜色处理：
// RGB颜色提取 let color = 0xFF5733; // 16734003 let red = (color >> 16) & 0xFF; // 255 let green = (color >> 8) & 0xFF; // 87 let blue = color & 0xFF; // 51 // 组合RGB let newColor = (red << 16) | (green << 8) | blue;
判断奇偶：
// 比 % 2 更快 function isOdd(n) { return (n & 1) === 1; } function isEven(n) { return (n & 1) === 0; } isOdd(5); // true isEven(4); // true
交换两个数：
// 不使用临时变量 let a = 5, b = 3; a = a ^ b; b = a ^ b; // b 现在是原来的 a a = a ^ b; // a 现在是原来的 b console.log(a, b); // 3 5
2.7 其他运算符
2.7.1 条件（三元）运算符
// 语法：condition ? valueIfTrue : valueIfFalse let age = 20; let status = age >= 18 ? "成年" : "未成年"; // 嵌套三元（不推荐，可读性差） let category = age < 13 ? "儿童" : age < 20 ? "青少年" : age < 60 ? "成年人" : "老年人"; // 与if-else等价 let message; if (age >= 18) { message = "成年"; } else { message = "未成年"; }
2.7.2 typeof运算符
typeof undefined; // "undefined" typeof null; // "object"（历史bug） typeof true; // "boolean" typeof 42; // "number" typeof 42n; // "bigint" typeof "hello"; // "string" typeof Symbol(); // "symbol" typeof {}; // "object" typeof []; // "object" typeof function() {}; // "function" // 判断数组 Array.isArray([]); // true
2.7.3 instanceof运算符
检查对象是否是某个类的实例。
[] instanceof Array; // true {} instanceof Object; // true new Date() instanceof Date; // true // 构造函数 function Person() {} let p = new Person(); p instanceof Person; // true // 原型链 class Animal {} class Dog extends Animal {} let dog = new Dog(); dog instanceof Dog; // true dog instanceof Animal; // true dog instanceof Object; // true
2.7.4 in运算符
检查属性是否在对象中。
let obj = { name: "张三", age: 25 }; "name" in obj; // true "toString" in obj; // true（继承自原型） let arr = ["a", "b", "c"]; 0 in arr; // true 3 in arr; // false "length" in arr; // true // 删除属性后 delete obj.age; "age" in obj; // false
2.7.5 可选链操作符 ?.（ES2020）
let user = { profile: { name: "张三" } }; // 传统写法（容易出错） // let name = user.profile.name; // 如果profile为null/undefined会报错 // 安全访问 let name = user && user.profile && user.profile.name; // 使用可选链 let name2 = user?.profile?.name; // "张三" // 访问不存在的嵌套属性 let city = user?.address?.city; // undefined，不会报错 // 与函数调用结合 let result = someObject?.someMethod?.(); // 与方括号结合 let prop = user?.["profile"]?.["name"];
2.7.6 展开运算符 ...（ES6）
// 展开数组 let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5] // 复制数组（浅拷贝） let copy = [...arr1]; // 合并数组 let merged = [...arr1, ...arr2]; // 展开对象（ES2018） let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 } // 对象合并（后面的属性覆盖前面的） let defaults = { theme: "light", fontSize: 14 }; let userPrefs = { fontSize: 16 }; let settings = { ...defaults, ...userPrefs }; // { theme: "light", fontSize: 16 } // 函数参数展开 function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } sum(1, 2, 3, 4); // 10 // 数组解构中的剩余元素 let [first, second, ...rest] = [1, 2, 3, 4, 5];
2.8 运算符优先级
运算符优先级决定了表达式中运算的执行顺序。
// 优先级从高到低： // 1. 分组 ( ) (2 + 3) * 4; // 20 // 2. 成员访问 . 、计算属性 [] 、new (带参数列表) 、函数调用 () obj.property; obj["property"]; new Date(); func(); // 3. new (无参数列表) new Date; // 4. 后置递增/递减 ++ -- x++; x--; // 5. 逻辑非 ! 、按位非 ~ 、一元加减 + - 、前置递增/递减 ++ -- 、typeof 、void 、delete 、await !true; ~5; +x; ++x; typeof x; await promise; // 6. 指数 **（右结合） 2 ** 3 ** 2; // 512（2 ** (3 ** 2) = 2 ** 9） // 7. 乘除取余 * / % 10 / 2 * 5; // 25（从左到右） // 8. 加减 + - 5 + 3 - 2; // 6（从左到右） // 9. 移位 << >> >>> 8 >> 1; // 4 // 10. 比较 < <= > >= instanceof in 5 > 3; "a" in obj; // 11. 相等 == != === !== 5 === "5"; // 12. 按位与 & 5 & 3; // 13. 按位异或 ^ 5 ^ 3; // 14. 按位或 | 5 | 3; // 15. 逻辑与 && true && false; // 16. 逻辑或 || true || false; // 17. 空值合并 ?? null ?? "default"; // 18. 条件 ?: condition ? a : b; // 19. 赋值 = += -= 等 x = 5; x += 3; // 20. yield 、yield* 、=> function* gen() { yield 1; } () => {}; // 21. 展开 ... [...arr];
优先级示例：
// 复杂的优先级示例 let a = 1, b = 2, c = 3; // 等价于：a + (b * c) a + b * c; // 7 // 等价于：a * (b + c) a * b + c; // 5（不是9） // 等价于：(a && b) || c a && b || c; // 2 // 使用括号明确意图 (a + b) * c; // 9（更清晰）
2.9 练习题
练习1：运算符优先级
预测以下表达式的结果：
2 + 3 * 4; (2 + 3) * 4; 10 / 2 * 5; 10 / (2 * 5); 5 > 3 && 2 > 4; 5 > 3 || 2 > 4 && 1 > 0; 2 ** 3 ** 2; (2 ** 3) ** 2;
练习2：位运算应用
完成以下位运算练习：
// 1. 编写函数 isPowerOfTwo，判断一个数是否是2的幂次方 // 提示：2的幂次方的二进制表示只有一个1 // 2. 编写函数 getBit，获取数字n的第i位（从0开始） // getBit(5, 0) 应该返回 1（5的二进制是101） // 3. 编写函数 setBit，将数字n的第i位设为1 // 4. 编写函数 clearBit，将数字n的第i位设为0 // 5. 编写函数 toggleBit，切换数字n的第i位（0变1，1变0）
练习3：短路求值
分析以下代码的执行结果：
let x = 0; let y = 5; let result1 = x && (y = 10); console.log(x, y, result1); let result2 = x || (y = 20); console.log(x, y, result2); let result3 = null ?? (y = 30); console.log(y, result3); let result4 = 0 ?? (y = 40); console.log(y, result4);
练习4：综合练习
编写一个函数 `safeGet`，使用可选链和空值合并运算符，安全地获取嵌套对象属性，如果属性不存在则返回默认值：
const user = { profile: { address: { city: "北京" } } }; safeGet(user, "profile.address.city", "未知"); // "北京" safeGet(user, "profile.address.zipCode", "未知"); // "未知" safeGet(user, "settings.theme", "light"); // "light" safeGet(null, "any.path", "default"); // "default"
参考答案
练习1答案：
2 + 3 * 4; // 14（先乘后加） (2 + 3) * 4; // 20 10 / 2 * 5; // 25（从左到右） 10 / (2 * 5); // 1 5 > 3 && 2 > 4; // false 5 > 3 || 2 > 4 && 1 > 0; // true（&&优先级高于||） 2 ** 3 ** 2; // 512（右结合） (2 ** 3) ** 2; // 64
练习2答案：
// 1. 判断2的幂次方 function isPowerOfTwo(n) { return n > 0 && (n & (n - 1)) === 0; } // 原理：2的幂次方只有一位是1，n-1会将该位及后面所有位反转 // 8 = 1000 // 7 = 0111 // 8 & 7 = 0000 = 0 // 2. 获取第i位 function getBit(n, i) { return (n >> i) & 1; } // 3. 设置第i位为1 function setBit(n, i) { return n | (1 << i); } // 4. 清除第i位 function clearBit(n, i) { return n & ~(1 << i); } // 5. 切换第i位 function toggleBit(n, i) { return n ^ (1 << i); }
练习3答案：
let x = 0; let y = 5; let result1 = x && (y = 10); // x是0（假值），短路返回x console.log(x, y, result1); // 0, 5, 0 let result2 = x || (y = 20); // x是0（假值），执行y=20，返回20 console.log(x, y, result2); // 0, 20, 20 let result3 = null ?? (y = 30); // null，执行y=30，返回30 console.log(y, result3); // 30, 30 let result4 = 0 ?? (y = 40); // 0不是null/undefined，短路返回0，y保持30 console.log(y, result4); // 30, 0
练习4答案：
function safeGet(obj, path, defaultValue) { if (obj == null) return defaultValue; const keys = path.split('.'); let result = obj; for (const key of keys) { result = result?.[key]; if (result === undefined) { return defaultValue; } } return result ?? defaultValue; } // 或使用reduce的简洁版本 function safeGet2(obj, path, defaultValue) { const result = path.split('.').reduce((o, k) => o?.[k], obj); return result ?? defaultValue; } // 测试 const user = { profile: { address: { city: "北京" } } }; console.log(safeGet(user, "profile.address.city", "未知")); // "北京" console.log(safeGet(user, "profile.address.zipCode", "未知")); // "未知" console.log(safeGet(user, "settings.theme", "light")); // "light" console.log(safeGet(null, "any.path", "default")); // "default"
本章小结
本章详细介绍了JavaScript的各种运算符：
- 算术运算符：+、-、*、/、%、、++、– * 赋值运算符：=、+=、-= 等复合赋值 * 比较运算符：==、===、!=、!==、>、<、>=、⇐ * 逻辑运算符：&&、||、!、?? * 位运算符：&、|、^、~、«、»、»> * 其他运算符**：条件运算符、typeof、instanceof、in、?.、…
关键要点：
- 始终使用 === 和 !== 进行比较
- 理解短路求值的机制
- 掌握位运算的实际应用场景
- 了解运算符优先级，必要时使用括号
下一章将学习控制流语句，实现程序的条件执行和循环处理。
javascript/第二章运算符与表达式.txt · 最后更改: 由 127.0.0.1