表达式和操作符

js中的表达式和运算符包括赋值操作符(=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、|=、^=、&&=、||=、??=)、比较操作符(==、!=、===、!==、>、>=、<、<=、)、算术操作符{%、+、-、*、 /、++、--、+(此处为单元运算符)、-(此处为单元运算符)、**}、位操作符(&、\、^、~、<<、>>、>>>)、逻辑操作符(&&、||、!)、字符串操作符(+、+=)、条件操作符(?:)、逗号操作符(,)、单元操作符(delete、typeof、void)、关系操作符(in、instanceof)、基本表达式(this、()、new、super、)

赋值操作符

赋值操作符的作用是将其右边的字面量或者表达式的值赋给右边的变量

操作符	作用	语义	实例
=	将右边的值赋给左边的变量或者常量	a = b	var a = 4; // 执行完该操作后，a的值为4
+=	把左边变量的值和右边变量或者字面量的值相加后得到的结果赋给左边变量	a = a+b	var a = 2; a += 2; 执行完这些语句后，a的值为4
-=	把左边变量的值和右边变量或者字面量的值相减后得到的结果赋给左边变量	a = a - b	var a = 2; a -= 2;执行完这些语句后，a的值为0
*=	把左边变量的值和右边变量或者字面量的值相乘后得到的结果赋给左边变量	a = a * b	var a = 3; a *= 2; 执行完这些语句后，a的值为6
/=	把左边变量的值和右边变量或者字面量的值相除后得到的结果赋给左边变量	a = a / b	var a = 3; a /= 2; 执行完这些语句后，a的值为1.5
%=	把左边变量的值和右边变量或者字面量的值进行求余运算后得到得结果赋给左边变量	a = a % b	var a = 3; a %= 2; 执行完这些语句后，a的值为1
**=	以左边的值为基数，右边的值为指数，求出结果后，把结果赋值给左边变量	a = a ** b	var a = 2; a **= 3; 执行完这些语句后，a的值为8
<<=	在左边的值上进行左移右边的值位数的位移运算，最终结果赋给左边的变量	a = a << b	var a = 2; a <<= 2; 执行完这些语句后，a的值为8
>>=	在左边的值上进行右移右边的值位数的位移运算，最终结果赋给左边的变量	a = a >> b	var a = 2; a >>= 2; 执行完这些语句后，a的值为0
>>>=	在左边的值上进行无符号右移右边的值位数的位移运算，最终结果赋给左边的变量	a = a >>> b	var a = 2; a >>>= 2; 执行完这些语句后，a的值为0
&=	对左边的值和右边的值进行按位与运算，最终结果赋给左边的变量	a = a & b	var a = 2; a &= 2; 执行完这些语句后，a的值为2
^=	对左边的值和右边的值进行按位异或运算，最终结果赋给左边的变量	a = a ^ b	var a = 2; a ^= 2; 执行完这些语句后，a的值为0
|=	对左边的值和右边的值进行按位或运算，最终结果赋给左边的变量	a = a | b	`var a = 2; a
&&=	首先判断左边的值是否为真值，如果是，则将右边的值赋给左边的变量	a && (a = b)	var a = 2; a &&= 4; 执行完这些语句后，a的值为4
||=	首先判断左边的值是否为假值，如果是，则将右边的值赋给左边的变量	a || (a = b)	`var a = 2; a
??=	首先判断左边的值是否为undefined、null，如果是，则将右边的值赋给左边的变量	a ?? (a = b)	var a; a ??= 4; 执行完这些语句后，a的值为4

给属性赋值

赋值操作符也可以给对象的属性赋值

const obj = {};
obj.x = 10;
console.log(obj.x) // 控制台输出10

Destructuring assignment

对于数组或者对象可以使用Destructuring assignment的方式

const foo = ["one", "two", "three"];
const [one, two, three] = foo;

