TypeScript 中的运算符

TypeScript 中的运算符

本文解释了 TypeScript 中的运算符。

YouTube Video

TypeScript 中的运算符

TypeScript 中的运算符用于执行数值计算、值比较和逻辑操作。由于 TypeScript 使用与 JavaScript 类似的运算符,因此易于上手,但 TypeScript 通过类型安全允许进行更严格的操作。

主要运算符如下:。

算术运算符

算术运算符用于数值计算。

运算符 描述 示例 结果
+ 加法 5 + 3 8
- 减法 5 - 3 2
* 乘法 5 * 3 15
/ 除法 5 / 2 2.5
% 求余数 5 % 2 1
++ 增量(前缀) let x = 5; ++x 6
-- 减量(前缀) let x = 5; --x 4
 1let a = 10; // Initialize variable 'a' with the value 10
 2let b = 3;  // Initialize variable 'b' with the value 3
 3
 4// Perform and display arithmetic operations between 'a' and 'b'
 5console.log("Addition (a + b):      ", a + b); // 13
 6console.log("Subtraction (a - b):   ", a - b); // 7
 7console.log("Multiplication (a * b):", a * b); // 30
 8console.log("Division (a / b):      ", a / b); // 3.333...
 9console.log("Modulus (a % b):       ", a % b); // 1
10
11// Demonstrate post-increment operation on 'a'
12// Output the current value of 'a' (10), then increment
13console.log("Post-increment (a++):  ", a++);
14// Display the incremented value of 'a' (11)
15console.log("Value of 'a' after increment:", a);
16
17// Demonstrate pre-increment operation on 'a'
18// Increment 'a' first (12) then output
19console.log("Pre-increment (++a):   ", ++a);
20
21// Demonstrate post-decrement operation on 'a'
22// Output the current value of 'a' (12), then decrement
23console.log("Post-decrement (a--):  ", a--);
24// Display the decremented value of 'a' (11)
25console.log("Value of 'a' after decrement:", a);
26
27// Demonstrate pre-decrement operation on 'a'
28// Decrement 'a' first (10) then output
29console.log("Pre-decrement (--a):   ", --a);

赋值运算符

赋值运算符将右边的值分配给左边的变量。

运算符 描述 示例 结果
= 赋值 x = 10 x = 10
+= 加法并赋值 x += 5 x = 15
-= 减法并赋值 x -= 5 x = 5
*= 乘法并赋值 x *= 2 x = 20
/= 除法并赋值 x /= 2 x = 5
%= 求余数并赋值 x %= 3 x = 1
1let z = 5;
2z += 3;
3console.log(z);  // Outputs: 8
4
5z *= 2;
6console.log(z);  // Outputs: 16

比较运算符

比较运算符用于比较值,并返回 truefalse

运算符 描述 示例 结果
== 相等(不进行类型比较) 5 == "5" true
=== 严格相等(包括类型) 5 === "5" false
!= 不相等(不进行类型比较) 5 != "5" false
!== 严格不相等(包括类型) 5 !== "5" true
> 大于 5 > 3 true
< 小于 5 < 3 false
>= 大于或等于 5 >= 5 true
<= 小于或等于 5 <= 3 false
1console.log('5 == "5"   :', 5 == "5");   // Outputs: true
2console.log('5 === "5"  :', 5 === "5");  // Outputs: false
3console.log('5 != "5"   :', 5 != "5");   // Outputs: false
4console.log('5 !== "5"  :', 5 !== "5");  // Outputs: true
5console.log('5 > 3      :', 5 > 3);      // Outputs: true
6console.log('5 < 3      :', 5 < 3);      // Outputs: false
7console.log('5 >= 5     :', 5 >= 5);     // Outputs: true
8console.log('5 <= 3     :', 5 <= 3);     // Outputs: false

逻辑运算符

逻辑运算符用于组合逻辑表达式。

运算符 描述 示例 结果
&& 逻辑与 true && false false
|| 逻辑或 true || false true
! 取反 !true false
1console.log('true && false :', true && false);  // Outputs: false
2console.log('true || false :', true || false);  // Outputs: true
3console.log('!true         :', !true);          // Outputs: false

逻辑运算符的优先级

在 TypeScript 中,逻辑运算符通常按照顺序先评估 NOT,然后是 AND,最后是 OR

