TypeScript 运算符

Posted 知否

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeScript 运算符相关的知识,希望对你有一定的参考价值。

本节我们来讲 TypeScript 中的运算符的使用,运算符我们应该都知道,数学中我们也学过运算符,例如常见的加减乘除等。而计算机语言中的运算符,用于执行程序代码运算,会针对一个以上操作数项目来进行运算,例如 1 + 2,其中 + 就是一个运算符,而 1、2 则是操作数。TypeScript 中的运算符就大致和 javascript 中一样。

TypeScript 中的运算符可以大致分为以下几种:

  • 算术运算符
  • 关系运算符
  • 逻辑运算符
  • 按位运算符
  • 赋值运算符
  • 三元运算符
  • 类型运算符

算术运算符

算术运算符以数值(字面量或变量)作为其操作数,并返回一个单个数值。包括下面几种:

运算符描述
+加法,返回操作数的总和
-减法,返回操作数的差
*乘法,返回操作数的乘积
/除法,返回操作数的商
%取模(余数),返回操作数的余数
++自增,将操作数加 1
--自减,将操作数减 1
示例:

上述的算术运算符中,最简单的就是 +-*/ 这四个运算符:

console.log(1 + 3);  // 4
console.log(5 - 2);  // 3
console.log(3 * 7);  // 21
console.log(6 / 2);  // 3

取模运算符 % 用于求操作数的余,余数就是当操作数不能整除时,就会产生余数。如果可以整数则会返回0:

console.log(6 % 2);  // 0
console.log(7 % 4);  // 3
console.log(9 % 2);  // 1

递增运算符 ++ 和递减运算符 -- 在实际应用中也会经常用到,这两个运算符使用方法都一样,区别在于一个用于将操作数加一,一个用于减一。我们使用 ++ 来举例:

let a:number = 1;
console.log(a);   // 1
console.log(a++); // 1
console.log(a);   // 2
console.log(++a); // 3
console.log(a);   // 3

上述代码中,我们可以看到:

  • ++ 后置时,即位于操作数的后面,会在递增前返回数值。
  • ++ 前置时,即位于操作数的前面,会在递增后返回数值。

关系运算符

关系运算符用于计算结果是否为 true 或者 false。关系运算符有6种,如下所示:

运算符描述
>大于
<小于
>=大于或等于
<=小于或等于
==等于
!=不等于
示例:

声明两个数字类型的变量,然后使用不同的关系运算符对这两个变量进行计算,返回计算结果:

let a:number = 3;
let b:number = 7;
console.log(a < b);  // true 

console.log(a > b);  // false

console.log(a <= b); // true

console.log(a >= b); // false

console.log(a == b); // false

console.log(a != b); // true

逻辑运算符

逻辑运算符用于组合两个或多个条件。返回值为 true 或者 false

运算符描述
&&与,仅当指定的所有表达式都返回 true 时,运算符才返回 true
\\\\ 或,如果指定的表达式至少有一个返回 true,则运算符返回 true
非,运算符返回相反的表达式结果
示例:

我们来看下面这段代码:

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

console.log(a > 1 && b > 1);     
console.log(a == 3 || b == 3);  
console.log(!a);   

编译成 JavaScript 代码:

var a = 3;
var b = 7;
console.log(a > 1 && b > 1); 
console.log(a == 3 || b == 3); 
console.log(!a); 

输出:

true
true
false

其实从这三个运算符的名字就可以看出它们的不同,与运算符 && 需要所有的表达式都为 true 才返回 true。上述代码中,a > 1 的结果为 true,b > 1 的结果也为 true,所以最终 a > 1 && b > 1 的返回结果为 true。

而或运算符|| 只要有一个表达式为 true 结果就会返回 truea == 3 为 true, b == 3 为 false ,有一个满足,所以最终也返回 true

非运算符 则返回表达式相反的结果,a 的值为 3,所以是一个真值,取反后得到 false。

按位运算符

位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

