学习ES6（三）--运算符（详解） --新增扩展运算符（实际操作详解）

一个表达式是一种特殊的声明，其值是值。每个表达式都由-

• 操作数 -表示数据。

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

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

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

算术运算符

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

 

操作符	功能	例
+	加成 返回操作数之和。	a + b是15
--	减法 返回值的差。	ab是5
*	乘法 返回值的乘积。	a * b是50
/	除 执行除法运算并返回商。	a / b是2
％	取余 执行除法并返回余数。	a％b是0
++	增量 将变量的值加1。	a ++是11
-	减量 将变量的值减一。	a--是9

 

关系运算符

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

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

 

操作符	描述	例
>	大于	（A> B）为假
<	小于	（A <B）为真
> =	大于或等于	（A> = B）为假
<=	小于或等于	（A <= B）为真
==	平等	（A == B）为假
！=	不平等	（A！= B）为真

 

逻辑运算符

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

 

操作符	描述	例
&&	且 仅当指定的所有表达式均返回true时，运算符才返回true。	（A> 10 && B> 10）为假
||	或 如果指定的至少一个表达式返回true，则运算符返回true。	（A> 10 || B> 10）为真
！	非 运算符返回表达式相反结果。例如：！（7> 5）返回false。	（A> 10）为真

 

按位运算符

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

 

操作符	用法	描述
按位与	a & b	在两个操作数的对应位为1的每个位位置返回1
按位或	a | b	在每个操作数或两个操作数的对应位为1的每个位位置返回1
按位异或	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	/ =（划分和分配） 它将左操作数除以右操作数，并将结果分配给左操作数。

 

注 –相同的逻辑适用于按位运算符，因此它们将变为<< =，>> =，>> =，＆=，| =和^ =。

杂项运算符

以下是一些其他运算符。

否定运算符（-）

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

 

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

字符串运算符：串联运算符（+）

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

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

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

条件运算符（？）

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

Test ? expr1 : expr2

Test ? 条件表达式

expr1 ? 如果条件为真，则返回值expr1

expr2 ? 如果条件为假，则返回值expr2 

var num = -2 
var result = num > 0 ?"positive":"non-positive"  //变量num中的值是否大于零。如果num设置为大于零的值，则返回字符串“positive”，否则返回“non-positive”字符串。
console.log(result)//输出non-positive 

类型运算符

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

 

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

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

扩展运算符

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

扩展运算符和函数

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

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

扩展运算符可用于将一个数组复制到另一个数组中。它也可以用来连接两个或多个数组。

 //copy array using spread operatorlet source_arr = [10,20,30]let dest_arr = [...source_arr]console.log(dest_arr) //输出[10, 20, 30]//concatenate two arrayslet arr1 = [10,20,30]let arr2 =[40,50,60]let arr3 = [...arr1,...arr2]console.log(arr3) //输出[10, 20, 30, 40, 50, 60]

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

扩展运算符可用于将一个对象复制到另一个对象。它也可以用来连接两个或多个对象。

 

//copy objectlet student1 ={firstName:'Mohtashim',company:'TutorialsPoint'}let student2 ={...student1} //输出 {firstName: "Mohtashim", company: "TutorialsPoint"}console.log(student2)//concatenate objectslet student3 = {lastName:'Mohammad'}let student4 = {...student1,...student3} 
//输出 {firstName: "Mohtashim", company: "TutorialsPoint", lastName: "Mohammad"}

console.log(student4)