TypeScript 运算符

TypeScript 支持与 JavaScript 相同的运算符，这些运算符用于执行各种操作，如算术计算、比较值、逻辑操作等。本文将详细介绍 TypeScript 中的各种运算符。

1. 算术运算符

算术运算符用于执行基本的数学运算。

运算符	描述	示例
+	加法	1 + 2 // 3
-	减法	3 - 1 // 2
*	乘法	2 * 3 // 6
/	除法	6 / 2 // 3
%	取模（余数）	7 % 3 // 1
++	自增	let a = 1; a++; // a 变为 2
--	自减	let a = 2; a--; // a 变为 1

示例

let a: number = 10;
let b: number = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335
console.log(a % b); // 1

// 自增和自减
let c: number = 5;
console.log(c++); // 5（先输出后自增）
console.log(c); // 6

let d: number = 5;
console.log(++d); // 6（先自增后输出）
console.log(d); // 6

let e: number = 5;
console.log(e--); // 5（先输出后自减）
console.log(e); // 4

let f: number = 5;
console.log(--f); // 4（先自减后输出）
console.log(f); // 4

2. 赋值运算符

赋值运算符用于给变量赋值。

运算符	描述	示例
=	简单赋值	let a = 1;
+=	加法赋值	a += 2; // 等同于 a = a + 2;
-=	减法赋值	a -= 2; // 等同于 a = a - 2;
*=	乘法赋值	a *= 2; // 等同于 a = a * 2;
/=	除法赋值	a /= 2; // 等同于 a = a / 2;
%=	取模赋值	a %= 2; // 等同于 a = a % 2;

示例

let a: number = 10;

// 简单赋值
let b: number = a;
console.log(b); // 10

// 加法赋值
a += 5;
console.log(a); // 15

// 减法赋值
a -= 3;
console.log(a); // 12

// 乘法赋值
a *= 2;
console.log(a); // 24

// 除法赋值
a /= 4;
console.log(a); // 6

// 取模赋值
a %= 5;
console.log(a); // 1

3. 比较运算符

比较运算符用于比较两个值，返回布尔值。

运算符	描述	示例
==	等于（类型转换）	1 == "1" // true
===	严格等于（类型和值都相等）	1 === "1" // false
!=	不等于（类型转换）	1 != "1" // false
!==	严格不等于（类型或值不相等）	1 !== "1" // true
>	大于	5 > 3 // true
<	小于	3 < 5 // true
>=	大于等于	5 >= 5 // true
<=	小于等于	3 <= 5 // true

示例

// 等于和严格等于
console.log(1 == "1"); // true（类型转换）
console.log(1 === "1"); // false（类型不同）
console.log(1 == 1); // true
console.log(1 === 1); // true

// 不等于和严格不等于
console.log(1 != "1"); // false（类型转换）
console.log(1 !== "1"); // true（类型不同）
console.log(1 != 2); // true
console.log(1 !== 2); // true

// 大于、小于、大于等于、小于等于
console.log(5 > 3); // true
console.log(3 < 5); // true
console.log(5 >= 5); // true
console.log(3 <= 5); // true
console.log(5 > 5); // false
console.log(3 < 3); // false

4. 逻辑运算符

逻辑运算符用于执行逻辑操作，返回布尔值。

运算符	描述	示例
&&	逻辑与	true && false // false
`		`
!	逻辑非	!true // false

示例

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

// 逻辑或
console.log(true || true); // true
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(!1); // false

短路求值

逻辑运算符具有短路求值的特性：

• &&：如果第一个操作数为 false，则不计算第二个操作数
• ||：如果第一个操作数为 true，则不计算第二个操作数

// 逻辑与的短路求值
let a: number = 0;
let b: number = 0;

false && (a = 1); // 第一个操作数为 false，不执行第二个操作数
console.log(a); // 0

true && (b = 1); // 第一个操作数为 true，执行第二个操作数
console.log(b); // 1

// 逻辑或的短路求值
let c: number = 0;
let d: number = 0;

true || (c = 1); // 第一个操作数为 true，不执行第二个操作数
console.log(c); // 0

false || (d = 1); // 第一个操作数为 false，执行第二个操作数
console.log(d); // 1

5. 位运算符

位运算符用于对二进制位进行操作。

运算符	描述	示例
&	按位与	5 & 3 // 1 (101 & 011 = 001)
`	`	按位或
^	按位异或	5 ^ 3 // 6 (101 ^ 011 = 110)
~	按位非	~5 // -6 (~101 = -110)
<<	左移	5 << 1 // 10 (101 << 1 = 1010)
>>	右移（有符号）	5 >> 1 // 2 (101 >> 1 = 10)
>>>	右移（无符号）	5 >>> 1 // 2 (101 >>> 1 = 10)

