个性化阅读
专注于IT技术分析

ES6运算符介绍和用法示例

可以将操作符定义为告诉系统实施特定操作的符号。在JavaScript中, 有很多运算符, 通过使用特定的运算符, 你可以执行任何特定的任务。

运算符在表达式中用于评估不同的操作数。

表达式是一种返回值的语句。表达式包括:

  • 运算符:它负责对操作数执行一些运算
  • 操作数:它代表数据。

例如:假设像x * y这样的表达式。在此表达式中, x和y是操作数, 星号(*)符号是乘法运算符。

运算符类型

JavaScript中的运算符可分为:

  • 算术运算符
  • 关系运算符
  • 逻辑运算符
  • 赋值运算符
  • 按位运算符
  • 类型运算符
  • 杂项运算符

让我们尝试详细说明这些运算符。

算术运算符

算术运算符是JavaScript ES6中可用的基本数学运算符。这些运算符负责执行JavaScript中的所有数学运算, 例如加法, 减法等。

操作符 函数
+(加法) 它返回操作数值的总和
-(减法) 它返回操作数值之间的差
*(乘法) 它返回操作数值的乘积。
/(部门) 它用于执行除法, 并返回商。
%(模量) 它还执行除法并返回余数。
++(增量) 它将变量的值加1。
-(递减) 它将变量的值减一。

例如

在此示例中, 我们使用上面列出的所有算术运算符:

var x = 30; 
var y = 20 ;

console.log("Addition: " + (x + y) );
console.log("Subtraction: " + (x - y) );
console.log("Multiplication: " + (x * y) );
console.log("The Division will give you the quotient: " + (x / y) );
console.log("Modulus will give you the Remainder: " + (x % y) );
// pre-increment 
console.log("Value of x after pre-increment: "  + (++x) );
// post-increment 
console.log("Value of x after post-increment: " + (x++) );
// pre-decrement 
console.log("Value of y after pre-decrement: "  + (--y) );
// post-decrement 
console.log("Value of y after post-decrement: " + (y--) );

输出如下:

在终端中执行上述代码时, 将获得以下输出:

Addition : 50
Subtraction: 10
Multiplication: 600
The division will give you the quotient: 1.5
Modulus will give you the Remainder: 10
Value of x after pre-increment: 31
Value of x after post-increment: 31
Value of y after pre-decrement: 19
Value of y after post-decrement: 19

关系运算符

关系运算符用于比较两个值, 并根据表达式返回true或false。这些运算符有时称为比较运算符。

操作符 函数
>(大于) 如果左操作数大于右操作数, 则返回true, 否则返回false。
<(小于) 如果左操作数小于右操作数, 则返回true, 否则返回false。
> =(大于或等于) 如果左操作数大于或等于右操作数, 则返回true, 否则返回false。
<=(小于或等于) 如果左操作数小于或等于右操作数, 则返回true, 否则返回false。
==(平等) 如果两个操作数的值相同, 则返回true, 否则返回false。
!=(不等于) 如果操作数的值不同, 则返回true, 否则返回false。

例如:

在此示例中, 我们使用上面列出的所有关系运算符

var x = 20; 
var y = 15; 

console.log("Value of x: " + x); 
console.log("Value of y: " + y); 
var result = x > y; 
console.log("x is greater than y: " + result); 
result = x < y; 
console.log("x is smaller than y: " + result); 
result = x >= y; 
console.log("x is greater than or equal to  y: " + result); 
result = x <= y; 
console.log("x is smaller than or equal to y: " + result); 
result = x == y; 
console.log("x is equal to y: " + result); 
result = x != y; 
console.log("x not equal to  y: " + result);

输出如下:

在终端中执行此代码时, 将获得以下输出:

Value of x: 20
Value of y: 15
x is greater than y: true
x is smaller than y: false
x is greater than or equal to  y: true
x is smaller than or equal to y: false
x is equal to y: false
x not equal to  y: true

逻辑运算符

逻辑运算符通常用于组合两个或多个关系语句。它们还返回布尔值。