上面这个例子定义了一个具有三个元素的数组foo，通过Destructuring assignment的方式将foo中的三个元素分别赋给常量one、two、three

比较运算符

在这一部分中，默认有以下语句

const a = 3;
const b = 4;

下面是js中的额比较运算符的简介

操作符	作用	举例
==	操作符两边的表达式值相同则返回true，否则返回false	a == b 该实例返回false
!=	操作符两边的表达式值不同则返回true，否则返回false	a != b 该实例返回true
===	操作符两边的表达式结果相同，且结果的类型相同，则返回true；否则返回false	a === b 返回false
!==	操作符两边的表达式结果不同或者结果的类型不同，则返回true；否则返回false	a !== b 返回true
>	操作符左边的表达式结果的值大于右边的表达式的结果值时，返回true；否则返回false	a > b 返回false
>=	操作符左边的表达式结果的值大于或者等于右边的表达式结果值时，返回true；否则返回false	a >= b 返回false
<	操作符左边的表达式结果的值小于右边的表达式结果值时，返回true；否则返回false	a < b 返回true
<=	操作符左边的表达式结果的值小于或者等于右边的表达式结果值时，返回true；否则返回false	a <= b 返回true

算术运算符

算术运算符通常用来进行数学运算，标准的算术运算符(+、-、*、/)跟他们在数学中的作用一样

var a = 10;
var b = 20;
console.log(a + b); // 控制台输出30

js中除了标准的算术运算符外，还有一些编程语言特有的算术运算符

运算符	作用	举例
%	求运算符两边操作数的余数	10 % 4 返回2
++	该操作符是一个单元运算符，当其在操作数的前面时，它会先将变量的值加1，然后再返回变量的值；当其在操作数的后面时，它会先返回变量的值，再将变量的值加1	如果变量a的值为1，当使用++a时，它会先将a的值加1变为2，再返回a的值；当使用a++时，它会先返回a的值，再将a的值变为2
–	与++类似，不同的是它会将变量的值减1	如果变量a的值为1，当使用--a时，它会先将a的值加1变为0，再返回a的值；当使用a--时，它会先返回a的值，再将a的值变为0
-	单元运算符，返回它的操作数的相反数	如果x是3，那么-x返回-3；如果x是-3，那么-x返回3
+	单元运算符，如果它的参数不是数字，则会尝试将其转换为数字	+"1"返回1，+true返回1
**	以左边的操作数为基数，以右边的操作数为指数进行计算	2**3返回8

位运算符

位运算符将它们的操作数作为32位的二进制数进行运算，返回的结果以十进制形式返回

操作符	作用	举例
&	对左右两个操作数按位进行运算，对应的位都为1则在当前位的位置返回1，否则在当前位的位置返回0。最终结果是一个十进制数	2 & 9 返回0
|	对左右两个操作数按位进行运算，对应的位都为0则在当前位的位置返回0，否则在当前位的位置返回1。最终结果是一个十进制数	`2
^	对左右两个操作数按位进行运算，对应的位不相同则在当前位的位置返回1，否则在当前位的位置返回0。最终结果是一个十进制数	2 ^ 9 返回11
~	为一个单元运算符，对操作数进行按位取反操作，当前位为1则在当前位上返回0，否则在当前位上返回1。最终结果是一个十进制数	~2返回11
<<	将左边的操作数按位左移右边的操作数位，在右边补零，最终结果是一个十进制数	9 << 2返回36
>>	将左边的操作数右移右边的操作数位，右边溢出的位数，在左边以符号位补齐。最终结果是一个十进制数	9 >> 2 返回2
>>>	跟>>作用类似，不同的是其右边溢出的位数，在左边以0补齐	-9 >>> 2返回1073741821 ；而-9 >> 2则返回-3

逻辑运算符

逻辑运算符通常用于布尔值，但也可以用于非布尔值，在某些情况下，其返回的也并非布尔值

运算符	用法	说明
&&	expr1 && expr2	当expr1跟false值相等时返回expr1的值，否则返回expr2的值。当其用于布尔值时，只有两边同时为true时才会返回true；否则返回false
||	`expr1
!	!expr	如果操作数跟true值相等时返回false，否则返回true

