教程 > ES6 教程 > ES6 基础 阅读:68

ES6 运算符

表达式是一种特殊的语句,可以计算出一个值。 每个表达式都由以下两部分组成

  • 操作数 - 代表数据。
  • 运算符 - 定义如何处理操作数以产生值。

考虑以下表达式 - 2 + 3。在表达式中,2 和 3 是操作数,符号 +(加号)是运算符。 JavaScript 支持以下类型的运算符

  • 算术运算符
  • 逻辑运算符
  • 关系运算符
  • 按位运算符
  • 赋值运算符
  • 三元/条件运算符
  • 字符串运算符
  • 类型运算符
  • void 运算符

算术运算符

假设变量 a 和 b 的值分别为 10 和 5。

var num1 = 10
var num2 = 2
var res = 0
res = num1+num2
console.log("Sum: "+ res);
res = num1-num2;
console.log("Difference: "+res)
res = num1*num2
console.log("Product: "+res)
res = num1/num2
console.log("Quotient: "+res)
res = num1%num2
console.log("Remainder: "+res)
num1++
console.log("Value of num1 after increment "+num1)
num2--
console.log("Value of num2 after decrement "+num2)

执行结果如下

Sum: 12
Difference: 8
Product: 20
Quotient : 5
Remainder: 0
Value of num1 after increment: 11
Value of num2 after decrement: 1
运算符 功能 示例
  • | 添加 返回操作数的总和。 | a + b 等于 15
  • | 减法 返回值的差异。 | a-b 为 5 * | 乘法 返回值的乘积。 | a*b 是 50 / | 分配 执行除法运算并返回商。 | a/b 为 2 % | 模数 执行除法并返回余数。 | a%b 为 0

++ |增量 将变量的值增加 1。| a++ 为 11 -- | 递减 将变量的值减一。 | a-- 是 9


关系运算符

关系运算符测试或定义两个实体之间的关系类型。 关系运算符返回一个布尔值,即 true/false

假设 A 的值为 10,B 为 20。

var num1 = 5;
var num2 = 9;
console.log("Value of num1: " + num1);
console.log("Value of num2 :" + num2);
var res = num1 > num2;
console.log("num1 greater than num2: " + res);
res = num1 < num2;
console.log("num1 lesser than num2: " + res);
res = num1 >= num2;
console.log("num1 greater than or equal to num2: " + res);
res = num1 <= num2;
console.log("num1 lesser than or equal to num2: " + res);
res = num1 == num2;
console.log("num1 is equal to num2: " + res);
res = num1 != num2;
console.log("num1 not equal to num2: " + res);

上述代码执行结果如下

Value of num1: 5
Value of num2 :9
num1 greater than num2: false
num1 lesser than num2: true
num1 greater than or equal to num2: false
num1 lesser than or equal to num2: true
14 num1 is equal to num2: false
16 num1 not equal to num2: true
运算符 功能 示例

| 大于 | (A > B) 为假 < | 小于 | (A < B) 为真 = | 大于或等于 | (A >= B) 为假 <= | 小于或等于 | (A <= B) 为真 == | 相等 | (A == B) 为假 != | 不等于 | (A!= B) 为真


逻辑运算符

逻辑运算符用于组合两个或多个条件。 逻辑运算符 to 返回一个布尔值。 假设变量 A 的值为 10,B 为 20。

var avg = 20;
var percentage = 90;
console.log("Value of avg: " + avg + " ,value of percentage: " + percentage);
var res = ((avg > 50) && (percentage > 80));
console.log("(avg>50)&&(percentage>80): ", res);
var res = ((avg > 50) || (percentage > 80));
console.log("(avg>50)||(percentage>80): ", res);
var res = !((avg > 50) && (percentage > 80));
console.log("!((avg > 50)&&(percentage>80)): ", res);

以上代码执行结果如下

Value of avg: 20 ,value of percentage: 90
(avg > 50)&&(percentage > 80): false
(avg > 50)||(percentage > 80): true
!((avg > 50)&&(percentage > 80)): true

短路操作符

&&|| 运算符用于组合表达式。

&& 运算符仅在两个条件都返回 true 时才返回 true。 让我们考虑一个表达式

var a = 10
var result = ( a<10 && a>5)

在上面的示例中,a<10a>5 是由 && 运算符组合的两个表达式。 这里,第一个表达式返回 false。 但是,&& 运算符要求两个表达式都返回 true。 因此,运算符会跳过第二个表达式。

|| 如果其中一个表达式返回真,则运算符返回真。 例如

var a = 10
var result = ( a>5 || a<10)

在上面的代码片段中,两个表达式 a>5a<10|| 组合 操作员。 在这里,第一个表达式返回 true。 因为,第一个表达式返回 true,|| 运算符跳过后续表达式并返回 true

由于 &&|| 的这种行为 运算符,它们被称为短路运算符。

运算符 功能 示例
&& 与 仅当指定的所有表达式都返回 true 时,运算符才返回 true。 (A > 10 && B > 10) 为假
! 非 运算符返回表达式结果的倒数。 例如:!(7>5) 返回 false。 !(A > 10) 为真

位运算符

JavaScript 支持以下位运算符。

var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var result;
result = (a & b);
console.log("(a & b) => ", result);
result = (a | b);
console.log("(a | b) => ", result);
result = (a ^ b);
console.log("(a ^ b) => ", result);
result = (~b);
console.log("(~b) => ", result);
result = (a << b);
console.log("(a << b) => ", result);
result = (a >> b);
console.log("(a >> b) => ", result);

上述代码执行结果如下

(a & b) => 2
(a | b) > 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0

下表总结了 JavaScript 的按位运算符。

