前端也要会【异或运算】

前言

在前端的日常开发当中，我们很少用到异或运算，但在一些框架源码当中，会有用到异或运算。我们在阅读源码的时候，会造成代码的不理解，今天我们介绍一下异或运算。

概念

异或，英文为exclusive OR，缩写成eor.

异或（eor）是一个数学运算符。它应用于逻辑运算。异或的数学符号为“⊕”，计算机符号为“eor”。其运算法则为：

运算规律

相同为0，不同为1

举例说明：有两个二进制数，分别为a和b，他们两个异或计算。

一个值于0异或，都是这个数

a ^ 0 = a

任何数跟自己异或，都为0

a ^ a = 0

满足交换律和结合律

交换异或

a ^ b = b ^ a;

结合异或

(a ^ b) ^ c = a ^ (b ^ c)

我们通过这些规则，在一些实际场景可以用到异或运算

案例

两值交换（不借助变量）

let a = 5;
let b = 10;
// 值交换
a = a ^ b;
b = a ^ b;
a = a ^ b;

console.log('a=>', a)
console.log('b=>', b)

通过上边的代码执行，我们可以看到两个数做了交换，我们来简单分析下过程

a = a ^ b;  // 代码执行

此时： a = a ^ b; b = 10;

b = a ^ b;  // 代码执行

此时：b = a ^ b ^ b。

根据上边的规律，【任何数跟自己异或为0】得到: b = a ^ 0

根据规律，进而得到 b = a。

a = a ^ b; // 代码执行

此时：a = (a ^ b) ^ (a ^ b ^ b)。

根据上边的规律，得到：a= (a ^ a) ^ (b ^ b) ^ b

根据规律，进而得到：a = b

简单加解密

我们有明文text,秘钥key,进行异或运算得到密文cipher

加密

const cipher = text ^ key;

解密

const text = cipher ^ key;

原理如下：

const cipher = text ^ key;
const text = (text ^ key) ^ key;

算法题

有一个数组，只有一种数出现了奇数次，其它所有树出现了偶数次，怎么找出出现奇数次的这个数？

例：

const a = [2,3,4,5,6,5,5,6,4,3,2];

// 输出奇数
number = 5;

我们通过异或运算，代码如下

const arr = [2,3,4,5,6,5,5,6,4,3,2];
let number = arr[0];
for (var i = 1; i < arr.length; i ++) {
    number = number ^ arr[i]
}

console.log('number=>', number);

原理

我们把数组中的每个数都进行异或运算，就会得出奇数次出现的那个数。假设不同的数用变量表示，得到如下公式

a = 2;
b = 3;
c = 4;
d = 5;
e = 6;

// 得到
a ^ b ^ c ^ d ^ e ^ d ^ d ^ e ^ c ^ b ^ a;
// 进一步处理得到
a ^ a ^ b ^ b ^ c ^c ^ d ^ d ^ e ^ e ^ d
// 输出 d

结束语

以上内容就是异或运算，之后我们在看到这类问题，就不在畏惧了。

如果你觉得该文章不错，不妨

1、点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）

2、关注我，让我们成为长期关系

3、关注公众号「前端有话说」，里面已有多篇原创文章，和开发工具，欢迎各位的关注，第一时间阅读我的文章