其他运算符

赋值运算符

基本赋值

let a = 5;
let b = c = 10;  // 链式赋值

复合赋值

let a = 10;

a += 5;   // a = a + 5  → 15
a -= 3;   // a = a - 3  → 12
a *= 2;   // a = a * 2  → 24
a /= 4;   // a = a / 4  → 6
a %= 4;   // a = a % 4  → 2
a **= 3;  // a = a ** 3 → 8

// 逻辑赋值（ES2021）
let b = null;
b ||= "默认值";  // b = b || "默认值" → "默认值"

let c = 0;
c &&= 100;  // c = c && 100 → 0（c是假值）

let d = null;
d ??= "默认值";  // d = d ?? "默认值" → "默认值"

条件运算符

条件运算符?:是JavaScript中唯一的三元运算符。

基本语法

let age = 20;
let status = age >= 18 ? "成年" : "未成年";
console.log(status);  // "成年"

嵌套使用

let score = 85;
let grade = score >= 90 ? "A" :
            score >= 80 ? "B" :
            score >= 70 ? "C" :
            score >= 60 ? "D" : "F";
console.log(grade);  // "B"

应用场景

// 设置默认值
let name = "";
let displayName = name ? name : "匿名";

// 条件赋值
let x = 5;
let abs = x >= 0 ? x : -x;

// 函数返回
function getMax(a, b) {
    return a > b ? a : b;
}

逗号运算符

逗号运算符,从左到右执行表达式，返回最后一个表达式的值。

基本用法

let a = (1, 2, 3);
console.log(a);  // 3

let x = 1;
let y = (x++, x + 1);
console.log(x, y);  // 2 3

应用场景

// for循环中执行多个操作
for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(i, j);
}

// 变量声明
let a = 1, b = 2, c = 3;

// 函数返回前执行多个操作
function process() {
    let result;
    return result = compute(), save(result), result;
}

void运算符

void运算符执行表达式并返回undefined。

基本用法

console.log(void 0);        // undefined
console.log(void(1 + 1));   // undefined
console.log(void "东巴文");  // undefined

应用场景

// 阻止链接跳转
// <a href="javascript:void(0)" onclick="doSomething()">点击</a>

// 立即执行函数
void function() {
    console.log("执行");
}();

// 确保返回undefined
function doSomething() {
    return void someOperation();
}

delete运算符

delete运算符删除对象的属性。

基本用法

let user = {
    name: "东巴文",
    age: 1
};

console.log(delete user.age);  // true
console.log(user);             // { name: "东巴文" }

// 删除不存在的属性也返回true
console.log(delete user.email); // true

不可删除的属性

// 内置对象属性不可删除
console.log(delete Math.PI);  // false

// 使用var声明的变量不可删除
var x = 10;
console.log(delete x);        // false

// let和const声明的变量不可删除
let y = 20;
console.log(delete y);        // false

// 函数声明不可删除
function foo() {}
console.log(delete foo);      // false

删除数组元素

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

// 推荐使用splice
arr.splice(2, 1);
console.log(arr);        // [1, 2, 4, 5]

in运算符

in运算符检查属性是否存在于对象中。

基本用法

let user = {
    name: "东巴文",
    age: 1
};

console.log("name" in user);  // true
console.log("email" in user); // false
console.log("toString" in user); // true（继承的属性）

检查自有属性

let user = {
    name: "东巴文"
};

console.log("name" in user);           // true
console.log("toString" in user);       // true
console.log(user.hasOwnProperty("name"));      // true
console.log(user.hasOwnProperty("toString"));  // false

数组中使用

let arr = ["a", "b", "c"];
console.log(0 in arr);   // true（索引）
console.log(3 in arr);   // false
console.log("length" in arr); // true

instanceof运算符

instanceof运算符检查对象是否是某个构造函数的实例。

基本用法

let arr = [1, 2, 3];
console.log(arr instanceof Array);   // true
console.log(arr instanceof Object);  // true

