最近找不到工作在家躺尸的我,这几天总结了一些东西,包括学到一些知识来给大家分享一波
常见的操作符
+=
加法赋值操作符 (+=) 将右操作数的值添加到变量,并将结果分配给该变量。两个操作数的类型确定加法赋值运算符的行为。加法或串联是可能的
let a = 2;
let b = 'haha';
console.log(a += 3);
// 结果 5
console.log(b += 'ha');
// 结果 "hahaha"
其实相当于a+=b 相当于 a=a+b
=
简单赋值操作符 (=) 用于为变量赋值。赋值表达式本身的值为要赋值的值。为了给多个变量赋一个值,可以链式使用赋值操作符。
x = 5 // 把5赋值给x
y = 10
z = 25
x = y // x 为 10
x = y = z // x, y 都为 25
&
按位与运算符 (&) 在两个操作数对应的二进位都为 1 时,该位的结果值才为 1,否则为 0。
const a = 5; // 二进制:00000000000000000000000000000101
const b = 3; // 二进制:00000000000000000000000000000011
console.log(a & b); // 二进制:00000000000000000000000000000001
// 结果 1
| a | b | a&b |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |
&=
按位与赋值运算符(&=)表示两个操作数的二进制,对它们进行按位 AND 运算并将结果分配给变量
let a = 5; // 二进制:00000000000000000000000000000101
a &= 3; // 二进制:00000000000000000000000000000011
console.log(a); // 二进制:00000000000000000000000000000001
// 结果: 1
~
按位非运算符(~),反转操作数的位。
const a = 5; // 二进制:00000000000000000000000000000101
const b = -3; // 二进制:11111111111111111111111111111101
console.log(~a); // 二进制:11111111111111111111111111111010
// expected output: -6
console.log(~b); // 二进制:00000000000000000000000000000010
// 结果 2
注意:操作数被转换为 32 位二进制表示(0 和 1)。超过 32 位的数字将丢弃其最高有效位
|
const a = 5; // 二进制:00000000000000000000000000000101
const b = 3; // 二进制:00000000000000000000000000000011
console.log(a | b); // 二进制:00000000000000000000000000000111
// 结果 7
其实上面就是二进制相比较同为0为0,同为1为1,其它都是1,然后得出二进制进行转换得到十进制数字7 | a | b | a|b | | --- | --- |---| | 0 | 0 | 0 | | 0 | 1 | 1 | | 1 | 0 | 1 | | 1 | 1 | 1 |
|=
按位或赋值运算符 ( |=) 使用两个操作数的二进制表示,对它们执行按位或运算并将结果分配给变量。
let a = 5; // 二进制:00000000000000000000000000000101
a |= 3; // 二进制:00000000000000000000000000000011
console.log(a); // 二进制:00000000000000000000000000000111
// 结果 7
相当于吧上面那个运算符获取的值进行赋值
^
const a = 5; // 二进制: 00000000000000000000000000000101
const b = 3; // 二进制: 00000000000000000000000000000011
console.log(a ^ b); // 二进制: 00000000000000000000000000000110
// 结果 6
这个和上面运算符有点相反,这里是比较,相同为1则是0,相同为0则是0其它都是1
| a | b | a^b |
|---|---|---|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |
^=
按位异或赋值操作符 (^=) 使用二进制表示操作数,进行一次按位异或操作并赋值。
let a = 5; // 00000000000000000000000000000101
a ^= 3; // 00000000000000000000000000000011
console.log(a); // 00000000000000000000000000000110
// expected output: 6
相当于a=(a^3),就是加了一步赋值操作
--
自减运算符 (--) 将它的操作数减一,然后返回操作数
分为前缀式和后缀式
let x = 3;
const y = x--; // 前缀式
console.log(`x:${x}, y:${y}`);
// 结果 "x:2, y:3"
let a = 3;
const b = --a; // 后缀式
console.log(`a:${a}, b:${b}`);
// 结果 "a:2, b:2"
注意 前缀式会先进行减法运行然后返回值,后缀式则是返回值在进行减法运算
==
等于运算符(==)检查其两变是否相等,并返回Boolean结果。不会检查其类型
console.log(1 == 1);
// 结果 true
console.log('hello' == 'hello');
// 结果 true
console.log('1' == 1);
// 结果 true
console.log(0 == false);
// 结果 true
===
全等运算符会检查两边是否相等,并返回Boolean结果。但是会检查其类型也必须相等
console.log(1 === 1);
// 结果 true
console.log('hello' === 'hello');
// 结果 true
console.log('1' === 1);
// 结果 false
console.log(0 === false);
// 结果 false
**
求幂运算符,默认现执行后面
console.log(3 ** 4);
// 结果 81
console.log(10 ** -2);
// 结果 0.01
console.log(2 ** 3 ** 2); // 等于(2**(3**2))先算后面
// 结果 512
console.log((2 ** 3) ** 2);
// 结果 64
!=和!==
不等于运算符和不全等运算符,检查两边是否不相等于==和===相反
console.log(1 != 1);
// 结果 false
console.log('hello' != 'hello');
// 结果 false
console.log('1' != 1);
// 结果 false
console.log(0 != false);
// 结果: false
console.log('1' !== 1);
// 结果 true
console.log(1 !== 1);
// 结果: false
|| 和 &&
或运算符和且运算符
const a = 3;
const b = -2;
console.log(a > 0 || b > 0);
// 结果 true
console.log(a > 0 && b > 0);
// 结果 false
注意:||运算符如果左边代码为true则不会去判断右边代码,&&运算符如果左边为false则不会执行右边代码。我们称为短路运算符
??和??=
??空值合并操作符??=逻辑空赋值运算符,空值合并操作符:顾名思义只有为空值(null或者undefined)时返回右侧操作结果。逻辑空赋值运算符:只有为空值(null或者undefined)才会进行赋值
const num = null ?? 20
console.log(num);
// 结果 20
const number = 0 ?? 20
console.log(num);
// 结果 0
const a = { name: jack };
a.name ??= rose;
console.log(a.name);
// 结果 jack
a.speed ??= 25;
console.log(a.speed);
// expected output: 25
?.
可选链操作符 ?. 允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空 (null) 或者 (undefined)的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
常用来防止undefined.xxx不存在的报错情况
const obj = {
name: jeck,
sister: {
name: rose
}
}
const dogName = obj.dog?.name
console.log(dogName); // undefined
console.log(obj.sister?.name); // rose
通过连接的对象的引用或函数可能是 undefined 或 null 时,可选链操作符提供了一种方法来简化被连接对象的值访问
...
展开运算符,通常用来展开数组或者对象
// 数组展开
const arr = [1, 2, 3, 4]
console.log([...arr, 5, 6]) // [1,2,3,4,5,6]
// 对象展开
const obj = { name: '小米', age: 14 }
console.log({ ...obj, height: 180 }) // {name: '小米', age: 14,height: 180}
可以用来进行克隆或者属性拷贝
总结
以上就是我们工作中基本上会遇见的一些操作符,希望能给大家带来帮助
相关文档MDN