JavaScript 操作符详解

var age = 29
++age

// 相同的执行效果
var age = 29
age = age + 1

var age = 29
--age

var num1 = 2
var num2 = 20

var num3 = --num1 + num2 // 等于 21
var num4 = num1 + num2 // 等于 21

var num1 = 2
var num2 = 20

var num3 = num1-- + num2 //等于22
var num4 = num1 + num2 // 等于 21

var s1 = "2"
var s2 = "z"
var b = false
var f = 1.1
var o = {
  valueOf: function () {
    return -1
  }
}

s1++ // 值变成数值 3
s2++ // 值变成 NaN
b++ // 值变成数值 1
f-- // 值变成 0.10000000000000009（由于浮点舍入错误所致）
o-- // 值变成数值-2

var num = 25
num = +num // 仍然是 25

var s1 = "01"
var s2 = "1.1"
var s3 = "z"
var b = false
var f = 1.1
var o = {
  valueOf: function () {
    return -1
  }
}

s1 = +s1 // 值变成数值 1
s2 = +s2 // 值变成数值 1.1
s3 = +s3 // 值变成 NaN

b = +b // 值变成数值 0
f = +f // 值未变，仍然是 1.1
o = +o // 值变成数值-1

var num = 25
num = -num // 变成了-25

var s1 = "01"
var s2 = "1.1"
var s3 = "z"
var b = false
var f = 1.1
var o = {
  valueOf: function () {
    return -1
  }
}

s1 = -s1 // 值变成了数值-1
s2 = -s2 // 值变成了数值-1.1
s3 = -s3 // 值变成了 NaN

b = -b // 值变成了数值 0
f = -f // 变成了-1.1
o = -o // 值变成了数值 1

var num = -18

alert(num.toString(2)) // "-10010"

0 & 0 = 0
0 & 1 = 0
1 & 0 = 0
1 & 1 = 1

// 例如，3 & 5 的运算结果如下
0000 0011
0000 0101
0000 0001

0 | 0 = 0 0 | 1 = 1
1 | 0 = 1
1 | 1 = 1
// 例如，3 | 5 的运算结果如下
0000 0011
0000 0101
0000 0111

~ 1 = 0
~ 0 = 1
// 例如：~6 的运算结果如下
0000 0110
1111 1001

0000 0110
1111 1001

1000 0110  // 获取反码
1000 0111  // 获取补码

0 ^ 0 = 0
0 ^ 1 = 1
1 ^ 0 = 1
1 ^ 1 = 0

// 例如， 3 ^ 5 的运算结果
0000 0011
0000 0101
0000 0110


var result = 25 ^ 3;
alert(result); //26

//  25 = 0000 0000 0000 0000 0000 0000 0001 1001
//  3  = 0000 0000 0000 0000 0000 0000 0000 0011
-----------------------------------------------
// XOR = 0000 0000 0000 0000 0000 0000 0001 1010     26

a = 1010 1110
a = a << 2
a = 1011 1000  // 左移 2 位的结果

var oldValue = 2; // 等于二进制的 10
var newValue = oldValue << 5; // 等于二进制的 1000000，十进制的 64

var oldValue = 64 // 等于二进制的 1000000

var newValue = oldValue >> 5 // 等于二进制的 10 ，即十进制的 2

var oldValue = 64 // 等于二进制的 1000000

var newValue = oldValue >>> 5 // 等于二进制的 10 ，即十进制的 2

var oldValue = -64 // -64的二进制11111111111111111111111111000000

var newValue = oldValue >>> 5 // 00000111111111111111111111111110 等于十进制的 134217726

1 + 1 // 2
"1" + "2" // "12"
"hello" + "world" // "helloworld"

1 + 2 // 3
"1" + "2" // "12"
"1" + 2 // "12"
1 + {} // "1[object Object]"
true + false // 1 布尔值会先转为数字，再进行运算
1 + null // 1 null会转化为0，再进行计算
1 + undefined // NaN undefined 转化为数字是 NaN

3 - 1 // 2
3 - true // 2（true 转为 1）
3 - "" // 3（"" 转为 0）
3 - null // 3（null 转为 0）
NaN - 1 // NaN

2 * 3 // 6
2 * '3' // 6（'3' 转为 3）
2 * null // 0（null 转为 0）
2 * undefined // NaN（undefined 转为 NaN）

6 / 2 // 3
6 / '2' // 3（'2' 转为 2）
6 / 0 // Infinity
0 / 0 // NaN

7 % 3 // 1
10 % 4 // 2
-7 % 3 // -1（结果符号与被除数相同）
7 % -3 // 1

