「TypeScript系列」TypeScript 运算符

一、TypeScript 运算符

TypeScript 运算符是用于在 TypeScript(一个 JavaScript 的超集)代码中执行各种操作(如算术运算、比较、赋值等)的符号。这些运算符与 JavaScript 中的运算符非常相似,因为 TypeScript 旨在编译为 JavaScript。

以下是一些 TypeScript(和 JavaScript)中常见的运算符分类:

  1. 算术运算符

    • +(加法)
    • -(减法)
    • *(乘法)
    • /(除法)
    • %(取余)
    • **(乘方,ES2016+)
    • ++(自增)
    • --(自减)
  2. 赋值运算符

    • =(赋值)
    • +=(加等于)
    • -=(减等于)
    • *=(乘等于)
    • /=(除等于)
    • %=(取余等于)
    • **=(乘方等于,ES2016+)
    • <<=(左移等于)
    • >>=(有符号右移等于)
    • >>>=(无符号右移等于)
    • &=(按位与等于)
    • ^=(按位异或等于)
    • |=(按位或等于)
  3. 比较运算符

    • ==(等于)
    • ===(严格等于)
    • !=(不等于)
    • !==(严格不等于)
    • >(大于)
    • <(小于)
    • >=(大于或等于)
    • <=(小于或等于)
    • in(检查对象是否包含某个属性)
    • instanceof(检查对象是否是某个类的实例)
  4. 逻辑运算符

    • &&(逻辑与)
    • ||(逻辑或)
    • !(逻辑非)
  5. 位运算符

    • &(按位与)
    • |(按位或)
    • ^(按位异或)
    • ~(按位非)
    • <<(左移)
    • >>(有符号右移)
    • >>>(无符号右移)
  6. 条件(三元)运算符

    • ? :(条件运算符)
  7. 字符串运算符
    • +(当用于字符串时,它作为连接符)
  8. 类型运算符(仅 TypeScript):

    • typeof(获取变量类型)
    • instanceof(与 JavaScript 中的用法相同,但在 TypeScript 中有更多类型检查的含义)
    • keyof(获取对象类型的所有键的类型)
  9. 指数运算符(ES2016+):

    • **(乘方)
  10. 展开运算符(ES2015+):

    • ...(用于数组和对象的展开)

在 TypeScript 中,你还可以使用这些运算符与类型系统结合,例如使用类型守卫(type guards)来在运行时检查类型,或者使用类型别名(type aliases)和交叉类型(intersection types)来定义更复杂的类型。

二、TypeScript 算术运算符

TypeScript 的算术运算符与 JavaScript 中的算术运算符是相同的,因为 TypeScript 是 JavaScript 的一个超集。这意味着 TypeScript 添加了可选的静态类型、接口和类等特性,但它并不改变 JavaScript 的核心语法和运行时行为。因此,在 TypeScript 中,你仍然可以使用与 JavaScript 完全相同的算术运算符来进行数值计算。

算术运算符是编程语言中用于执行数学运算的基本工具,它们允许你执行如加法、减法、乘法、除法等操作。由于 TypeScript 的目标是与 JavaScript 兼容并扩展其功能,因此保留相同的算术运算符是非常重要的,这样可以确保 TypeScript 代码在编译为 JavaScript 后能够按预期运行。

1.基本算术运算

算术运算符是编程语言中用于执行数学运算的基本工具,它们允许你执行如加法、减法、乘法、除法等操作。由于 TypeScript 的目标是与 JavaScript 兼容并扩展其功能,因此保留相同的算术运算符是非常重要的,这样可以确保 TypeScript 代码在编译为 JavaScript 后能够按预期运行

以下是 TypeScript(也是 JavaScript)中使用算术运算符的一些示例:

let a = 5; 
let b = 3; 


// 加法 
let sum = a + b; // 8 


// 减法 
let difference = a - b; // 2 


// 乘法 
let product = a * b; // 15 


// 除法 
let quotient = a / b; // 1.6666666666666667 


// 取余 
let remainder = a % b; // 2 


