「TypeScript系列」TypeScript 运算符

最新推荐文章于 2024-08-07 17:38:21 发布
最新推荐文章于 2024-08-07 17:38:21 发布
阅读量1.9k 收藏 84
点赞数 100
分类专栏： TypeScript入门到精通 文章标签： typescript ubuntu javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuaner8786/article/details/138858747
版权

文章目录

一、TypeScript 运算符

TypeScript 是 JavaScript 的一个超集，它增加了类型系统和编译时类型检查。然而，在运算符方面，TypeScript 继承了 JavaScript 的大部分运算符。以下是一些在 TypeScript（和 JavaScript）中常见的运算符：

  1. 算术运算符
  • + 加法
  • - 减法
  • * 乘法
  • / 除法
  • % 取余（模运算）
  • ** 幂运算（ES2016+）
  • ++ 自增
  • -- 自减
  • +=、-=、*=、/=、%=、**= 复合赋值运算符
  1. 比较运算符
  • == 等于（会进行类型转换）
  • === 严格等于（不会进行类型转换）
  • != 不等于（会进行类型转换）
  • !== 严格不等于（不会进行类型转换）
  • < 小于
  • > 大于
  • <= 小于或等于
  • >= 大于或等于
  • in 检查属性是否存在于对象中
  • instanceof 检查对象是否是某个类的实例
  1. 逻辑运算符
  • && 逻辑与
  • || 逻辑或
  • ! 逻辑非
  1. 位运算符
  • & 按位与
  • | 按位或
  • ^ 按位异或
  • ~ 按位非
  • << 左移
  • >> 右移
  • >>> 无符号右移（ES2015+）
  1. 字符串运算符
  • + 用于连接两个或多个字符串（或者连接字符串和数字）
  1. 条件（三元）运算符
  • condition ? value_if_true : value_if_false
  1. 赋值运算符
  • = 赋值
  • 复合赋值运算符（如上面算术运算符中提到的那些）
  1. 类型运算符
  • typeof 返回操作数的类型（在 TypeScript 中，这更多地与 JavaScript 相关，但在某些上下文中仍然有用）
  • as 类型断言（TypeScript 特有的）
  • <Type>value 类型断言（另一种 TypeScript 语法，与 as 等效）
  1. 指数运算符
  • ** 幂运算（ES2016+）
  1. 扩展运算符
  • ... 用于函数参数（收集剩余参数）或数组（展开数组）
  1. 可选链运算符
  • ?. 尝试获取对象属性或调用函数，如果左侧为 null 或 undefined 则立即返回 undefined，而不会抛出错误（ES2020+）
  1. 空值合并运算符
  • ?? 如果左侧操作数为 null 或 undefined，则返回其右侧操作数；否则返回左侧操作数（ES2020+）

注意：一些运算符（如 **、**=、?? 和 ?.）是 ES2016 或更新版本的标准中引入的，但在 TypeScript 中通常也可以使用，因为 TypeScript 支持这些较新的 JavaScript 功能。

二、TypeScript 算术运算符

TypeScript 的算术运算符与 JavaScript 中的算术运算符是相同的，因为 TypeScript 是 JavaScript 的一个超集。以下是一些使用 TypeScript 算术运算符的示例：

1. 基本算术运算

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

let sum: number = a + b;  // 加法
console.log(sum);  // 输出 12

let difference: number = a - b;  // 减法
console.log(difference);  // 输出 8

let product: number = a * b;  // 乘法
console.log(product);  // 输出 20

let quotient: number = a / b;  // 除法
console.log(quotient);  // 输出 5

let remainder: number = a % b;  // 取余
console.log(remainder);  // 输出 0

2. 复合赋值运算符

let x: number = 5;

x += 3;  // 等同于 x = x + 3
console.log(x);  // 输出 8

x -= 2;  // 等同于 x = x - 2
console.log(x);  // 输出 6

x *= 2;  // 等同于 x = x * 2
console.log(x);  // 输出 12

x /= 2;  // 等同于 x = x / 2
console.log(x);  // 输出 6