操作符 描述
&&(逻辑与) 如果与&&组合的所有关系语句均为true, 则此运算符返回true, 否则返回false。
|| (逻辑或) 如果至少有一个与||组合的关系语句, 则此运算符返回true。为true, 否则返回false。
! (逻辑非) 它返回语句结果的反函数。

例如:

在此示例中, 我们使用上面列出的所有逻辑运算符。

var x = 30; 
var y = 80; 

console.log("Value of x = " + x );
console.log("Value of y = " + y );

var result = ((x < 40) && (y <= 90)); 
console.log("(x < 40) && (y <= 90): ", result); 

var result = ((x == 50) || (y > 80)); 
console.log("(x == 50) || (y > 80): ", result); 

var result = !((x > 20) && (y >= 80)); 
console.log("!((x > 20) && (y >= 80)): ", result);

输出如下:

Value of x = 30
Value of y = 80
(x < 40) && (y <= 90):  true
(x == 50) || (y > 80):  false
!((x > 20) && (y >= 80)):  false

赋值运算符

赋值运算符用于为变量赋值。赋值运算符左侧的操作数是一个变量, 而赋值运算符右侧的操作数是一个值。

右侧值必须与左侧变量的数据类型相同;否则, 编译器将引发错误。

操作符 函数
=(简单分配) 它只是将右操作数的值分配给左操作数
+ =(添加和分配) 该运算符将右操作数的值添加到左操作数的值, 并将结果分配给左操作数。
-=(减和赋值) 此运算符从左操作数的值中减去右操作数的值, 并将结果分配给左操作数。
* =(相乘和赋值) 此运算符将右操作数的值乘以左操作数的值, 并将结果分配给左操作数。
/ =(划分和分配) 该运算符将右操作数的值除以左操作数的值, 并将结果分配给左操作数。

例如:

在此示例中, 我们使用上面列出的所有逻辑运算符。

var x = 20; 
var y = 40; 

x = y;
console.log("After assignment the value of x is:  " + x); 

x += y; 
console.log("x+=y: " + x); 

x -= y; 
console.log("x-=y: " + x); 

x *= y; 
console.log("x*=y: " + x); 

x /= y; 
console.log("x/=y: " + x); 

x %= y; 
console.log("x%=y: " + x);

输出如下:

After assignment the value of x is:  40 
x+=y: 80
x-=y: 40
x*=y: 1600
x/=y: 40
x%=y: 0

按位运算符

按位运算符用于对涉及单个位操作的二进制数字或位模式执行按位运算。按位运算符对参数的二进制表示形式执行操作

通常, 按位运算符较少使用, 并且与应用程序和超性能程序相关。

操作符 描述
按位与(&) 它将第一个操作数的每个位与第二个操作数的对应位进行比较。如果两个位都为1, 则结果位将设置为1, 否则将设置为0。
按位或(|) 它将第一个操作数的每个位与第二个操作数的对应位进行比较。如果两个位都为0, 则结果位将设置为0, 否则将设置为1。
按位XOR(^) 它需要两个操作数, 并对两个操作数的每一位进行XOR。如果两个位都不同, 则返回1, 否则返回0。
按位非(〜) 它翻转其操作数的位, 即0变为1且1变为0。
左移(<<) 它将左操作数的值向左移动右操作数指定的位数。
符号传播右移(>>) 它将左操作数的值向右移动右操作数指定的位数。这是正负号传播, 因为我们从左边开始添加的位取决于数字的正负号(0表示正, 而1表示负)。
零填充右移 它接受两个操作数。第一个操作数指定数字, 第二个运算符确定要移位的位数。每一位向右移位, 溢出位将被丢弃。由于0位是从左侧添加的, 因此正好为零填充。

例如:

在此示例中, 我们使用上面列出的所有逻辑运算符。

var x = 70;	/* 70 = 0100 0110 */
var y = 80;	/* 80 = 0101 0000 */
var res = 0;

