运算符

// 加减乘除
console.log(10 + 3) // 13
console.log(10 - 3) // 7
console.log(10 * 3) // 30
console.log(10 / 3) // 3.3333...

// 取余（模运算）
console.log(10 % 3) // 1
console.log(-10 % 3) // -1（符号跟被除数）

// 指数运算（ES2016）
console.log(2 ** 3) // 8
console.log(4 ** 0.5) // 2（开平方）

let a = 5

// 后置：先返回原值，再自增
console.log(a++) // 5
console.log(a) // 6

// 前置：先自增，再返回新值
console.log(++a) // 7
console.log(a) // 7

// 自减同理
let b = 5
console.log(b--) // 5
console.log(--b) // 3

// 不推荐
let x = 1
const result = x++ + ++x + x++ // 难以理解

// 推荐：拆分成多个语句
let y = 1
y += 1
const step1 = y
y += 1
const step2 = y
// ...

// 数字相加
console.log(5 + 3) // 8

// 字符串连接
console.log('Hello' + ' ' + 'World') // "Hello World"

// 🔶 混合运算��陷阱！）
console.log('5' + 3) // "53"（字符串）
console.log(5 + '3') // "53"（字符串）
console.log(5 + 3 + '2') // "82"（先算 5+3=8，再连接）
console.log('2' + 5 + 3) // "253"（从左到右都是连接）

// 强制数值运算
console.log(+'5' + 3) // 8
console.log(Number('5') + 3) // 8

// == 宽松相等（会类型转换）
console.log(5 == '5') // true
console.log(0 == false) // true
console.log(null == undefined) // true
console.log('' == false) // true

// === 严格相等（不转换类型）
console.log(5 === '5') // false
console.log(0 === false) // false
console.log(null === undefined) // false

// 数值比较
console.log(5 > 3) // true
console.log(5 >= 5) // true
console.log(3 < 5) // true
console.log(3 <= 3) // true

// 字符串比较（按 Unicode 码点）
console.log('a' < 'b') // true
console.log('abc' < 'abd') // true
console.log('10' < '9') // true！（'1' < '9'）

// 混合比较（字符串转��值）
console.log('10' > 9) // true（10 > 9）
console.log('10' > '9') // false（字符串比较）

// NaN 与任何值比较都是 false
console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(NaN > 0) // false
console.log(NaN < 0) // false

// null 和 undefined
console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(null > 0) // false
console.log(null < 0) // false
console.log(null >= 0) // true！（null 转为 0）

// && 逻辑与
console.log(true && true) // true
console.log(true && false) // false
console.log(false && true) // false

// || 逻辑或
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false

// ! 逻辑非
console.log(!true) // false
console.log(!false) // true
console.log(!0) // true
console.log(!'') // true
console.log(!null) // true

// && 返回第一个假值，或最后一个值
console.log('hello' && 'world') // "world"
console.log('' && 'world') // ""
console.log(null && 'world') // null
console.log(1 && 2 && 3) // 3

// || 返回第一个真值，或最后一个值
console.log('' || 'default') // "default"
console.log('hello' || 'default') // "hello"
console.log(0 || null || 'last') // "last"
console.log(0 || '' || false) // false

// 默认值
function greet(name) {
  name = name || '游客'
  return `你好，${name}`
}

// 条件执行
const user = { name: '张三' }
user && console.log(user.name) // "张三"

// 短路保护
const config = null
const port = config && config.port // undefined（不会报错）

// 链式取值（旧写法）
const street = user && user.address && user.address.street

// || 的问题：0 和空字符串会被误判
console.log(0 || 100) // 100（可能不是预期）
console.log('' || 'default') // "default"

// ?? 只对 null/undefined 生效
console.log(0 ?? 100) // 0
console.log('' ?? 'default') // ""
console.log(null ?? 'default') // "default"
console.log(undefined ?? 'default') // "default"

// 实际场景
function setVolume(level) {
  level = level ?? 50 // 允许设置为 0
  console.log(`音量：${level}`)
}
setVolume(0) // "音量：0"
setVolume() // "音量：50"

// & 按位与
console.log(5 & 3) // 1
// 0101 & 0011 = 0001

// | 按位或
console.log(5 | 3) // 7
// 0101 | 0011 = 0111

// ^ 按位异或
console.log(5 ^ 3) // 6
// 0101 ^ 0011 = 0110

// ~ 按位取反
console.log(~5) // -6
// ~0101 = 1010...（32位补码）

// << 左移
console.log(5 << 1) // 10
// 0101 << 1 = 1010

// >> 有符号右移
console.log(5 >> 1) // 2
// 0101 >> 1 = 0010

// >>> 无符号右移
console.log(-1 >>> 0) // 4294967295

// 快速取整（截断小数）
console.log(~~3.7) // 3
console.log(3.7 | 0) // 3
console.log(3.7 >> 0) // 3

// 快速乘除 2 的幂
console.log(5 << 2) // 20（5 * 4）
console.log(20 >> 2) // 5（20 / 4）