Math.pow(2, 10) // 1024
2 ** 10 // 1024

// 负指数
2 ** -2 // 0.25

// 小数指数
4 ** 0.5 // 2（平方根）

let a = 2
a **= 10
console.log(a) // 1024

let a = 1
let b = 2
let c = 3
let d = 4
a += 1 // 2
b -= 2 // 0
c *= 3 // 9
d /= 4 // 1

!false // true
!0 // true
!"" // true
!null // true
!undefined // true

!true // false
!1 // false
!"hello" // false
!{} // false

!!"blue" // true
!!0 // false
!!NaN // false
!!"" // false
!!12345 // true
!!null // false
!!undefined // false
!!{} // true

true && true // true
true && false // false
false && true // false
false && false // false

// 非布尔值
1 && 2 // 2
0 && 2 // 0
null && 2 // null
undefined && 2 // undefined
{} && 'hello' // 'hello'

let x = 0
false && (x = 1) // false
console.log(x) // 0，赋值操作未执行

// 传统写法
if (data) {
  setData(data)
}

// 简化写法
data && setData(data)

true || true // true
true || false // true
false || true // true
false || false // false

// 非布尔值
1 || 2 // 1
0 || 2 // 2
null || 'hello' // 'hello'
undefined || {} // {}

let x = 0
true || (x = 1) // true
console.log(x) // 0，赋值操作未执行

// 传统写法
let datas
if (data) {
  datas = data
} else {
  datas = {}
}

// 简化写法
let datas = data || {}

// 注意：如果 data 是 falsy 值（0, '', false, null, undefined），都会使用默认值 {}

const data = 0

// 使用 ||：0 会被视为 falsy 值
const result1 = data || 100 // 100

// 使用 ??：只有 null 和 undefined 才会使用默认值
const result2 = data ?? 100 // 0

// 相等比较
var result1 = "55" == 55 // true，因为转换后相等
var result2 = "55" === 55 // false，因为不同的数据类型不相等

// 不等比较
var result1 = "55" != 55 // false，因为转换后相等
var result2 = "55" !== 55 // true，因为不同的数据类型不相等

null == undefined // true，它们是类似的值
null === undefined // false，它们是不同类型的值

const obj1 = { a: 1 }
const obj2 = { a: 1 }
const obj3 = obj1

obj1 == obj2 // false，不同对象
obj1 === obj2 // false，不同对象
obj1 === obj3 // true，同一对象引用

// 不推荐
if (value == "5") { }  // 会匹配 5 和 "5"

// 推荐
if (value === "5") { } // 只匹配字符串 "5"

const a = [1, 2, 3]
const b = [4, 5, 6]

const c = [...a] // [1, 2, 3]
const d = [...a, ...b] // [1, 2, 3, 4, 5, 6]
const e = [...a, 4, 5] // [1, 2, 3, 4, 5]

const list = document.getElementsByTagName('a')
const arr = [...list]

const obj1 = { a: 1, b: 2 }
const obj2 = { c: 3, d: 4 }
const merged = { ...obj1, ...obj2 } // { a: 1, b: 2, c: 3, d: 4 }

const obj1 = { a: 1, b: 2 }
const obj2 = { b: 3, c: 4 }
const merged = { ...obj1, ...obj2 } // { a: 1, b: 3, c: 4 }

const str = "hello"
;[...str] // ["h", "e", "l", "l", "o"]

const f = (foo, bar) => console.log(foo, bar)
const a = [1, 2]
f(...a) // 1 2

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const result = sum(...numbers) // 15

// Set
const s = new Set()
s.add(1)
s.add(2)
const arr = [...s] // [1, 2]

// Generator 函数
function* gen() {
  yield 1
  yield 2
  yield 3
}
const arr = [...gen()] // [1, 2, 3]

// Map
const m = new Map()
m.set(1, 1)
m.set(2, 2)
const arr = [...m] // [[1, 1], [2, 2]]

condition ? valueIfTrue : valueIfFalse

// 基本用法
const age = 18
const status = age >= 18 ? '成年' : '未成年' // '成年'

// 嵌套使用（不推荐，可读性差）
const score = 85
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D'

// 多条件判断
const isMember = true
const price = isMember ? 100 * 0.8 : 100

// 函数调用
const result = isValid ? processData() : handleError()

// if-else 写法
let status
if (age >= 18) {
  status = '成年'
} else {
  status = '未成年'
}

// 三元运算符写法
const status = age >= 18 ? '成年' : '未成年'

let a = 10
let b = 'hello'