console.log("Value of 70 in binary 0100 0110" );
console.log("Value of 80 in binary 0101 0000" );


res = x & y;       /* 64 = 0100 0000 */
console.log("Value of x & y = %d\n", res );

res = x | y;       /* 86 = 0101 0110 */
console.log("Value of x | y = %d\n", res );

res = x ^ y;       /* 22 = 0001 0110 */
console.log("Value of x ^ y = %d\n", res );

res = ~x;          /*-71 = -0100 0111 */
console.log("Value of ~ x = %d\n", res );

res = x << 2;     /* 280 = 1000 11000 */
console.log("Value of x << 2 = %d\n", res );
res = x >> 2;     /* 17 = 0001 0001 */
console.log("Value of x >> 2 = %d\n", res );

输出如下:

Value of 70 in binary 0100 0110
Value of 80 in binary 0101 0000
Value of x & y = 64

Value of x | y = 86

Value of x ^ y = 22

Value of ~ x = -71

Value of x << 2 = 280

Value of x >> 2 = 17

注意:赋值运算符的逻辑也适用于按位运算符, 因此它们变为<< =, >> =, &=, | =, ^ =。

杂项运算符

这些是在不同情况下执行不同操作的操作员。

操作符 描述
+(串联运算符) 它适用于字符串, 并将第二个字符串附加到第一个字符串。
-(负运算符) 它更改值的符号。
? (条件运算符) 它用于表示条件表达式。也称为三元运算符。

让我们尝试详细了解其他运算符:

求反运算符(-)

用于更改值的符号。

例如:

var num1 = 80;
var num2 = -num1;
console.log("Value of num1 = " +num1); // It will give 80
console.log("Value of num2 = " +num2); // It will give -80

输出如下:

Value of num1 = 80
Value of num2 = -80

串联运算符(+)

它适用于字符串, 并将第二个字符串附加到第一个字符串。你可以通过以下示例了解它:

例子:

var str1 = 'Hello' + 'World';
var str2 = 'Welcome ' + 'Back';
console.log(str1);
console.log(str2);

输出如下:

HelloWorld
Welcome Back

串联运算符不会在字符串之间添加空格。它在单个语句中连接多个字符串。如果要显示字符串之间的间隔, 则必须手动定义它。在上面的示例中, 字符串” HelloWorld”不包含任何空格, 但是第二个字符串” Welcome Back”具有空格, 因为我们已经手动添加了它。

条件运算符(?)

该运算符表示条件表达式。也称为”三元运算符”。

语法如下:

variablename = (condition) ? value1 : value2

其中

condition:它是指条件表达式。

value1:如果条件为true, 则将返回此值。

value2:如果条件为假, 则将返回此值。

例子:

var num1 = 30;
var num2 = 20;
var res = num1 > num2 ? "Yes 30 is greater than 20" : "No It's not";
console.log(res);

输出如下:

Yes 30 is greater than 20

类型运算符

它是一元运算符, 返回操作数的数据类型。

语法如下:

typeof(operand)

你可以在下表中看到由JavaScript中的typeof运算符返回的数据类型和值:

类型 由typeof返回的字符串
String “串”
boolean “布尔值”
Number “数”
Object “宾语”

例子:

var a = 20;
var b = true;
var c = 'Hello';
var d = 'true';
var e;
console.log("Variable a is " +typeof(a));
console.log("Variable b is " +typeof(b));
console.log("Variable c is a " +typeof(c));
console.log("Variable d is a " +typeof(d));
console.log("Variable e is " +typeof(e));

输出如下:

Variable a is number
Variable b is boolean
Variable c is a string
Variable d is a string
Variable e is undefined

在上面的示例中, 变量e未定义(或未初始化);这就是为什么typeof运算符赋予其类型未定义的原因。

如果你在引号内使用布尔值, 则它们将被视为字符串, 因为你可以在上面的示例中看到变量” d”。


赞(0)
未经允许不得转载:srcmini » ES6运算符介绍和用法示例

评论 抢沙发

评论前必须登录!