前端也要會【異或運算】

前言

在前端的日常開發當中，我們很少用到異或運算，但在一些框架源碼當中，會有用到異或運算。我們在閱讀源碼的時候，會造成代碼的不理解，今天我們介紹一下異或運算。

概念

異或，英文爲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、關注公衆號「前端有話說」，裏面已有多篇原創文章，和開發工具，歡迎各位的關注，第一時間閱讀我的文章