let a = 10
a += 5 // a = 15
a -= 3 // a = 12
a *= 2 // a = 24
a /= 4 // a = 6
a %= 4 // a = 2

// 位运算复合赋值
let b = 8
b <<= 2 // b = 32
b >>= 1 // b = 16

// 逻辑赋值运算符（ES2021）
let x = null
x ??= "default" // x = "default"（null/undefined 时赋值）

let y = 0
y ||= 42 // y = 42（falsy 时赋值）

let z = { count: 5 }
z.count &&= z.count * 2 // z.count = 10（truthy 时赋值）

flowchart TD
    A["a.x = a = {n:2}"] --> B["第 1 步：对 a.x 求值"]
    B --> C["得到 Reference {base: 原始对象{n:1}, name: 'x'}"]
    C --> D["第 2 步：对 a = {n:2} 求值"]
    D --> E["将变量 a 重新绑定为 {n:2}"]
    E --> F["赋值表达式 a = {n:2} 的结果为 {n:2}"]
    F --> G["第 3 步：PutValue 到步骤 1 的 Reference"]
    G --> H["将 {n:2} 写入原始对象 {n:1} 的 x 属性"]
    H --> I["最终状态：a → {n:2}（无 x 属性）"]
    I --> J["原始对象 {n:1, x: {n:2}} 已无引用指向 a"]

let a = {n:1}
a.x = a = {n:2}

// ===== 1. 完整逐步推演 =====
let a = {n: 1}
a.x = a = {n: 2}

console.log(a)     // {n: 2} — a 指向新对象
console.log(a.x)   // undefined — 新对象没有 x 属性

// ===== 2. 用第二个引用观察原始对象 =====
let a2 = {n: 1}
const ref = a2           // ref 保存对原始对象的引用
a2.x = a2 = {n: 2}


  // ... 中间省略 ...

function demo() {
  var x = y = 100  // 等价于：y = 100; var x = 100;
}
demo()
console.log(typeof y)  // 'number' — y 成为全局变量
console.log(typeof x)  // 'undefined' — x 是局部变量

// 不推荐
a.x = a = {n: 2}

// 推荐
a = {n: 2}
a.x = {n: 2}  // 如果确实需要在新对象上设置 x

// 安全：简单变量的链式赋值
let x, y, z
x = y = z = 0  // 没有属性访问，所有变量都正确赋值

// 不安全：涉及属性访问的链式赋值
obj.a = obj.b = value  // obj.a 的 Reference 可能受 obj.b 的影响

const author = {
  name: "CUGGZ",
  age: 18
}

"height" in author // false
"age" in author // true
"name" in author // true

const arr = ["hello", "jue", "jin"]
"length" in arr // true（数组自带属性）
"push" in arr // true（继承自 Array.prototype）
"forEach" in arr // true（继承自 Array.prototype）

const obj = {}

// in 操作符检查原型链
"toString" in obj // true（继承自 Object.prototype）
obj.hasOwnProperty("toString") // false（只检查自身属性）

// 只检查自身属性
obj.prop = "value"
"prop" in obj // true
obj.hasOwnProperty("prop") // true

// 检查对象是否包含某个属性
if ("name" in user) {
  console.log(user.name)
}

// 检查数组索引
if (index in arr) {
  console.log(arr[index])
}

const o = {}
const a = { x: 10 }
o.a = a

delete o.a // o.a 属性被删除
console.log(o.a) // undefined
console.log(a.x) // 10，因为 { x: 10 } 对象依然被 a 引用，所以不会被回收

const arr = [1, 2, 3, 4]
delete arr[2]
console.log(arr) // [1, 2, empty, 4]
console.log(arr.length) // 4（长度不变）
console.log(arr[2]) // undefined

// 如果要真正删除数组元素，使用 splice
arr.splice(2, 1)
console.log(arr) // [1, 2, 4]

// 1. 使用 var 声明的变量
var a = 1
delete a // false（严格模式下抛出错误）
console.log(a) // 1

// 2. 使用 let/const 声明的变量
let b = 2
delete b // false
console.log(b) // 2

// 3. 函数声明
function foo() {}
delete foo // false

// 4. 内置对象的原型属性
delete Object.prototype // false

// 5. 不可配置的属性
const obj = {}
Object.defineProperty(obj, 'prop', {
  configurable: false,
  value: 1
})
delete obj.prop // false

const obj = { a: 1 }
console.log(delete obj.a) // true
console.log(delete obj.b) // true（属性不存在也返回 true）

var c = 3
console.log(delete c) // false（无法删除 var 声明的变量）