示例

// 按位与
console.log(5 & 3); // 1 (101 & 011 = 001)

// 按位或
console.log(5 | 3); // 7 (101 | 011 = 111)

// 按位异或
console.log(5 ^ 3); // 6 (101 ^ 011 = 110)

// 按位非
console.log(~5); // -6 (~101 = -110)

// 左移
console.log(5 << 1); // 10 (101 << 1 = 1010)
console.log(5 << 2); // 20 (101 << 2 = 10100)

// 右移（有符号）
console.log(5 >> 1); // 2 (101 >> 1 = 10)
console.log(5 >> 2); // 1 (101 >> 2 = 1)

// 右移（无符号）
console.log(5 >>> 1); // 2 (101 >>> 1 = 10)
console.log(5 >>> 2); // 1 (101 >>> 2 = 1)

6. 一元运算符

一元运算符只操作一个操作数。

运算符	描述	示例
+	一元加	+1 // 1
-	一元减	-1 // -1
++	自增	let a = 1; a++; // a 变为 2
--	自减	let a = 2; a--; // a 变为 1
!	逻辑非	!true // false
~	按位非	~5 // -6
typeof	获取类型	typeof "hello" // "string"
void	执行表达式并返回 undefined	void 0 // undefined
delete	删除对象属性	delete obj.prop
await	等待 Promise 解析	await promise

示例

// 一元加
console.log(+"1"); // 1（将字符串转换为数字）
console.log(+true); // 1（将布尔值转换为数字）

// 一元减
console.log(-1); // -1
console.log(-"1"); // -1（将字符串转换为数字并取反）

// 自增和自减
let a: number = 1;
console.log(a++); // 1（先输出后自增）
console.log(++a); // 3（先自增后输出）

// 逻辑非
console.log(!true); // false
console.log(!false); // true
console.log(!0); // true
console.log(!1); // false

// 按位非
console.log(~5); // -6

// typeof
console.log(typeof "hello"); // "string"
console.log(typeof 123); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function() {}); // "function"

// void
console.log(void 0); // undefined
console.log(void (1 + 2)); // undefined

// delete
const obj = { a: 1, b: 2 };
delete obj.a;
console.log(obj); // { b: 2 }

7. 三元运算符

三元运算符是一种条件运算符，它接受三个操作数：条件表达式、条件为真时的值、条件为假时的值。

条件表达式 ? 值1 : 值2

示例

let age: number = 18;
let message: string = age >= 18 ? "成年人" : "未成年人";
console.log(message); // 成年人

// 嵌套三元运算符
let score: number = 85;
let grade: string = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";
console.log(grade); // B

8. 字符串运算符

字符串运算符用于连接字符串。

运算符	描述	示例
+	字符串连接	"Hello" + " " + "World" // "Hello World"
+=	字符串连接赋值	let str = "Hello"; str += " World"; // "Hello World"

示例

// 字符串连接
let str1: string = "Hello";
let str2: string = "World";
console.log(str1 + " " + str2); // "Hello World"

// 字符串连接赋值
let str: string = "Hello";
str += " World";
console.log(str); // "Hello World"

// 字符串与其他类型的连接
console.log("The answer is: " + 42); // "The answer is: 42"
console.log("Is it true? " + true); // "Is it true? true"

9. 关系运算符

关系运算符用于检查两个值之间的关系。

运算符	描述	示例
in	检查对象是否包含指定属性	"name" in { name: "John" } // true
instanceof	检查对象是否是指定类型的实例	new Date() instanceof Date // true

示例

// in 运算符
const person = { name: "John", age: 30 };
console.log("name" in person); // true
console.log("age" in person); // true
console.log("email" in person); // false

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

// instanceof 运算符
console.log(new Date() instanceof Date); // true
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log("hello" instanceof String); // false（字符串字面量不是 String 对象的实例）
console.log(new String("hello") instanceof String); // true（String 对象是 String 对象的实例）

10. 运算符优先级

运算符的优先级决定了表达式中运算的执行顺序。优先级高的运算符先执行，优先级低的运算符后执行。

