一篇文章教会你工作中遇到的操作符

241 阅读7分钟

最近找不到工作在家躺尸的我,这几天总结了一些东西,包括学到一些知识来给大家分享一波

常见的操作符

+=

加法赋值操作符 (+=) 将右操作数的值添加到变量,并将结果分配给该变量。两个操作数的类型确定加法赋值运算符的行为。加法或串联是可能的

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

aba&b
000
010
100
111

&=

按位与赋值运算符(&=)表示两个操作数的二进制,对它们进行按位 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

aba^b
000
011
101
110

^=

按位异或赋值操作符 (^=) 使用二进制表示操作数,进行一次按位异或操作并赋值。

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