x %= 3;  // 等同于 x = x % 3
console.log(x);  // 输出 0

3. 自增和自减运算符

let y: number = 5;

y++;  // 等同于 y = y + 1
console.log(y);  // 输出 6

++y;  // 等同于 y = y + 1
console.log(y);  // 输出 7

y--;  // 等同于 y = y - 1
console.log(y);  // 输出 6

--y;  // 等同于 y = y - 1
console.log(y);  // 输出 5

4. 幂运算符

虽然幂运算符 (**) 是 ES2016 引入的，但 TypeScript 也支持它。

let base: number = 2;
let exponent: number = 3;

let result: number = base ** exponent;  // 幂运算
console.log(result);  // 输出 8

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

三、TypeScript 关系运算符

TypeScript 的关系运算符（也称为比较运算符）用于比较两个值的大小或检查它们是否相等。以下是一些使用 TypeScript 关系运算符的示例代码：

let a: number = 10;
let b: number = 5;
let c: string = "hello";
let d: string = "world";

// 相等性比较
console.log(a == b);  // 宽松相等，输出 false
console.log(a === b); // 严格相等，输出 false
console.log(c == d);  // 宽松相等（会进行类型转换尝试），输出 false
console.log(c === d); // 严格相等，输出 false

// 不等性比较
console.log(a != b);  // 宽松不等，输出 true
console.log(a !== b); // 严格不等，输出 true

// 数值比较
console.log(a > b);    // 大于，输出 true
console.log(a < b);    // 小于，输出 false
console.log(a >= b);   // 大于或等于，输出 true
console.log(a <= b);   // 小于或等于，输出 false

// 字符串比较（按字符顺序比较）
console.log(c < d);    // 按字符顺序比较，输出 true（因为 'h' 在 'w' 前面）
console.log(c > d);    // 按字符顺序比较，输出 false

// in 运算符（用于检查属性是否存在于对象中）
let obj: { prop: number } = { prop: 15 };
console.log("prop" in obj); // 输出 true

// instanceof 运算符（用于检查对象是否是某个类的实例）
class MyClass {}
let instance: MyClass = new MyClass();
console.log(instance instanceof MyClass); // 输出 true

// 注意：'in' 和 'instanceof' 不是严格意义上的关系运算符，但它们在比较场景中很常见

这些示例展示了如何在 TypeScript 中使用关系运算符来比较数值和字符串，以及如何使用 in 和 instanceof 运算符来检查对象属性和类的实例。请注意，in 和 instanceof 不是传统意义上的关系运算符，但它们在比较操作中也起着重要的作用。

四、TypeScript 逻辑运算符

TypeScript 的逻辑运算符用于根据操作数的逻辑值（真或假）返回一个新的逻辑值。这些运算符在 TypeScript 中与 JavaScript 中的用法相同。以下是使用 TypeScript 逻辑运算符的示例代码：

let isRaining: boolean = true;
let haveUmbrella: boolean = false;
let shouldWearRainBoots: boolean;

// 逻辑与（&&）
// 如果两个操作数都为真，则条件为真
shouldWearRainBoots = isRaining && !haveUmbrella; // 如果没有伞并且下雨，则应该穿雨靴
console.log(shouldWearRainBoots); // 输出 true

// 逻辑或（||）
// 如果任一操作数为真，则条件为真
haveUmbrella = true; // 假设我们现在有一把伞
shouldWearRainBoots = isRaining || !haveUmbrella; // 如果下雨或没有伞，则应该穿雨靴
console.log(shouldWearRainBoots); // 输出 true（因为下雨）

// 逻辑非（!）
// 反转操作数的逻辑值
isRaining = !isRaining; // 如果之前下雨，现在就不下了
console.log(isRaining); // 输出 false

// 复杂逻辑表达式
let age: number = 18;
let isAdult: boolean = age >= 18; // 判断是否成年
let canVote: boolean = isAdult && isRaining; // 假设只有成年且下雨时才能投票（这是一个不符合实际的假设）
console.log(canVote); // 输出 false（因为现在没有下雨）

