运算符
运算符
算术运算符
用于执行算术运算。
- 加法:
+
- 减法:
-
- 乘法:
*
- 除法:
/
- 取余:
%
- 自增:
++
- 自减:
--
- 指数:
**
加法运算符 (+)
将两个操作数相加。如果操作数是字符串,则进行字符串连接。
let a = 5;
let b = 10;
console.log(a + b); // 输出: 15
let str1 = 'Hello, ';
let str2 = 'world!';
console.log(str1 + str2); // 输出: Hello, world!
减法运算符 (-)
将右操作数从左操作数中减去。
let a = 15;
let b = 10;
console.log(a - b); // 输出: 5
乘法运算符 (*)
将两个操作数相乘。
let a = 5;
let b = 10;
console.log(a * b); // 输出: 50
除法运算符 (/)
将左操作数除以右操作数。
let a = 20;
let b = 4;
console.log(a / b); // 输出: 5
取余运算符 (%)
返回左操作数除以右操作数的余数。
let a = 17;
let b = 5;
console.log(a % b); // 输出: 2
自增运算符 (++)
将操作数加一。可以作为前缀或后缀使用。
let a = 5;
console.log(++a); // 输出: 6 (前缀自增,先加后用)
console.log(a++); // 输出: 6 (后缀自增,先用后加)
console.log(a); // 输出: 7
自减运算符 (--)
将操作数减一。可以作为前缀或后缀使用。
let a = 5;
console.log(--a); // 输出: 4 (前缀自减,先减后用)
console.log(a--); // 输出: 4 (后缀自减,先用后减)
console.log(a); // 输出: 3
指数运算符 (**)
将第一个操作数作为底数,第二个操作数作为指数进行幂运算。
let a = 2;
let b = 3;
console.log(a ** b); // 输出: 8
比较运算符
用于比较两个值。
- 等于:
==
- 严格等于:
===
- 不等于:
!=
- 严格不等于:
!==
- 大于:
>
- 小于:
<
- 大于等于:
>=
- 小于等于:
<=
等于 (==)
==
运算符用于比较两个值是否相等。它会进行类型转换后再比较。
console.log(5 == 5); // 输出: true
console.log(10 == 10.0); // 输出: true
console.log(5 == '5'); // 输出: true
console.log(0 == false); // 输出: true
console.log(null == undefined); // 输出: true
console.log('hello' == 'hello'); // 输出: true
console.log(5 == 10); // 输出: false
严格等于 (===)
===
运算符用于比较两个值是否严格相等。它不会进行类型转换,只有在类型和值都相同的情况下才会返回 true
。
console.log(5 === 5); // 输出: true
console.log(10 === 10.0); // 输出: false
console.log(5 === '5'); // 输出: false
console.log(0 === false); // 输出: false
console.log(null === undefined); // 输出: false
console.log('hello' === 'hello'); // 输出: true
console.log(5 === 10); // 输出: false
不等于 (!=)
!=
运算符用于比较两个值是否不相等。它会进行类型转换后再比较
console.log(5 != 5); // 输出: false
console.log(5 != '5'); // 输出: false
console.log(0 != false); // 输出: false
console.log(null != undefined); // 输出: false
console.log('hello' != 'hello'); // 输出: false
console.log(5 != 10); // 输出: true
严格不等于 (!==)
!==
运算符用于比较两个值是否严格不相等。它不会进行类型转换,只有在类型或值不相同的情况下才会返回 true
。
console.log(5 !== 5); // 输出: false
console.log(5 !== '5'); // 输出: true
console.log(0 !== false); // 输出: true
console.log(null !== undefined); // 输出: true
console.log('hello' !== 'hello'); // 输出: false
console.log(5 !== 10); // 输出: true
大于 (>)
>
运算符用于比较左操作数是否大于右操作数。
console.log(10 > 5); // 输出: true
console.log(5 > 10); // 输出: false
console.log(5 > 5); // 输出: false
console.log('b' > 'a'); // 输出: true
console.log('a' > 'b'); // 输出: false
小于 (<)
<
运算符用于比较左操作数是否小于右操作数。
console.log(10 < 5); // 输出: false
console.log(5 < 10); // 输出: true
console.log(5 < 5); // 输出: false
console.log('a' < 'b'); // 输出: true
console.log('b' < 'a'); // 输出: false
大于等于 (>=)
>=
运算符用于比较左操作数是否大于或等于右操作数。
console.log(10 >= 5); // 输出: true
console.log(5 >= 10); // 输出: false
console.log(5 >= 5); // 输出: true
console.log('b' >= 'a'); // 输出: true
console.log('a' >= 'b'); // 输出: false
小于等于 (<=)
<=
运算符用于比较左操作数是否小于或等于右操作数
console.log(10 <= 5); // 输出: false
console.log(5 <= 10); // 输出: true
console.log(5 <= 5); // 输出: true
console.log('a' <= 'b'); // 输出: true
console.log('b' <= 'a'); // 输出: false
逻辑运算符
用于组合布尔值,实现复杂条件判断。
- 逻辑与:
&&
- 逻辑或:
||
- 逻辑非:
!
逻辑与 (&&)
&&
运算符用于两个操作数之间的逻辑与操作。只有当两个操作数都为 true
时,结果才为 true
。
console.log(true && true); // 输出: true
console.log(true && false); // 输出: false
console.log(false && true); // 输出: false
console.log(false && false); // 输出: false
let a = 5;
let b = 10;
console.log(a > 0 && b > 0); // 输出: true (a 和 b 都大于 0)
console.log(a > 0 && b < 0); // 输出: false (b 不小于 0)
逻辑或 (||)
||
运算符用于两个操作数之间的逻辑或操作。只要有一个操作数为 true
,结果就为 true
console.log(true || true); // 输出: true
console.log(true || false); // 输出: true
console.log(false || true); // 输出: true
console.log(false || false); // 输出: false
let a = 5;
let b = -10;
console.log(a > 0 || b > 0); // 输出: true (a 大于 0)
console.log(a < 0 || b < 0); // 输出: true (b 小于 0)
逻辑非 (!)
!
运算符用于对单个操作数的逻辑非操作。如果操作数为 true
,结果为 false
;如果操作数为 false
,结果为 true
。
console.log(!true); // 输出: false
console.log(!false); // 输出: true
let a = 5;
console.log(!(a > 0)); // 输出: false (a 大于 0 为 true, 取反后为 false)
console.log(!(a < 0)); // 输出: true (a 小于 0 为 false, 取反后为 true)
位运算符
直接对二进制位操作,实现数据的底层 bitwise
计算。
- 按位与:
&
- 按位或:
|
- 按位异或:
^
- 按位非:
~
- 左移:
<<
- 右移:
>>
- 无符号右移:
>>>
按位与 (&)
&
运算符对两个数的每一位执行与操作。只有当两位都为 1 时,结果才为 1。
let a = 5; // 0101
let b = 3; // 0011
console.log(a & b); // 输出: 1 (0001)
按位或 (|)
|
运算符对两个数的每一位执行或操作。只要有一位为 1,结果就为 1
let a = 5; // 0101
let b = 3; // 0011
console.log(a | b); // 输出: 7 (0111)
按位异或 (^)
^
运算符对两个数的每一位执行异或操作。当两位不同时,结果为 1
let a = 5; // 0101
let b = 3; // 0011
console.log(a ^ b); // 输出: 6 (0110)
按位非 (~)
~
运算符对一个数的每一位执行非操作,将 0 变为 1,1 变为 0。结果是该数值的反码(即取反)
let a = 5; // 0101
console.log(~a); // 输出: -6 (取反码并加 1,即 -a - 1)
左移 (<<)
<<
运算符将一个数的所有位左移指定的位数。左移操作会在右边添加 0。
let a = 5; // 0101
console.log(a << 1); // 输出: 10 (1010)
console.log(a << 2); // 输出: 20 (10100)
右移 (>>)
>>
运算符将一个数的所有位右移指定的位数。右移操作会在左边添加符号位(正数添加 0,负数添加 1)。
let a = 5; // 0101
console.log(a >> 1); // 输出: 2 (0010)
console.log(a >> 2); // 输出: 1 (0001)
let b = -5; // 11111111111111111111111111111011 (二进制补码表示)
console.log(b >> 1); // 输出: -3 (11111111111111111111111111111101)
无符号右移 (>>>)
>>>
运算符将一个数的所有位右移指定的位数。无符号右移操作会在左边添加 0,无论符号位是什么
let a = 5; // 0101
console.log(a >>> 1); // 输出: 2 (0010)
console.log(a >>> 2); // 输出: 1 (0001)
let b = -5; // 11111111111111111111111111111011 (二进制补码表示)
console.log(b >>> 1); // 输出: 2147483645 (01111111111111111111111111111101)
条件(三元)运算符
条件运算符允许你在一个表达式中执行一个简单的条件判断,由三个部分组成,可以有条件地返回值。
语法
condition ? expr1 : expr2
其中:
- condition 是一个布尔表达式。
- expr1 是当 condition 为 true 时执行并返回的值。
- expr2 是当 condition 为 false 时执行并返回的值。
let age = 18;
let canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote); // 输出: Yes
赋值运算符
用于将值赋给变量。
- 简单赋值:
=
- 加赋值:
+=
- 减赋值:
-=
- 乘赋值:
*=
- 除赋值:
/=
- 取余赋值:
%=
- 左移赋值:
<<=
- 右移赋值:
>>=
- 无符号右移赋值:
>>>=
- 按位与赋值:
&=
- 按位异或赋值:
^=
- 按位或赋值:
|=
- 指数赋值:
**=
可选链运算符
可选链(Optional Chaining)运算符 ?.
是 ECMAScript 2020(也称为 ES11)标准的一部分。这个特性在 2020 年被正式添加到 ECMAScript 规范中,旨在提供一种更简洁、安全的方式来访问对象的深层属性、方法,以及调用函数,特别是在链中可能存在 null
或 undefined
的情况下。
它允许安全地访问对象深层嵌套的属性或方法,而不需要在每一层手动检查是否存在。如果在访问路径中的某处遇到了 null
或undefined
,表达式的评估会提前停止,并且整个表达式返回 undefined
,从而避免了运行时错误。
可选链与对象属性
假设你有一个嵌套的对象 person
,并希望访问 person.address.street
。如果 person
或 person.address
是 undefined
或 null
,直接访问person.address.street
将会抛出一个错误。使用可选链,你可以安全地进行访问:
const street = person?.address?.street;
如果 person
或 person.address
是 undefined
或 null
,street
的值将会是 undefined
,而不会抛出错误。
可选链与函数调用
可选链也可以用于安全地调用可能不存在的函数:
const result = someObject.someMethod?.();
如果 someMethod
存在并且是一个函数,那么它将被调用。如果 someObject
是 undefined
、null
或者 someMethod
不是一个函数,那么result
将会是 undefined
,而不会抛出错误。
可选链与数组
对于数组,可选链允许你安全地访问数组的元素:
const firstItem = arr?.[0];
这在处理可能未定义的数组时非常有用,可以避免额外的检查或捕获访问未定义数组时可能抛出的错误。
空值合并运算符
??
是空值合并(Nullish Coalescing)运算符,它是 ECMAScript 2020(ES11)标准的一部分。空值合并运算符允许开发者为可能是 null
或undefined
的表达式设置一个默认值,但它与逻辑或运算符 (||
) 不同,因为 ||
对任何 falsy
值(如 0
、''
、false
、null
、undefined
、和NaN
)都会使用其右侧的操作数,而 ??
仅对 null
或 undefined
使用其右侧的操作数。
使用场景
当你需要对某个值进行检查,以确定它是否为 null
或 undefined
,并在是的情况下提供一个默认值时,可以使用 ??
。例如:
const foo = null ?? 'default string';
console.log(foo);
// 输出:'default string'
const bar = 0 ?? 42;
console.log(bar);
// 输出:0
在这个例子中,foo
使用 ??
运算符检查其左侧的值是否为 null
或 undefined
。因为它是 null
,所以结果是右侧的 'default string'
。对于 bar
,尽管 0
是一个 falsy
值,但因为它不是 null
或 undefined
,??
运算符使得 bar
的结果为 0
,展示了它与 ||
运算符的不同之处。
删除运算符
delete
操作符用于删除对象的属性。其基本语法如下:
delete object.property;
示例
let obj = {
name: 'zhangsan',
age: 18,
sex: '男',
say: function () {
console.log('hello');
},
}
console.log(obj.age); // 输出:18
delete obj.age;
console.log(obj.age) // 输出:undefined
delete obj.name;
console.log(obj.name) // 输出:undefined
// 尝试删除非配置属性(比如原型链上的属性或用var、let、const声明的变量)不会成功,尽管delete操作符会返回true
let num = 1;
let str = "hello";
delete num;
delete str;
console.log(num); // 输出:1
console.log(str); // 输出:hello
展开运算符
展开运算符使用三个点...
表示。它可以用于数组和对象的展开(即打散)操作。
数组合并
展开运算符可以将一个数组展开为单独的元素,方便地进行数组合并。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]
数组拷贝
展开运算符可以用于数组的拷贝。
const arr = [1, 2, 3];
const copiedArray = [...arr];
console.log(copiedArray); // [1, 2, 3]
添加元素
展开运算符可以用于在数组中添加元素
const arr = [1, 2, 3];
const newArray = [0, ...arr, 4];
console.log(newArray); // [0, 1, 2, 3, 4]
对象合并
展开运算符可以用于对象的合并。
const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
const mergedObject = {...obj1, ...obj2};
console.log(mergedObject); // { a: 1, b: 2, c: 3, d: 4 }
对象拷贝
展开运算符可以用于对象的拷贝。
const obj = {a: 1, b: 2};
const copiedObject = {...obj};
console.log(copiedObject); // { a: 1, b: 2 }
添加或更新属性
展开运算符可以用于添加或更新对象的属性
const obj = {a: 1, b: 2};
const newObject = {...obj, c: 3, a: 4};
console.log(newObject); // { a: 4, b: 2, c: 3 }
函数参数展开
展开运算符可以用于将数组元素作为独立的参数传递给函数。
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6