// 判断奇偶
console.log(5 & 1) // 1（奇数）
console.log(6 & 1) // 0（偶数）

// 交换两个数（不用临时变量）
let a = 5,
  b = 3
a = a ^ b // a = 6
b = a ^ b // b = 5
a = a ^ b // a = 3
console.log(a, b) // 3, 5

// 权限管理
const READ = 1 // 0001
const WRITE = 2 // 0010
const EXECUTE = 4 // 0100

let permission = READ | WRITE // 0011 = 3
console.log(permission & READ) // 1（有读权限）
console.log(permission & EXECUTE) // 0（无执行权限）

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
x **= 3 // x = x ** 3 = 8

// 位运算赋值
x &= 3 // x = x & 3
x |= 4 // x = x | 4
x ^= 1 // x = x ^ 1
x <<= 1 // x = x << 1
x >>= 1 // x = x >> 1

let a = null
let b = 'hello'
let c = ''

// ||= 如果左侧为假值则赋值
a ||= 'default' // a = 'default'
b ||= 'default' // b = 'hello'（不变）

// &&= 如果左侧为真值则赋值
b &&= 'world' // b = 'world'
c &&= 'world' // c = ''（不变）

// ??= 如果左侧为 null/undefined 则赋值
let d = 0
d ??= 100 // d = 0（不变，因为 0 不是 null/undefined）

let e = null
e ??= 100 // e = 100

const age = 18
const status = age >= 18 ? '成年' : '未成年'
console.log(status) // "成年"

// 可以嵌套（但不推荐太深）
const score = 85
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 60 ? 'C' : 'D'
console.log(grade) // "B"

// 推荐使用 if 或对象映射替代复杂的三元运算

// 从左到右求值，返回最后一个值
const result = (1, 2, 3)
console.log(result) // 3

// 常见于 for 循环
for (let i = 0, j = 10; i < j; i++, j--) {
  console.log(i, j)
}

// 在一行中执行多个表达式
let x = ((a = 1), (b = 2), a + b)
console.log(x) // 3

const user = {
  name: '张三',
  address: {
    city: '北京',
  },
}

// 传统写法（繁琐）
const zip1 = user && user.address && user.address.zip

// 可选链（简洁）
const zip2 = user?.address?.zip // undefined（不报错）

// 方法调用
const result = user.getName?.() // undefined（不报错）

// 数组访问
const arr = null
console.log(arr?.[0]) // undefined

// 配合空值合并
const city = user?.address?.city ?? '未知城市' // "北京"

// typeof 检查类型
console.log(typeof 42) // "number"
console.log(typeof 'hello') // "string"
console.log(typeof true) // "boolean"
console.log(typeof undefined) // "undefined"
console.log(typeof null) // "object"（历史bug）
console.log(typeof {}) // "object"
console.log(typeof []) // "object"
console.log(typeof function () {}) // "function"

// instanceof 检查原型链
console.log([] instanceof Array) // true
console.log([] instanceof Object) // true
console.log({} instanceof Array) // false
console.log(function () {} instanceof Function) // true

const obj = { name: '张三', age: 25 }

delete obj.age
console.log(obj) // { name: "张三" }

// 数组元素删除（留下空位）
const arr = [1, 2, 3]
delete arr[1]
console.log(arr) // [1, empty, 3]
console.log(arr.length) // 3（长度不变）

// 推荐用 splice 删除数组元素
arr.splice(1, 1) // 从索引1删除1个元素

const obj = { name: '张三' }

console.log('name' in obj) // true
console.log('age' in obj) // false
console.log('toString' in obj) // true（继承的属性）

// 数组中检查索引
const arr = [1, 2, 3]
console.log(0 in arr) // true
console.log(5 in arr) // false
console.log('length' in arr) // true

// && 优先于 ||
console.log(true || (false && false)) // true
console.log((true || false) && false) // false

// 比较优先于逻辑
console.log(1 + 2 > 2 && 3 < 4) // true
// 等价于 ((1 + 2) > 2) && (3 < 4)

// 一元运算符优先于二元
console.log(!true && false) // false
console.log(!(true && false)) // true

// 🔶 不确定时就加括号！
const result = a > b ? a : c > d ? c : d
// 推荐明确写出
const result2 = a > b ? a : c > d ? c : d

// 数学上：1 < 2 < 3 是对的
console.log(1 < 2 < 3) // true，但原因是...
// 1 < 2 = true
// true < 3 = 1 < 3 = true

console.log(3 > 2 > 1) // false！
// 3 > 2 = true
// true > 1 = 1 > 1 = false

// 正确写法
console.log(1 < 2 && 2 < 3) // true

// + 转数值
console.log(+'42') // 42
console.log(+'hello') // NaN
console.log(+true) // 1
console.log(+new Date()) // 时间戳

// - 转负数值
console.log(-'42') // -42

// 常见写法
const timestamp = +new Date()
const num = +inputValue || 0

// 语法错误，需要加括号明确优先级
// console.log(a || b ?? c)  // SyntaxError

console.log((a || b) ?? c) // OK
console.log(a || (b ?? c)) // OK