// 使用括号来明确优先级
let canDrinkAlcohol: boolean = (age >= 21) && isRaining; // 假设只有年龄大于等于 21 且下雨时才能喝酒
console.log(canDrinkAlcohol); // 输出 false（因为现在没有下雨）

在这个示例中，我们使用了 &&（逻辑与）、||（逻辑或）和 !（逻辑非）运算符来根据变量的逻辑值计算结果。我们还使用了括号来明确运算符的优先级，这在处理复杂的逻辑表达式时非常重要。

请注意，在 TypeScript（以及 JavaScript）中，逻辑运算符的操作数通常是布尔值（true 或 false），但也可以是非布尔值。非布尔值会被隐式转换为布尔值（也称为“真值化”或“假值化”），其中 0、null、undefined、NaN 和空字符串（""）被视为 false，而其他所有值都被视为 true。

五、TypeScript 位运算符

TypeScript 中的位运算符用于在二进制位级别上操作数字。这些运算符在处理整数和底层系统编程时特别有用。以下是一些使用 TypeScript 位运算符的示例代码：

let a: number = 60; // 二进制表示为 0011 1100
let b: number = 13; // 二进制表示为 0000 1101

// 位与（&）
let c: number = a & b; // 只保留两个数都为 1 的位，结果为 12（0000 1100）
console.log(c); // 输出 12

// 位或（|）
let d: number = a | b; // 只要两个数中任一数为 1 的位，结果就是 1，结果为 61（0011 1101）
console.log(d); // 输出 61

// 位异或（^）
let e: number = a ^ b; // 当两个数相应位不同时结果为 1，相同则为 0，结果为 49（0011 0001）
console.log(e); // 输出 49

// 位非（~）
let f: number = ~a; // 反转每一位，结果取决于数字的长度和表示方式（通常是有符号 32 位整数），这里可能是 -61
console.log(f); // 输出 -61，具体值取决于系统的位表示和整数大小

// 左移（<<）
let g: number = a << 2; // 将 a 的所有位向左移动 2 位，相当于乘以 2^2（4），结果为 240（1111 0000）
console.log(g); // 输出 240

// 右移（>>）
let h: number = a >> 1; // 将 a 的所有位向右移动 1 位，相当于除以 2（并向下取整），结果为 30（0001 1110）
console.log(h); // 输出 30

// 无符号右移（>>>）
let i: number = a >>> 2; // 将 a 的所有位向右移动 2 位，但左侧填充 0 而不是符号位，对于正数等同于 >>
console.log(i); // 输出 15（0000 1111），对于负数，符号位会被丢弃，然后填充 0

请注意，位运算符只能用于整数类型（在 TypeScript 和 JavaScript 中通常是 number 类型，但实际上是按照 32 位或 64 位整数来处理的，具体取决于实现）。

此外，由于位运算符在二进制层面操作，因此结果可能会受到 JavaScript 数字表示的限制（通常是 IEEE 754 双精度浮点数，但在位操作中会被当作 32 位有符号整数处理）。对于非常大的数字或负数，结果可能不符合直观的数学期望。

对于无符号右移运算符 >>>，它总是用 0 来填充左侧空位，不考虑原始数字的符号。这在处理无符号整数或需要保持正数结果时特别有用。

六、TypeScript 赋值运算符

在 TypeScript 中，赋值运算符（=）是最基本的运算符，用于将值赋给变量。但是，除了基本的赋值运算符外，还有一些复合赋值运算符，如 +=、-=、*=、/= 和 %= 等，它们允许在赋值的同时执行一些基本的算术操作。

以下是一些使用 TypeScript 赋值运算符的示例代码：

// 基本的赋值运算符
let a: number;
a = 10;
console.log(a); // 输出 10

// 复合赋值运算符
let b: number = 5;
b += 3; // 相当于 b = b + 3
console.log(b); // 输出 8

let c: number = 10;
c -= 2; // 相当于 c = c - 2
console.log(c); // 输出 8

let d: number = 2;
d *= 3; // 相当于 d = d * 3
console.log(d); // 输出 6