NOT 优先级最高

NOT 是一元运算符,它具有最高优先级。

1console.log(!true || false);  // false
AND 的优先级高于 OR

AND 的优先级高于 OR,因此会先评估 AND 部分。

1console.log(true || false && false);  // true

因此,首先计算 AND&&)部分,其结果会传递给 OR||)。

ANDOR 进行短路评估

在 TypeScript 中,ANDOR 进行短路评估。如果结果由左侧的值决定,则不会评估右侧的表达式。

1let a = false && console.log("This will not be printed");
2console.log(a);  // false
3
4let b = true || console.log("This will not be printed");
5console.log(b);  // true

在上述两种情况下,console.log() 都不会执行。

明确定义优先级

使用括号明确表达式分组可以避免对优先级的误解。

1console.log(true || (false && false));  // true
自然语言与程序解释之间的差异

在使用逻辑运算符时,需注意自然语言中的歧义。例如,在短语“一只白色的狗或一只猫”中,它可能意味着“一只白色的狗或任何一只猫”或“一只白色的狗或一只白色的猫”。在代码中,它可以这样写:。

1if (isWhite && isDog || isCat) {
2    console.log(' "A white dog" or "a cat of any color" ');
3}
4
5if (isWhite && (isDog || isCat)) {
6    console.log(' "A white dog" or "a white cat" ');
7}

由于自然语言可能存在歧义,因此在编写代码和设计系统时需要谨慎。

按位运算符

按位运算符在位级别操作数字。

运算符 描述 示例 结果
& 逻辑与 5 & 1 1
` ` 逻辑或 5 | 1
^ 异或 (XOR) 5 ^ 1 4
~ 取反 (NOT) ~5 -6
<< 左移 5 << 1 10
>> 右移(有符号) 5 >> 1 2
>>> 右移(无符号) 5 >>> 1 2
1console.log('5 & 1  :', 5 & 1);   // Outputs: 1  (AND operation)
2console.log('5 | 1  :', 5 | 1);   // Outputs: 5  (OR operation)
3console.log('5 ^ 1  :', 5 ^ 1);   // Outputs: 4  (XOR operation)
4console.log('~5     :', ~5);      // Outputs: -6 (NOT operation)
5console.log('5 << 1 :', 5 << 1);  // Outputs: 10 (Left shift operation)
6console.log('5 >> 1 :', 5 >> 1);  // Outputs: 2  (Right shift operation)
7console.log('5 >>> 1:', 5 >>> 1); // Outputs: 2  (Unsigned right shift operation)

三元运算符

三元运算符根据条件表达式的结果返回不同的值。

1let age = 20;
2let access = (age >= 18) ? "Allowed" : "Denied";
3console.log(access);  // Outputs: Allowed

类型操作符

TypeScript 的类型操作符包括以下内容:。

操作符 描述 示例 结果
typeof 返回变量的类型 typeof 123 "number"
instanceof 检查对象是否属于特定类 arr instanceof Array true
is 作为类型保护,检查值是否为特定类型 value is string true or false
 1console.log(typeof "Hello");  // "string"
 2console.log(typeof 42);       // "number"
 3
 4let arr: number[] = [1, 2, 3];
 5console.log("arr instanceof Array : ", arr instanceof Array); // true
 6
 7// Example of Type Guard
 8function isString(value: any): value is string {
 9  return typeof value === "string";
10}
11
12let value: any = "Hello";
13if (isString(value)) {
14  console.log("Value is a string:", value);  // "Value is a string: Hello"
15}

类型操作符用于检查值的类型或将其转换为特定类型。

  • typeof 操作符返回变量的类型。
  • instanceof 操作符检查对象是否属于特定类。
  • is 操作符用于检查值是否为特定类型。它是 TypeScript 类型保护的一部分。

总结

  • 算术运算符: 用于执行基本计算。
  • 赋值运算符: 用于向变量赋值。
  • 比较运算符: 用于比较值。
  • 逻辑运算符: 用于组合逻辑条件。
  • 位运算符: 用于按位操作。
  • 三元运算符: 根据条件返回值。
  • 类型操作符可以检查值的类型。

在TypeScript中,这些运算符可以有效地用于编写复杂的计算和条件表达式。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video