// 乘方(在 ES2016+ 中可用,可能需要转译才能在旧环境中运行) 
let exponentiation = Math.pow(a, 2); // 25,或者使用 a ** 2(如果环境支持)

2.复合赋值运算符

复合赋值运算符是结合了赋值和其他操作的运算符,它们使得代码更加简洁。在TypeScript中,这些运算符与JavaScript中的行为是相同的。以下是一些使用复合赋值运算符的示例:

let a = 5;  
let b = 10;  
  
// 加等于复合赋值运算符  
a += b; // 等同于 a = a + b; 此时 a 的值为 15  
  
// 减等于复合赋值运算符  
a -= 5; // 等同于 a = a - 5; 此时 a 的值为 10  
  
// 乘等于复合赋值运算符  
a *= 2; // 等同于 a = a * 2; 此时 a 的值为 20  
  
// 除等于复合赋值运算符  
a /= 4; // 等同于 a = a / 4; 此时 a 的值为 5  
  
// 取余等于复合赋值运算符  
a %= 3; // 等同于 a = a % 3; 此时 a 的值为 2  
  
let c = 3;  
  
// 左移等于复合赋值运算符  
c <<= 2; // 等同于 c = c << 2; 将 c 的二进制表示向左移动 2 位,此时 c 的值为 12  
  
let d = 15; // 二进制表示为 1111  
  
// 无符号右移等于复合赋值运算符  
d >>>= 2; // 等同于 d = d >>> 2; 将 d 的二进制表示向右移动 2 位,此时 d 的值为 3 (0011)  
  
// 与等于复合赋值运算符  
d &= 2; // 等同于 d = d & 2; 此时 d 的值为 2,因为只有第二位是 1,其余位与运算后都为 0  
  
// 或等于复合赋值运算符  
d |= 4; // 等同于 d = d | 4; 此时 d 的值为 6,因为第二和第三位都是 1  
  
// 异或等于复合赋值运算符  
d ^= 3; // 等同于 d = d ^ 3; 此时 d 的值为 5 (0101 XOR 0011 = 0110)

3.自增和自减运算符

在TypeScript(以及JavaScript)中,自增(++)和自减(--)运算符用于增加或减少变量的值。这些运算符有两种形式:前置(pre-increment/decrement)和后置(post-increment/decrement)。

以下是使用自增和自减运算符的一些示例:

let counter = 5;  
  
// 前置自增  
console.log(++counter); // 输出 6,counter 的值变为 6  
  
// 前置自减  
console.log(--counter); // 输出 5,counter 的值变回 5
let counter = 5;  
  
// 后置自增  
console.log(counter++); // 输出 5,然后 counter 的值变为 6  
  
// 后置自减  
console.log(counter--); // 输出 6,然后 counter 的值变回 5

4.幂运算符

在TypeScript(以及ES2016+的JavaScript)中,你可以使用幂运算符(**)来计算一个数的幂。这个运算符接受两个操作数,左边的是基数,右边的是指数,并返回基数的指数次幂的结果

以下是一些使用幂运算符的示例:

// 计算2的3次方  
let result1 = 2 ** 3; // result1 的值为 8  
console.log(result1); // 输出 8  
  
// 计算变量的幂  
let base = 3;  
let exponent = 4;  
let result2 = base ** exponent; // result2 的值为 81  
console.log(result2); // 输出 81  
  
// 在循环中使用幂运算符  
let total = 1;  
for (let i = 0; i < 5; i++) {  
    total *= 2 ** i; // 计算 2^0 * 2^1 * 2^2 * 2^3 * 2^4  
}  
console.log(total); // 输出 160 (2^0 * 2^1 * 2^2 * 2^3 * 2^4 = 1 * 2 * 4 * 8 * 16 = 160)  
  
// 幂运算符与复合赋值运算符结合使用  
let x = 2;  
x **= 3; // x 现在等于 2^3  
console.log(x); // 输出 8  
  
// 注意:复合赋值运算符 `**=` 在ES2016+的JavaScript中可用,但在某些旧环境中可能不被支持

