TypeScript 支持的常见运算符

时间：2024-11-07 06:56:55

下面是对 TypeScript 支持的常见运算符的汇总，包括 算术运算符、赋值运算符、比较运算符 等内容，另外补充了 ! 和 !! 运算符的用法。

1. 算术运算符

  • + 加法运算符
  • - 减法运算符
  • * 乘法运算符
  • / 除法运算符
  • % 取余运算符
  • ++ 自增运算符
  • -- 自减运算符
let a = 10, b = 5;

console.log(a + b);  // 15
console.log(a - b);  // 5
console.log(a * b);  // 50
console.log(a / b);  // 2
console.log(a % b);  // 0
console.log(++a);    // 11
console.log(--b);    // 4
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2. 赋值运算符

  • = 简单赋值运算符
  • += 加法赋值运算符
  • -= 减法赋值运算符
  • *= 乘法赋值运算符
  • /= 除法赋值运算符
  • %= 取余赋值运算符
let x = 10;
x += 5;  // x = x + 5 -> x = 15
x -= 3;  // x = x - 3 -> x = 12
x *= 2;  // x = x * 2 -> x = 24
x /= 4;  // x = x / 4 -> x = 6
x %= 4;  // x = x % 4 -> x = 2
console.log(x);  // 2
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3. 比较运算符

  • == 等于运算符
  • === 全等运算符（类型和值都相等）
  • != 不等于运算符
  • !== 不全等运算符（类型或值不相等）
  • > 大于运算符
  • < 小于运算符
  • >= 大于等于运算符
  • <= 小于等于运算符
let a = 10, b = 20;

console.log(a == b);  // false
console.log(a === 10);  // true
console.log(a != b);  // true
console.log(a !== "10");  // true
console.log(a > b);  // false
console.log(a < b);  // true
console.log(a >= 10);  // true
console.log(a <= 10);  // true
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

4. 逻辑运算符

  • && 与运算符
  • || 或运算符
  • ! 非运算符
let a = true, b = false;

console.log(a && b);  // false
console.log(a || b);  // true
console.log(!a);      // false
  • 1
  • 2
  • 3
  • 4
  • 5

5. 位运算符

  • & 按位与运算符
  • | 按位或运算符
  • ^ 按位异或运算符
  • ~ 按位取反运算符
  • << 左移运算符
  • >> 右移运算符
  • >>> 无符号右移运算符
let x = 5, y = 3;  // 5 = 0101, 3 = 0011

console.log(x & y);   // 1 (0001)
console.log(x | y);   // 7 (0111)
console.log(x ^ y);   // 6 (0110)
console.log(~x);      // -6 (~0101 = 1010)
console.log(x << 1);  // 10 (1010)
console.log(x >> 1);  // 2 (0010)
console.log(x >>> 1); // 2 (0010)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

6. 条件（三元）运算符

  • condition ? expr1 : expr2 如果条件为真，返回 expr1，否则返回 expr2 
let age = 18;
let result = age >= 18 ? "Adult" : "Minor";
console.log(result);  // "Adult"
  • 1
  • 2
  • 3

7. 类型运算符

  • typeof 获取变量的类型
  • instanceof 判断对象是否为某个类的实例
let name = "John";
console.log(typeof name);  // "string"

let obj = new Date();
console.log(obj instanceof Date);  // true
  • 1
  • 2
  • 3
  • 4
  • 5

8. 空值合并运算符

  • ?? 如果左侧为 null 或 undefined，返回右侧的值
let x = null;
let y = 10;
console.log(x ?? y);  // 10

let z = undefined;
console.log(z ?? y);  // 10

let w = 0;
console.log(w ?? y);  // 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

9. 其他运算符

  • in 判断对象是否包含某个属性
  • delete 删除对象的属性
  • void 表达式不返回值
let person = { name: "Alice", age: 25 };

console.log("name" in person);  // true
console.log("address" in person);  // false

delete person.age;
console.log(person);  // { name: "Alice" }

let a = void 0;  // a = undefined
console.log(a);  // undefined
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

10. 解构赋值运算符

  • 用于解构对象或数组
// 解构数组
let [x, y] = [1, 2];
console.log(x);  // 1
console.log(y);  // 2

// 解构对象
let { name, age } = { name: "John", age: 30 };
console.log(name);  // "John"
console.log(age);   // 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

11. 交叉类型运算符（&）

交叉类型运算符 & 用于合并多个类型（即交叉类型）。它将多个类型的成员合并成一个新类型，要求这个新类型包含所有成员。

interface Person {
  name: string;
  age: number;
}

interface Contact {
  email: string;
  phone: string;
}

type PersonWithContact = Person & Contact;

const john: PersonWithContact = {
  name: "John",
  age: 30,
  email: "john@example.com",
  phone: "123-456-7890"
};

console.log(john);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

12. !（非运算符）

在 TypeScript 中，! 既是 逻辑非 运算符（用于反转布尔值），也可以作为 非空断言 运算符，用于告诉 TypeScript 编译器某个值不会是 null 或 undefined。

示例：
let user: { name: string } | null = { name: "Alice" };

// 使用非空断言（!）
console.log(user!.name);  // "Alice"
  • 1
  • 2
  • 3
  • 4

13. !!（双重非运算符）

!! 是两次 逻辑非 运算符，常用于将任意值转换为布尔值。它将值转换为 true 或 false。

let a = 1;    // true
let b = 0;    // false
let c = "";   // false
let d = "abc"; // true

console.log(!!a);  // true
console.log(!!b);  // false
console.log(!!c);  // false
console.log(!!d);  // true
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

总结：

TypeScript 支持多种运算符，包括常见的算术、赋值、比较、逻辑运算符等。此外，它也支持交叉类型运算符 &，以及用于类型断言和布尔值转换的 ! 和 !! 运算符。在开发过程中，熟练使用这些运算符可以提高代码的灵活性和可读性。

相关文章