优先级	运算符	结合性
1	() [] . ?.	左到右
2	! ~ ++ -- + - typeof void delete await	右到左
3	**	右到左
4	* / %	左到右
5	+ -	左到右
6	<< >> >>>	左到右
7	< <= > >= in instanceof	左到右
8	== != === !==	左到右
9	&	左到右
10	^	左到右
11	`	`
12	&&	左到右
13	`
14	??	左到右
15	?:	右到左
16	= += -= *= /= %= <<= >>= >>>= &= ^= `	=`
17	,	左到右

示例

// 运算符优先级示例
console.log(1 + 2 * 3); // 7（乘法优先级高于加法）
console.log((1 + 2) * 3); // 9（括号改变优先级）
console.log(3 > 2 && 2 > 1); // true（比较运算符优先级高于逻辑与）
console.log(3 > (2 && 2) > 1); // false（逻辑与优先级高于比较运算符）
console.log(!true || false); // false（逻辑非优先级高于逻辑或）
console.log(!(true || false)); // false（括号改变优先级）

11. 可选链运算符

可选链运算符（?.）用于安全地访问嵌套对象的属性，当中间的属性不存在时，不会抛出错误，而是返回 undefined。

示例

const person = {
  name: "John",
  address: {
    street: "123 Main St",
    city: "New York"
  }
};

// 正常访问
console.log(person.name); // "John"
console.log(person.address.city); // "New York"

// 使用可选链运算符
console.log(person.address?.zipCode); // undefined（address 存在，但 zipCode 不存在）
console.log(person.contact?.email); // undefined（contact 不存在）

// 可选链运算符与函数调用
const user = {
  name: "John",
  greet: function() {
    return `Hello, ${this.name}!`;
  }
};

console.log(user.greet?.()); // "Hello, John!"
console.log(user.sayHello?.()); // undefined（sayHello 方法不存在）

// 可选链运算符与数组访问
const arr = [1, 2, 3];
console.log(arr[0]); // 1
console.log(arr[5]?.toString()); // undefined（索引 5 不存在）

12. 空值合并运算符

空值合并运算符（??）用于提供默认值，当左侧表达式为 null 或 undefined 时，返回右侧表达式的值。

示例

// 空值合并运算符
let name: string | null = null;
let defaultName: string = name ?? "Unknown";
console.log(defaultName); // "Unknown"

name = "John";
defaultName = name ?? "Unknown";
console.log(defaultName); // "John"

// 与逻辑或运算符的区别
// 逻辑或运算符会将 falsy 值（如 0、空字符串、false）视为假值
let count: number | null = 0;
let defaultCount1: number = count || 10;
console.log(defaultCount1); // 10（0 被视为假值）

// 空值合并运算符只将 null 和 undefined 视为假值
let defaultCount2: number = count ?? 10;
console.log(defaultCount2); // 0（0 不被视为假值）

13. 赋值运算符的扩展

ES2021 引入了赋值运算符的扩展，包括逻辑与赋值（&&=）、逻辑或赋值（||=）和空值合并赋值（??=）。

逻辑与赋值（&&=）

当左侧表达式为真时，将右侧表达式的值赋给左侧变量。

let a: number = 10;
a &&= 20;
console.log(a); // 20（a 为真，所以赋值）

let b: number = 0;
b &&= 20;
console.log(b); // 0（b 为假，所以不赋值）

逻辑或赋值（||=）

当左侧表达式为假时，将右侧表达式的值赋给左侧变量。

let a: number = 0;
a ||= 20;
console.log(a); // 20（a 为假，所以赋值）

let b: number = 10;
b ||= 20;
console.log(b); // 10（b 为真，所以不赋值）

空值合并赋值（??=）

当左侧表达式为 null 或 undefined 时，将右侧表达式的值赋给左侧变量。

let a: number | null = null;
a ??= 20;
console.log(a); // 20（a 为 null，所以赋值）

let b: number | null = 0;
b ??= 20;
console.log(b); // 0（b 不为 null 或 undefined，所以不赋值）

let c: number | undefined = undefined;
c ??= 20;
console.log(c); // 20（c 为 undefined，所以赋值）

总结

TypeScript 支持多种运算符，包括：

• 算术运算符：用于执行基本的数学运算
• 赋值运算符：用于给变量赋值
• 比较运算符：用于比较两个值
• 逻辑运算符：用于执行逻辑操作
• 位运算符：用于对二进制位进行操作
• 一元运算符：只操作一个操作数
• 三元运算符：一种条件运算符
• 字符串运算符：用于连接字符串
• 关系运算符：用于检查两个值之间的关系
• 可选链运算符：用于安全地访问嵌套对象的属性
• 空值合并运算符：用于提供默认值
• 赋值运算符的扩展：包括逻辑与赋值、逻辑或赋值和空值合并赋值

了解这些运算符的使用方法和优先级，将帮助你编写更清晰、更高效的 TypeScript 代码。