在编写这些示例时,请确保您有一个可以运行 TypeScript 代码的环境,比如使用 TypeScript 编译器 (tsc) 将 TypeScript 代码编译为 JavaScript,然后在支持这些运算符的 JavaScript 环境中运行生成的 JavaScript 代码。如果您使用的是现代的开发环境(如 Node.js、Angular、React 等),这些环境通常已经内置了对 TypeScript 的支持。

三、TypeScript 关系运算符

在 TypeScript(以及 JavaScript)中,关系运算符用于比较两个值的大小或是否相等,并返回一个布尔值(true 或 false)。以下是一些使用关系运算符的示例代码:

1.示例代码

// 定义一些变量  
let a = 5;  
let b = 10;  
let c = "5";  
  
// 等于运算符 (==)  
// 注意:== 会进行类型转换后再比较  
console.log(a == 5); // 输出 true  
console.log(a == b); // 输出 false  
console.log(a == c); // 输出 true,因为 "5" 被转换成了数字 5  
  
// 全等运算符 (===)  
// 注意:=== 不会进行类型转换,比较类型和值  
console.log(a === 5); // 输出 true  
console.log(a === b); // 输出 false  
console.log(a === c); // 输出 false,因为 "5" 是字符串类型,不是数字类型  
  
// 不等于运算符 (!=)  
// 注意:!= 会进行类型转换后再比较  
console.log(a != b); // 输出 true  
console.log(a != c); // 输出 false,因为 "5" 被转换成了数字 5  
  
// 不全等运算符 (!==)  
// 注意:!== 不会进行类型转换,比较类型和值  
console.log(a !== b); // 输出 true  
console.log(a !== c); // 输出 true,因为 "5" 是字符串类型,不是数字类型  
  
// 大于运算符 (>)  
console.log(a > b); // 输出 false  
console.log(b > a); // 输出 true  
  
// 小于运算符 (<)  
console.log(a < b); // 输出 true  
console.log(b < a); // 输出 false  
  
// 大于等于运算符 (>=)  
console.log(a >= 5); // 输出 true  
console.log(b >= a); // 输出 true  
  
// 小于等于运算符 (<=)  
console.log(a <= 5); // 输出 true  
console.log(b <= a); // 输出 false  
  
// 比较字符串  
let str1 = "apple";  
let str2 = "banana";  
console.log(str1 < str2); // 输出 true,因为字符串按字典顺序进行比较  
console.log(str1 > str2); // 输出 false

在这个示例中,我展示了如何使用等于(== 和 ===)、不等于(!= 和 !==)、大于(>)、小于(<)、大于等于(>=)和小于等于(<=)这些关系运算符。注意,== 和 != 运算符会进行类型转换,这可能会导致意外的结果,尤其是在比较不同类型的值时。因此,通常建议使用 === 和 !== 运算符,它们会同时比较值和类型。

四、TypeScript 逻辑运算符

在 TypeScript(和 JavaScript)中,逻辑运算符用于结合布尔值(true 或 false)或返回布尔值的表达式,并根据这些值返回一个新的布尔值。以下是 TypeScript 中逻辑运算符的示例:

1.逻辑运算符

&&(逻辑与):当两边的操作数都为真时返回 true

||(逻辑或):当两边的操作数至少有一个为真时返回 true

!(逻辑非):取反操作,如果操作数为真,则返回 false;如果操作数为假,则返回 true

