JavaScript 运算符

算数运算符

Arithmetic Operators

运算符	说明	例子
+	左右都是数值类型时：加法运算 左右包含布尔值类型时：加法运算 左右包含字符串类型时：字符串拼接	10 + 2 10 + true + false 10 + "10" + " "
-	减法运算	10 - 2
*	乘法运算	10 * 2
/	除法运算	10 / 2
**	幂运算	10 ** 2
%	取余运算	10 % 2
++	自加一运算	a ++ ( a + 1 )
--	自减一运算	a -- ( a - 1 )

赋值运算符

Assignment Operators

运算符	说明	例子
=	赋值操作 将右侧值直接赋值给左侧变量	a = b
+=	加等于操作 将左侧变量当前值加上右侧值再后赋值给左侧变量	a += b ( a = a + b )
-=	减等于操作 将左侧变量当前值减去右侧值再后赋值给左侧变量	a -= b ( a = a - b )
*=	乘等于操作 将左侧变量当前值乘以右侧值再后赋值给左侧变量	a *= b ( a = a * b )
/=	除等于操作 将左侧变量当前值除以右侧值再后赋值给左侧变量	a /= b ( a = a / b )

比较运算符

Comparison Operators

比较运算的结果是一个布尔值 ( true或false )

运算符	说明	例子
>	左侧大于右侧	a > b
<	左侧小于右侧	a < b
>=	左侧大于等于右侧	a >= b
<=	左侧小于等于右侧	a <= b
==	左侧等于右侧	a == b
===	左侧完全等于右侧 ( 严格等于 )	a === b
!=	左侧不等于右侧	a != b
!==	左侧完全不等于右侧 ( 严格不等于 )	a !== b

== vs ===、!= vs !==

• ==与!=比较的是左右两侧数据在类型转换后的值
• ===与!==比较的是左右两侧数据的值以及数据类型

console.log(1 == "1", 1 === "1");     // true false
console.log(true == 1, true === 1);   // true false
console.log(false == 0, false === 0); // true false

console.log(1 != "1", 1 !== "1");     // false true
console.log(true != 1, true !== 1);   // false true
console.log(false != 0, false !== 0); // false true

逻辑运算符

Logical Operators

运算符	说明	例子
&&	与运算	a = b && c
||	或运算	a = b || c
!	非运算	a = !b

console.log(true && true);      // true
console.log(true && false);     // false
console.log(false && true);     // false
console.log(true && "xxx");     // "xxx"
console.log(false && "xxx");    // false

console.log(true || true);      // true
console.log(true || false);     // true
console.log(false || true);     // true
console.log(true || "xxx");     // true
console.log(false || "xxx");    // "xxx"

console.log(!true, !false);     // false true
console.log(![], !![]);         // false true

三目运算符

Ternary Operator / Conditional Operator

运算符	说明	例子
? :	用于基于判断条件返回一个对应的值	条件 ? value1 : value2

展开运算符

Spread Operator

运算符	说明
...	可以展开数组、键值对对象中的成员，可灵活用于数组、键值对对象的合并

// 展开数组，将各个元素作为多个参数传递给函数
函数(...[参数1, 参数2, 参数3]);

// 合并数组
let 新数组 = [...数组1, ...数组2];

// 合并键值对对象
let 新键值对对象 = { ...键值对对象1, ...键值对对象1 };

合并键值对对象时的注意点

• 创建的新对象是浅拷贝源对象
• 同名键值对会被覆盖

可选链运算符

Optional Chaining Operator

运算符	说明
?.	可以安全的访问对象的属性、数组的元素、调用函数 当左侧数据为空值 ( undefined、null ) 时不会报错而是直接短路返回undefined

键值对对象?.键;
键值对对象?.["键"];
数组?.[索引];
函数?.();

可以优化链式调用

const name = (message && message.user && message.user.name) || "默认名字"; 
const name = message?.user?.name || "默认名字";                            

空值合并运算符

Nullish Coalescing Operator

运算符	说明
??	当左侧数据为空值 ( undefined、null ) 时返回右侧数据，否则直接返回左侧数据

const a = 100;
const b = null;

console.log(a ?? "xxx");    // 100
console.log(b ?? "xxx");    // "xxx"