以下是一些逻辑运算符的使用实例

true && "cats"; // 返回"cats"
false && "cats"; // 返回false
"high" && "cats"; // 返回"cats"
false || "cats"; // 返回"cats"
true || "cats"; //返回true
"high" || "cats"; // 返回"high"
!"high"; // 返回false
!false; // 返回true

BigInt运算符

除了>>>外，大部分可以用于number类型的运算符都可以用于BigInt类型。

1n + 2n; // 返回3n

但请注意，BigInt类型和number类型不能混合运算

1n + 3; // Uncaught TypeError: can't convert BigInt to number

但BigInt类型和number类型可以进行比较

1n < 2; // 返回true

String运算符

除了比较运算符外，+也可以用用于字符串类型，其将左右两边的字符串连接为一个字符串

"Hello, " + "world!"; // 返回"Hello, world!"

条件运算符

条件运算符是一个三元运算符，其语法如下

expr1 ? expr2 : expr3;

若expr1的值为true，则返回expr2的值；否则返回expr3的值

1 < 2 ? 3 : 4; // 返回3

逗号运算符

使用逗号运算符的表达式的值为最后一个逗号之后的表达式的值，其语法为下

expr1, expr2, expr3, ..., exprn;

单元运算符

delete

delete运算符可以删除对象的属性，也可以删除数组的元素（但通常不建议使用），当其用于对象属性时，其语法如下

delete object.property;
delete object["propertyKey"];
delete objectName[index];

如果删除成功，它将会从对象中移除特定的属性，之后再访问这个属性，将会返回defined。如果删除成功，则返回true；如果删除失败，其将会返回false

const person = {
    name: "小明",
    age: 18,
    sex: "female",
};

delete person.name; // 返回true
delete person["age"]; // 返回true

typeof

typeof操作返回一个表示其操作数类型的字符串，其语法如下

typeof 操作数;

当其用于true和null时，其返回以下结果

typeof true; // 返回"boolean"
typeof null; // 返回"object"

用于number类型或者字符串类型时，其返回以下结果

typeof 1; // 返回"number"
typeof "小明"; // 返回"string"

用于方法或者函数时，其都返回function

typeof blur; // 返回"function"
typeof Math.abs; // 返回"function"  

void

void能够在不返回值的情况下计算表达式

关系运算符

关系运算符比较它的操作数，并基于比较结果返回布尔值

in

in操作符返回true如果指定的属性存在于指定的对象中，否则返回false，其语法如下

属性名 in 对象名;

当其用于数组时可能会有些特殊

const arr = ["wang", "ji", "sa"];
"sa" in arr; // 返回true
"ji" in arr; // 返回true
"wang" in arr; // 返回true
"length" in arr; // 返回true

上面这个实例中arr没有"length"这个元素，但我们使用"length" in arr时，它却返回true，这是因为length是数组对象的一个属性。in操作符主要用于判断属性是否存在于指定的对象中

instanceof

该运算符主要用于判断某个对象是否是指定的对象类型，其返回布尔值，语法如下

对象名 instanceof 对象类型;

基本表达式

this

使用this可以获取引用的当前对象，通常是指当前运用方法的调用者，其使用方法如下

this.属性名;
this["属性名"];

下面是一个使用示例

const person = {
    name: "小明",
    getName: function () {
        console.log(this.name);
    }
};

person.getName(); // 当使用这行语句调用时，getName函数中的this指的就是person对象

（）

该运算符通常用于改变优先级

new

new运算符通常用于创建一个新对象，其语法如下

objectname = new objectType(param1, param2, ..., paramN);

super

该运算符通常用于调用父类的函数，其语法如下

super(args); // 调用父类构造器