let e: number = 10;
e /= 2; // 相当于 e = e / 2
console.log(e); // 输出 5

let f: number = 10;
f %= 3; // 相当于 f = f % 3
console.log(f); // 输出 1

// 字符串连接赋值运算符（虽然它不是一个标准的算术运算符，但也是一种赋值）
let g: string = "Hello";
g += " World!"; // 相当于 g = g + " World!"
console.log(g); // 输出 "Hello World!"

// 递增和递减赋值运算符（虽然不是复合赋值运算符，但它们是赋值相关的）
let h: number = 5;
h++; // 相当于 h = h + 1
console.log(h); // 输出 6

let i: number = 10;
i--; // 相当于 i = i - 1
console.log(i); // 输出 9

// 链式赋值
let j: number = 10;
let k: number;
let l: number;
k = l = j; // j 的值被赋给 l，然后 l 的值（现在是 j 的值）被赋给 k
console.log(k); // 输出 10
console.log(l); // 输出 10

在这个示例中，我们展示了如何使用基本的赋值运算符（=）和复合赋值运算符（+=、-=、*=、/=、%=）来修改变量的值。我们还展示了如何使用字符串连接赋值（通过 +=）以及递增（++）和递减（--）赋值运算符。最后，我们展示了链式赋值，其中多个变量可以连续地被赋予相同的值。

七、相关链接

  1. TypeScript中文网
  2. TypeScript下载
  3. TypeScript文档
  4. 「TypeScript系列」TypeScript 简介及基础语法
  5. 「TypeScript系列」TypeScript 基础类型
  6. 「TypeScript系列」TypeScript 变量声明