运算符描述
按位与,处理两个长度相同的二进制数,两个相应的二进位都为 1,该位的结果值才为 1,否则为 0
\\ 按位或,处理两个长度相同的二进制数,两个相应的二进位中只要有一个为 1,该位的结果值为 1
^按位异或,对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。如果某位不同则该位为 1,否则该位为 0
按位取反,是一元运算符,对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0,0 成为 1
<<左移,左边的运算数的各二进位全部左移若干位,由右边的数指定移动的位数,高位丢弃,低位补 0
>>右移,把 >> 左边的运算数的各二进位全部右移若干位,>> 右边的数指定移动的位数
>>>无符号右移,与有符号右移位类似,除了左边一律使用0 补位。
示例:

我们来看一下下面这段代码:

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

console.log(a & 1);   // 1
console.log(a | b);   // 7
console.log(a ^ b);   // 4
console.log(~a);      // -4
console.log(a << b);  // 384
console.log(a >> b);  // 0
console.log(a >>> b); // 0

根据每个运算符的描述,其实很容易得出结果。例如其中 a & 1,就是将 3 和 1 的值化为二进制,然后相同位置的值都为 1,该位的值才为 1,否则为 0,如下:

3的二进制:00000011
1的二进制:00000001
3&1 得到:00000001
00000001化为十进制,就是1,所以a & 1的结果为1

又比如 a | b ,就是将 3 化为二进制 00000011,7 也化为二进制 00000111,相同位置只要一个为1,该位置的值为1,最终合起来得到结果为 00000111,将结果化为十进制,所以 a | b 的最终结果为7。

赋值运算符

赋值运算符用于给变量赋值。最常见的应该就是等号 = 了,在声明变量时我们一直有用到。其他赋值运算符还有:

运算符描述
=赋值,将值从右侧操作数赋给左侧操作数
+=加法赋值,它将右操作数添加到左操作数并将结果赋给左操作数。
-=减法赋值,它从左操作数中减去右操作数,并将结果赋给左操作数。
*=乘法赋值,它将右操作数与左操作数相乘,并将结果赋给左操作数。
/=除法赋值,它将左操作数除以右操作数,并将结果赋给左操作数。
示例:

= 是最简单的赋值运算符,就是将符号右边的值,赋给左边的变量。例如下列代码中将 10 赋值给变量 a:

let a:number;
a = 10;
console.log(a);  // 10

而加减乘除法的赋值也好理解,就相当于在左边这个变量本身的基础上,加减乘除一个右边的数:

a += 2;
console.log(a);  // 12

a -= 5;
console.log(a);  // 7

a *= 10;
console.log(a);  // 70

a /= 10;
console.log(a);  // 7

例如 a += 2,就相当于 a = a + 2a -= 5 就相当于 a = a - 5,其他的也可以依次类推。

三元运算符

三元运算有 3 个操作数,并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。

Test ? expr1 : expr2

其中 Test 指定的条件语句,如果条件语句 Testtrue 则返回 expr1,为 false 则返回 expr2

示例:

变量 a 的值为7, 我们使用三元运算符判断 a 是否大于 5,是则输出 “a大于5”,否则输出 “a小于等于5”:

let a:number = 7;
console.log(a > 5 ? "a大于5" : "a小于等于5");

// 输出:a大于5

类型运算符

typeof 是一元运算符,可以用于返回操作数的数据类型。

示例:

声明并初始化三个变量

let a = 1;
let b = "xkd";
let c = true;

然后通过typeof 输出这三个变量的数据类型:

console.log(typeof a);  // number
console.log(typeof b);  // string
console.log(typeof c);  // boolean

动手练习

1.现有一个字符串类型的变量 username,请给这个变量赋一个初始值?

2.已知变量 a 的值为 399,变量 b 的值为 25,请输出 a % b 的结果?

3.请使用三元运算符来判断某个变量的值是否为“夏天”,如果是则输出 true,不是则输出 false

4.请判断下面几个变量的数据类型,并输出结果:

var arr = [1, 2, 3, 4, 5];
var obj = {\'a\':1};
var num = 100;
var str = "侠课岛";

链接:https://www.9xkd.com/

以上是关于TypeScript 运算符的主要内容,如果未能解决你的问题,请参考以下文章

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript 打字稿+角度1的启动片段

从 TypeScript 类型定义或 GraphQL 片段定义生成 JavaScript 空对象

TypeScript 运算符

TypeScript的初认识