运算符 使用 描述
按位与 a & b 在两个操作数的对应位均为 1 的每个位位置返回一个 1
按位或 a b
按位异或 a^b 在每个位位置返回一个 1,其中一个但不是两个操作数的对应位都是 1
按位非 ~ a 反转其操作数的位
左移 a << b 将二进制表示形式的 a 向左移动 b (< 32) 位,从右移入零
符号传播右移 a >> b 将二进制表示 a 向右移动 b (< 32) 位,丢弃移出的位
零填充右移 a >>> b 将二进制表示形式的 a 向右移动 b (< 32) 位,丢弃移出的位,并从左侧移入零

赋值运算符

下表总结了赋值运算符。

序号 | 运算符 | 描述 | 示例 :--: | -- | -- 1 | =(简单赋值) | 将右侧操作数的值分配给左侧操作数。 | 示例 - C = A + B 将 A + B 的值分配给 C 2 | += (添加和赋值) | 它将右操作数与左操作数相加,并将结果赋给左操作数。 | 示例 - C += A 等同于 C = C + A 3 | -=(减法和赋值)| 它从左操作数中减去右操作数,并将结果赋给左操作数。 | 示例 C -= A 等同于 C = C - A 4 | *=(乘法和赋值) | 它将右操作数与左操作数相乘,并将结果赋给左操作数。 | 示例 C *= A 等同于 C = C * A 5 | /=(除法和赋值) | 它将左操作数与右操作数相除,并将结果赋给左操作数。 | 示例 C = A 等同于 C = C \ A

注意 - 相同的逻辑适用于按位运算符,因此它们将变为 <<=>>=>>=&=|=^=

var a = 12;
var b = 10;
a = b;
console.log("a=b: " + a);
a += b;
console.log("a+=b: " + a);
a -= b;
console.log("a-=b: " + a);
a *= b;
console.log("a*=b: " + a);
a /= b;
console.log("a/=b: " + a);
a %= b;
console.log("a%=b: " + a);

上述代码执行结果如下

a=b: 10
a+=b: 20
a-=b: 10
a*=b: 100
a/=b: 10
a%=b: 0

杂项运算符

以下是一些杂项运算符。

否定运算符 (-)

更改值的符号。 以下程序是相同的示例。

var x = 4 
var y = -x; 
console.log("value of x: ",x); //outputs 4 
console.log("value of y: ",y); //outputs -4

成功执行上述程序时会显示以下输出。

value of x: 4 
value of y: -4 

字符串运算符:连接运算符 (+)

+ 运算符应用于字符串时会将第二个字符串附加到第一个字符串。 下面的程序有助于理解这个概念。

var msg = "hello"+"world" 
console.log(msg) 

成功执行上述程序时会显示以下输出。

helloworld

连接操作不会在字符串之间添加空格。 多个字符串可以连接在一个语句中。

条件运算符 (?)

此运算符用于表示条件表达式。 条件运算符有时也称为三元运算符。 以下是语法。

Test ? expr1 : expr2
  • Test - 指的是条件表达式
  • expr1 - 如果条件为真则返回值
  • expr2 - 如果条件为假则返回值
var num = -2 
var result = num > 0 ?"positive":"non-positive" 
console.log(result)

第 2 行检查变量 num 中的值是否大于零。 如果 num 设置为大于零的值,则返回字符串“positive”,否则返回“non-positive”字符串。

成功执行上述程序时会显示以下输出。

non-positive 

typeof 运算符

它是一个一元运算符。 该运算符返回操作数的数据类型。 下表列出了 JavaScript 中 typeof 运算符返回的数据类型和值。

类型 typeof 返回的字符串
Number "number"
String "string"
Boolean "boolean"
Object "object"

以下示例代码将数字显示为输出。

var num = 12 
console.log(typeof num); //output: number

成功执行上述代码后会显示以下输出。

number

扩展运算符

ES6 提供了一个新的运算符,称为扩展运算符扩展运算符由三个点 ... 表示。 扩展运算符将数组转换为单独的数组元素。

扩展运算符和函数

以下示例说明了在函数中使用扩展运算符

function addThreeNumbers(a,b,c){
    return a+b+c;
}
const arr = [10,20,30]
console.log('sum is :',addThreeNumbers(...arr))
console.log('sum is ',addThreeNumbers(...[1,2,3]))

上面代码的输出如下所示

sum is : 60
sum is 6

扩展运算符和数组复制与连接

扩展运算符可用于将一个数组复制到另一个数组中。 它还可用于连接两个或多个数组。 这在下面的示例中显示

// 使用扩展运算符复制数组
let source_arr = [10,20,30]
let dest_arr = [...source_arr]
console.log(dest_arr)

// 连接两个数组
let arr1 = [10,20,30]
let arr2 =[40,50,60]
let arr3 = [...arr1,...arr2]
console.log(arr3)

上述代码的输出如下所示

[10, 20, 30]
[10, 20, 30, 40, 50, 60]

扩展运算符和对象复制和连接

扩展运算符可用于将一个对象复制到另一个对象。 它还可用于连接两个或多个对象。 这在下面的示例中显示

// 赋值对象
let student1 ={firstName:'Mohtashim',company:'TutorialsPoint'}
let student2 ={...student1}
console.log(student2)
// 连接对象
let student3 = {lastName:'Mohammad'}
let student4 = {...student1,...student3}
console.log(student4)

上面代码的输出如下所示

{firstName: "Mohtashim", company: "TutorialsPoint"}
{firstName: "Mohtashim", company: "TutorialsPoint", lastName: "Mohammad"}

查看笔记

扫码一下
查看教程更方便