// 使用条件判断
const name = dogName ? dogName : "default"

// 使用 || 运算符（有缺陷）
const name = dogName || "default"

const dogName = false
const name = dogName || "default" // name = "default"
// 问题：false 是有效值，不应该使用默认值

const count = 0
const result = count || 10 // result = 10
// 问题：0 是有效值，不应该使用默认值

const dogName = false
const name = dogName ?? "default" // name = false

const count = 0
const result = count ?? 10 // result = 0

const value1 = null
const result1 = value1 ?? "default" // result1 = "default"

const value2 = undefined
const result2 = value2 ?? "default" // result2 = "default"

// 传统写法
const name = system && system.user && system.user.addr && system.user.addr.province

// 使用可选链
const name = system?.user?.addr?.province?.name

// 结合空值合并
const name = system?.user?.addr?.province?.name ?? "default"

// 1. 对象属性访问
obj?.prop
// 等同于
obj == null ? undefined : obj.prop

// 2. 对象属性访问（方括号表示法）
obj?.[expr]
// 等同于
obj == null ? undefined : obj[expr]

// 3. 函数调用
obj?.method()
// 等同于
obj == null ? undefined : obj.method()

// 4. 函数属性调用
func?.()
// 等同于
func == null ? undefined : func()

// 访问嵌套属性
const user = {
  profile: {
    address: {
      city: 'Beijing'
    }
  }
}

const city = user?.profile?.address?.city // 'Beijing'
const country = user?.profile?.address?.country // undefined

// 数组访问
const arr = [1, 2, 3]
const first = arr?.[0] // 1
const fourth = arr?.[3] // undefined

// 函数调用
const obj = {
  method: () => 'hello'
}
const result = obj?.method?.() // 'hello'

const obj2 = {}
const result2 = obj2?.method?.() // undefined

// 错误用法
obj?.prop = 'value' // 语法错误

// 如果 user 未定义，会抛出 ReferenceError
user?.name // ReferenceError: user is not defined

delete obj?.prop // 允许，但不推荐

// 优先级示例
let result = 2 + 3 * 4    // 结果: 14，先乘后加
let result = (2 + 3) * 4  // 结果: 20，括号改变优先级

// 逻辑操作符优先级
let a = true || false && false   // 结果: true（&& 优先级高于 ||）
let b = (true || false) && false // 结果: false（括号改变优先级）

// 赋值与比较
let x = 5
let y = x == 5   // y = true，先比较后赋值
let z = x = 10   // z = 10，赋值从右到左

// 不推荐
let result = a + b * c || d && e

// 推荐
let result = (a + (b * c)) || (d && e)

// 不推荐
let result = (a + b * c - d / e) > 0 && (f || g) ? h : i

// 推荐
let temp1 = a + b * c - d / e
let temp2 = f || g
let result = temp1 > 0 && temp2 ? h : i

// ===== 1. delete 0 — 操作 Value，无操作 =====
console.log(delete 0)        // true（0 是 Value，不是 Reference）
console.log(delete "hello")  // true（同上）
console.log(delete true)     // true（同上）

// ===== 2. delete x — 操作 Reference，取决于绑定类型 =====
var a = 1
console.log(delete a)  // false（var 声明，不可删除）
console.log(a)         // 1（a 仍然存在）