·零落·
关注
专栏目录
TypeScript 运算符
X W F
03-06 614
TypeScript 运算符 文章目录TypeScript 运算符算术运算符关系运算符逻辑运算符短路运算符(&& 与 ||)位运算符赋值运算符三元运算符 (?)类型运算符typeof 运算符instanceof其他运算符负号运算符(-)字符串运算符: 连接运算符 (+) 运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。 考虑以下计算： 7 + 5 = 12 以上实...
TypeScript：运算符
KaiSarH
05-23 874
TypeScript：运算符
TypeScript位运算
MYG_G
08-07 844
TypeScript位运算符，ts位运算符原理解释，对于取反~位运算符详细过程理解
[Typescript]基础篇之运算符
前端
09-29 1210
Typescript 运算符类型
第六节 TypeScript 运算符
boss2967的博客
12-26 328
运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。 算术运算符 运算符 描述 + 加法 - 减法 * 乘法 / 除法 % 取模 ++ 自增 – 自减 实例 var num1:number = 10 var num2:number = 2 var res:number = 0 res = num1 + num2 console....
TypeScript 常用运算符
weixin_42178050的博客
08-18 345
一般用来将后面的表达式强制转换为布尔类型的数据(boolean)，也就是只能是true或者false;左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。也叫短路运算符，是一种先检查属性是否存在，在尝试访问该属性的运算符。意味着先将变量取反，并转化为布尔值。3.判断是否真正为真!2.空值合并运算符?1.非空断言操作符！4.可选链运算符?...
TypeScript位运算符
Bruce_byan的博客
05-27 995
位操作是程序设计中对位模式按位或二进制数的一元和二元操作。 运算符 描述 例子 类似于 结果 十进制 & AND，按位与处理两个长度相同的二进制数，两个相应的二进位都为 1，该位的结果值才为 1，否则为 0。 x = 5 & 1 0101 & 0001 0001 1 l OR，按位或处理两个长度相同的二进制数，两个相应的二进位中只要有一个为 1，该位的结果值为 1。 x = 5 l 1 0101 l 0001 0101 5 ~ 取反，取反是一元运算符，对一个二
三、TypeScript运算符
weixin_46261309的博客
07-15 1057
TypeScript运算符1. 运算符概述2. 算术运算符2.1 概述2.2 加号的其他作用2.3 加号引发的思考3. 赋值运算符4. 自增和自减运算符5. 比较运算符6. 逻辑运算符 这一节我们来学习typescript中的运算符。学完typescript中的运算符之后，要求我们能够掌握运算符的使用。 1. 运算符概述 ​ 如果你在这之前学习过其他的语言，例如Java、PHP、JavaScript等，那么你对运算符应该很了解了。没学过也不要紧，运算符就类似于我们经常用到的加减乘除等。 ​ 运算符也称为
TypeScript中的运算符和操作符
a253399414的博客
10-17 1310
介绍一下TypeScript中的其中常见的操作符和运算符 一、非空断言操作符 (!) 在上下文中，当类型检查器无法断定类型时，一个新的后缀表达式操作符 – ！可以用于断言操作对象是非null和非undefined的时。 接下来看看其具体使用场景： 赋值时忽略 null 和 undefined const fn = (name: string | null | undefined) => { const objName: string = name; // 报错 const objName: s
【零基础入门TypeScript】TypeScript - 运算符
共同学习、强我国家
01-04 938
运算符定义将对数据执行的某些函数。运算符所处理的数据称为操作数。考虑以下表达式 -7 + 5 = 12这里，值 7、5 和 12 是操作数，而 + 和 = 是运算符。算术运算符逻辑运算符关系运算符按位运算符赋值运算符三元/条件运算符字符串运算符类型运算符。
TS学习2 TS 基本语法-ts2
廖金龙的博客
07-17 3305
TypeScript 基础语法 TypeScript 程序由以下几个部分组成： 模块 函数 变量 语句和表达式 注释 TypeScript 基础类型 数据类型 关键字 描述 任意类型 any 声明为 any 的变量可以赋予任意类型的值。 数字类型 number 双精度 64 位浮点值。它可以用来表示整数和分数。let binaryLiteral: number = 0b...
TypeScript教程（四）基本运算符
m0_64393446的博客
08-14 1233
TypeScript包含以下几种运算符：1.算术运算符2.逻辑运算符3.关系运算符4.按位运算符5.赋值运算符6.三元/条件运算符7.字符串运算符8.类型运算符。
TypeScript运算符
weixin_44201223的博客
02-12 596
算术运算符 赋值运算符 递增/递减运算符 比较运算符 逻辑运算符
typeScript 操作符
zyx的博客
01-31 983
//声明任意数量的方法参数 rest spread操作符   function func1 (...args){ args.forEach((item,index) =&gt; { console.log(item); }) } func1(1,2,3);   //声明参数数量固定的方法参数 function func2 (a,b,c){ console.log(a); c...
typescript运算符
最新发布
09-02
TypeScript是一种强类型的JavaScript超集，它引入了许多新的运算符以支持更严格的静态类型检查。以下是TypeScript中常见的运算符类别： 1. **算术运算符**：用于基本数值类型的加减乘除等操作，如 `+`, `-`, `*`, `/`, `%` 等。 2. **比较运算符**：包括 `==` (严格相等), `===` (全等), `!=`, `!==`, `<`, `>`, `<=`, `>=` 等，用于判断两个值是否相等或大小关系。 3. **逻辑运算符**：`&&` (逻辑与)，`||` (逻辑或)，`!` (逻辑非)。它们结合布尔值进行条件控制。 4. **位运算符**：`&` (按位与), `|` (按位或), `^` (按位异或), `~` (按位取反), `<<` (左移位), `>>` (右移位) 和 `>>>` (无符号右移位)。 5. **赋值运算符**：`=`, `+=`, `-=` ,`*=` ,`/=` ,`%=` 等，同时进行赋值和操作。 6. **条件运算符**：`条件 ? 表达式1 : 表达式2`，也称为三元运算符，用于简单的条件分支。 7. **解构赋值运算符**：允许从数组或对象中提取值并直接赋给变量，如 `let [a, b] = [1, 2];`. 8. **类型断言运算符**：`as` 关键字，可以显式指定某个值的类型，如 `let number: any = '10'; number = parseInt(number) as number;`
评论 66
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

·零落·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值