let date = new Date();
console.log(date instanceof Date);   // true
console.log(date instanceof Object); // true

function User(name) {
    this.name = name;
}
let user = new User("东巴文");
console.log(user instanceof User);   // true
console.log(user instanceof Object); // true

原理

// instanceof检查原型链
function myInstanceof(obj, constructor) {
    let proto = Object.getPrototypeOf(obj);
    while (proto) {
        if (proto === constructor.prototype) {
            return true;
        }
        proto = Object.getPrototypeOf(proto);
    }
    return false;
}

console.log(myInstanceof([], Array));  // true

注意事项

// 原始值不是Object的实例
console.log(1 instanceof Number);   // false
console.log("a" instanceof String); // false
console.log(true instanceof Boolean); // false

// 使用包装对象
console.log(new Number(1) instanceof Number);  // true

// 跨框架问题
// 不同iframe的Array构造函数不同

typeof运算符

typeof运算符返回数据类型的字符串。

返回值

基本用法

console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"
console.log(typeof 123);        // "number"
console.log(typeof "东巴文");    // "string"
console.log(typeof true);       // "boolean"
console.log(typeof Symbol());   // "symbol"
console.log(typeof 10n);        // "bigint"
console.log(typeof {});         // "object"
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"

检测null

// 正确检测null
function isNull(value) {
    return value === null;
}

// 检测对象类型
function getType(value) {
    if (value === null) return "null";
    if (Array.isArray(value)) return "array";
    return typeof value;
}

可选链运算符

可选链运算符?.用于安全访问属性（已在逻辑运算符章节详细介绍）。

let user = {
    name: "东巴文",
    address: {
        city: "北京"
    }
};

console.log(user?.address?.city);     // "北京"
console.log(user?.phone?.number);     // undefined
console.log(user.address?.city);      // "北京"

空值合并运算符

空值合并运算符??用于设置默认值（已在逻辑运算符章节详细介绍）。

let value = null;
console.log(value ?? "默认值");  // "默认值"

let zero = 0;
console.log(zero ?? "默认值");   // 0
console.log(zero || "默认值");   // "默认值"

展开运算符

展开运算符...用于展开数组或对象。

数组展开

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// 合并数组
let merged = [...arr1, ...arr2];
console.log(merged);  // [1, 2, 3, 4, 5, 6]

// 复制数组
let copy = [...arr1];
console.log(copy);    // [1, 2, 3]

// 函数参数
function sum(a, b, c) {
    return a + b + c;
}
console.log(sum(...arr1));  // 6

对象展开

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };

// 合并对象
let merged = { ...obj1, ...obj2 };
console.log(merged);  // { a: 1, b: 2, c: 3, d: 4 }

// 复制对象
let copy = { ...obj1 };
console.log(copy);    // { a: 1, b: 2 }

// 覆盖属性
let obj = { a: 1, b: 2 };
let updated = { ...obj, b: 3 };
console.log(updated);  // { a: 1, b: 3 }

剩余运算符

剩余运算符...用于收集剩余的元素。

函数参数

function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4, 5));  // 15

function log(name, ...args) {
    console.log(name, args);
}
log("东巴文", 1, 2, 3);  // "东巴文" [1, 2, 3]

解构赋值

// 数组解构
let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(rest);   // [2, 3, 4, 5]

// 对象解构
let { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(a);      // 1
console.log(others); // { b: 2, c: 3 }

下一步

掌握了其他运算符后，让我们继续学习：

1. 条件语句 - 学习条件语句
2. 循环语句 - 学习循环语句
3. 异常处理 - 学习异常处理

东巴文（db-w.cn） - 让编程学习更简单

🛠️ 东巴文寄语：JavaScript提供了丰富的运算符，掌握它们能让你的代码更简洁高效。特别是展开运算符和可选链等新特性，能大大提高开发效率。在 db-w.cn，我们帮你掌握每一个工具！