// 隐式全局变量（未声明直接赋值）
function leak() {

  // ... 中间省略 ...

// 隐式全局变量：configurable = true
console.log(Object.getOwnPropertyDescriptor(globalThis, 'implicit').configurable)
// true

delete declared   // false
delete implicit   // true

// 不推荐
if (value == "5") { } // 会匹配 5 和 "5"

// 推荐
if (value === "5") { } // 只匹配字符串 "5"

// 不推荐
const name = user && user.profile && user.profile.name ? user.profile.name : 'Unknown'

// 推荐
const name = user?.profile?.name ?? 'Unknown'

// 不推荐
if (data) {
  processData(data)
}

// 推荐
data && processData(data)

// 设置默认值
// 不推荐
const name = userName !== null && userName !== undefined ? userName : 'Guest'

// 推荐
const name = userName ?? 'Guest'

// 危险：可能导致字符串拼接
let result = '1' + 2 + 3  // "123"

// 明确类型转换
let result = Number('1') + 2 + 3  // 6
let result = +'1' + 2 + 3         // 6（一元加转换）

// 数组复制
const arr1 = [1, 2, 3]
const arr2 = [...arr1]  // [1, 2, 3]

// 对象合并
const obj1 = { a: 1, b: 2 }
const obj2 = { c: 3 }
const merged = { ...obj1, ...obj2 }  // { a: 1, b: 2, c: 3 }

// 数组合并
const combined = [...arr1, ...arr2]

// 判断奇偶数
const isEven = (n & 1) === 0  // 比 n % 2 === 0 更快

// 取整
const int = ~~3.14  // 3（相当于 Math.floor(3.14)）

// 交换变量
let a = 1, b = 2
a = a ^ b
b = a ^ b
a = a ^ b
// 现在 a = 2, b = 1

// 陷阱：意外的类型转换
0 == false      // true
'' == false     // true
null == undefined // true
[] == false     // true
[] == ![]       // true（![] = false，[] = "" = 0 = false）

// 解决方案：使用全等
0 === false     // false
'' === false    // false
null === undefined // false

// 陷阱：意外的字符串拼接
[1, 2] + [3, 4]  // "1,23,4"
{} + []          // 0（在某些环境中）
[] + {}          // "[object Object]"

// 解决方案：明确类型转换
Number([1, 2]) + Number([3, 4])  // NaN
String([1, 2]) + String([3, 4])  // "1,23,4"

// 陷阱：浮点数精度
0.1 + 0.2 === 0.3  // false
0.1 + 0.2          // 0.30000000000000004

// 解决方案：使用容差比较
const epsilon = 0.000001
Math.abs(0.1 + 0.2 - 0.3) < epsilon  // true

// 或转换为整数运算
(0.1 * 10 + 0.2 * 10) / 10 === 0.3  // true

// 陷阱：返回值不一定是布尔值
true || 'hello'   // true
false || 'hello'  // 'hello'
0 || 'hello'      // 'hello'
null || 'hello'   // 'hello'

// 解决方案：如需布尔值，使用 Boolean() 或 !!
!!(false || 'hello')  // true
Boolean(false || 'hello')  // true

// 陷阱：无法删除某些属性
var a = 1
delete a  // false，a 依然存在

window.b = 2
delete b  // true（在非严格模式下）

// 解决方案：将变量设为 undefined 或 null
var a = 1
a = null  // 或 a = undefined

// 陷阱：in 检查原型链
'toString' in {}  // true（继承自 Object.prototype）

// 解决方案：使用 hasOwnProperty
{}.hasOwnProperty('toString')  // false
Object.prototype.hasOwnProperty.call({}, 'toString')  // false

// 陷阱：字符串按字典序比较
'10' > '9'   // false（字符串比较）
'10' > 9     // true（'10' 转为数字 10）

// 解决方案：明确类型转换
Number('10') > Number('9')  // true

// 陷阱：在表达式中使用可能产生副作用
let i = 1
let arr = [i++, ++i]  // [1, 3]
// i 的值为 3

// 解决方案：避免在复杂表达式中使用
let i = 1
let arr = [i, i + 2]  // [1, 3]
i += 2

// 使用位操作符取整
const num = 3.14

// 慢
const int1 = Math.floor(num)  // ~25ns

// 快
const int2 = ~~num            // ~10ns
const int3 = num | 0          // ~10ns
const int4 = num >> 0         // ~10ns

// 条件执行
const result = isValid && processLargeData()  // 如果 isValid 为 false，不会执行 processLargeData

// 默认值
const config = userConfig || defaultConfig    // 如果 userConfig 存在，不会评估 defaultConfig

// 不推荐：重复计算
for (let i = 0; i < arr.length; i++) { }

// 推荐：缓存计算结果
for (let i = 0, len = arr.length; i < len; i++) { }

// 或使用现代语法
for (let item of arr) { }

// 数组复制
const arr = [1, 2, 3]

// 中等性能
const arr1 = [...arr]

// 更快（对于大数组）
const arr2 = arr.slice()

// 对象复制
const obj = { a: 1 }

// 中等性能
const obj1 = { ...obj }

// 更快（对于大对象）
const obj2 = Object.assign({}, obj)

const str = 'hello world'

// 简单操作：字符串方法更快
str.indexOf('world') > -1  // 快
str.includes('world')       // 最快

// 复杂模式：正则表达式更合适
/world/.test(str)          // 中等速度

const str = '123'

// 从快到慢
const num1 = +str          // 最快
const num2 = str * 1       // 快
const num3 = str - 0       // 快
const num4 = Number(str)   // 中等
const num5 = parseInt(str) // 慢（但更安全）

const obj = { a: { b: { c: 1 } } }

// 不推荐：重复访问
const result = obj.a.b.c + obj.a.b.c

// 推荐：缓存引用
const abc = obj.a.b.c
const result = abc + abc