2.示例代码

  • // 定义一些变量  
    let isRainy: boolean = true;  
    let hasUmbrella: boolean = false;  
    let isDayTime: boolean = true;  
      
    // 逻辑与(&&)  
    let canGoOutsideAndNotGetWet: boolean = isDayTime && !isRainy; // 如果现在是白天并且没有下雨,则可以去外面并且不会淋湿  
    console.log(canGoOutsideAndNotGetWet); // 输出:true(假设 isDayTime 为 true, isRainy 为 true)  
      
    // 修改 isRainy 为 true  
    isRainy = true;  
    canGoOutsideAndNotGetWet = isDayTime && !isRainy; // 如果现在是白天但下雨了,则不能去外面并且不会淋湿  
    console.log(canGoOutsideAndNotGetWet); // 输出:false  
      
    // 逻辑或(||)  
    let hasTransportation: boolean = hasUmbrella || !isRainy; // 如果有伞或者没有下雨,则有交通工具  
    console.log(hasTransportation); // 输出:true(假设 hasUmbrella 为 false, isRainy 为 true)  
      
    // 修改 isRainy 为 false  
    isRainy = false;  
    hasTransportation = hasUmbrella || !isRainy; // 如果没有伞但不下雨,则有交通工具  
    console.log(hasTransportation); // 输出:true  
      
    // 逻辑非(!)  
    let isNotRainy: boolean = !isRainy; // 如果不是下雨  
    console.log(isNotRainy); // 输出:true(假设 isRainy 为 false)  
      
    // 复杂的逻辑表达式  
    let shouldStayIndoors: boolean = !(isDayTime && isRainy && !hasUmbrella); // 如果不是(白天并且下雨并且没有伞),则应该待在室内  
    console.log(shouldStayIndoors); // 输出会根据 isDayTime, isRainy, hasUmbrella 的值而变化

    在上面的示例中,我们使用了逻辑运算符来组合不同的条件,并根据这些条件的结果得出一个新的布尔值。逻辑运算符在处理复杂条件和逻辑判断时非常有用。注意,逻辑运算符可以作用于任何可以隐式转换为布尔值的表达式。在 TypeScript(和 JavaScript)中,0nullundefinedNaN 和空字符串 "" 被视为假(false),而其他所有值都被视为真(true)。

  • 五、TypeScript 位运算符

  • 在 TypeScript(和 JavaScript)中,位运算符直接对二进制位进行操作。这些运算符在处理整数时特别有用,因为它们允许开发者在底层进行高效的位操作。以下是 TypeScript 中位运算符的示例:
  • 1.位运算符

  • &(按位与):对于每一位,只有当两个相应的二进制位都为 1 时,结果位才为 1。
  • |(按位或):对于每一位,只要两个相应的二进制位中有一个为 1 时,结果位就为 1。
  • ^(按位异或):对于每一位,当两个相应的二进制位相异时,结果位为 1。
  • ~(按位非):对给定值的二进制位进行反转。
  • <<(左移):将数字的二进制表示向左移动指定的位数,右侧用零填充。
  • >>(有符号右移):将数字的二进制表示向右移动指定的位数,左侧用最左边的位的值填充(符号位)。
  • >>>(无符号右移):将数字的二进制表示向右移动指定的位数,左侧总是用零填充。
  • 2.示例代码

  • // 定义一些变量  
    let a: number = 60;    // 二进制表示为:0011 1100  
    let b: number = 13;    // 二进制表示为:0000 1101  
      
    // 按位与(&)  
    let andResult: number = a & b;    // 12 (0000 1100)  
    console.log(andResult);  
      
    // 按位或(|)  
    let orResult: number = a | b;     // 61 (0011 1101)  
    console.log(orResult);  
      
    // 按位异或(^)  
    let xorResult: number = a ^ b;    // 49 (0011 0001)  
    console.log(xorResult);  
      
    // 按位非(~)  
    let notResult: number = ~a;       // -61 (二进制补码形式)  
    console.log(notResult);  
      
    // 左移(<<)  
    let leftShiftResult: number = a << 2;   // 240 (1111 0000)  
    console.log(leftShiftResult);  
      
    // 有符号右移(>>)  
    let signedRightShiftResult: number = a >> 1;   // 30 (0001 1110)  
    console.log(signedRightShiftResult);  
      
    // 无符号右移(>>>)  
    let unsignedRightShiftResult: number = a >>> 1; // 30 (0001 1110),与有符号右移在正值上相同  
    let negativeNumber: number = -16;  // 二进制表示为:1111 0000(在 32 位有符号整数中)  
    let unsignedRightShiftNegativeResult: number = negativeNumber >>> 1; // 2147483647 (0111 1111 1111 1111 1111 1111 1111 1111),用零填充  
    console.log(unsignedRightShiftNegativeResult);

    请注意,在 TypeScript(和 JavaScript)中,位运算符仅对 32 位整数进行操作。如果你对超出这个范围的数字使用位运算符,结果可能不是你期望的。此外,位运算符通常用于底层编程和性能优化,但在日常开发中并不常见。在使用它们之前,请确保你了解它们的工作原理和限制。

  • 六、TypeScript 赋值运算符

  • 在 TypeScript(和 JavaScript)中,赋值运算符用于给变量赋值。除了基本的赋值运算符 = 之外,还有一些复合赋值运算符,它们结合了赋值和算术或位操作。以下是 TypeScript 中赋值运算符的示例:

    1.赋值运算符

  • =(简单赋值):将右侧的值赋给左侧的变量。
  • +=(加赋值):将右侧的值加到左侧的变量上,并将结果赋给左侧的变量。
  • -=(减赋值):从左侧的变量中减去右侧的值,并将结果赋给左侧的变量。
  • *=(乘赋值):将左侧的变量与右侧的值相乘,并将结果赋给左侧的变量。
  • /=(除赋值):将左侧的变量除以右侧的值,并将结果赋给左侧的变量。
  • %=(取模赋值):用左侧的变量除以右侧的值,并将余数赋给左侧的变量。
  • <<=(左移赋值):将左侧的变量的二进制表示向左移动指定的位数,并将结果赋给左侧的变量。
  • >>=(有符号右移赋值):将左侧的变量的二进制表示向右移动指定的位数,并将结果赋给左侧的变量。
  • >>>=(无符号右移赋值):将左侧的变量的二进制表示向右移动指定的位数,并用零填充左侧,然后将结果赋给左侧的变量。
  • &=(按位与赋值):对左侧的变量和右侧的值执行按位与操作,并将结果赋给左侧的变量。
  • |=(按位或赋值):对左侧的变量和右侧的值执行按位或操作,并将结果赋给左侧的变量。
  • ^=(按位异或赋值):对左侧的变量和右侧的值执行按位异或操作,并将结果赋给左侧的变量。
  • 2.示例代码

  • let a: number = 5;  
    let b: number = 10;  
      
    // 简单赋值  
    a = b;  
    console.log(a); // 输出:10  
      
    // 加赋值  
    a += 5; // 相当于 a = a + 5;  
    console.log(a); // 输出:15  
      
    // 减赋值  
    a -= 3; // 相当于 a = a - 3;  
    console.log(a); // 输出:12  
      
    // 乘赋值  
    a *= 2; // 相当于 a = a * 2;  
    console.log(a); // 输出:24  
      
    // 除赋值  
    a /= 4; // 相当于 a = a / 4;  
    console.log(a); // 输出:6  
      
    // 取模赋值  
    a %= 3; // 相当于 a = a % 3;  
    console.log(a); // 输出:0  
      
    // 左移赋值  
    a = 5; // 重置 a 的值  
    a <<= 1; // 相当于 a = a << 1;  
    console.log(a); // 输出:10(二进制:1010)  
      
    // 有符号右移赋值  
    a >>= 1; // 相当于 a = a >> 1;  
    console.log(a); // 输出:5(二进制:0101,因为是正数,左侧补0)  
      
    // 无符号右移赋值  
    a >>>= 1; // 相当于 a = a >>> 1;  
    console.log(a); // 输出:2(二进制:0010,因为总是用0填充)  
      
    // 按位与赋值  
    a = 5; // 重置 a 的值  
    b = 3; // 重置 b 的值  
    a &= b; // 相当于 a = a & b;  
    console.log(a); // 输出:1(二进制:0001,5 & 3 = 1)  
      
    // 按位或赋值和按位异或赋值等类似,这里不再赘述。
    

    这些复合赋值运算符提供了一种更简洁的方式来执行常见的算术和位操作,并将结果存储回原始变量中。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值