JS 判斷兩個數組是否相等，元素以及順序相等，順序不同但元素相等

壹 ❀ 引

在日常開發中，判斷兩個數組是否相等應該是較為常見的場景，因為常用，所以想着簡單記錄下。關於判斷數組相等，這里我分為兩種場景，第一種是數組完全相等，即數組元素相同且元素順序一致；第二則為元素相同但順序不同，我會分開討論。

注意，這里不討論數組元素是函數，正則等特殊情況，因為實際開發中也很難遇到這樣的場景。但如果需要對比的數組是多維數組，可以考慮利用flat進行降維再使用如下方法，OK，本文開始。

貳 ❀ 數組完全相等

如果數組元素只是字符串，數字，布爾值這些類型，可以考慮使用JSON.stringify或者join('')的做法，目的就是轉為字符串，直接判斷字符串是否相等，比如：

// 基於join解決基本判斷
const isArrEqual = (arr1, arr2) => {
    return arr1.join("") === arr2.join("");
};
isArrEqual([1, 2, 3], [1, 2, 3]);// true
isArrEqual([1, '', 'b', false], [1, '', 'b', false]);// true
isArrEqual([1], [1, 2]);// false

// 基於JSON.stringify解決基本判斷
const isArrEqual = (arr1, arr2) => {
    return JSON.stringify(arr1) === JSON.stringify(arr2);
};
isArrEqual([1, 2, 3], [1, 2, 3]);// true
isArrEqual([1, '', 'b', false], [1, '', 'b', false]);// true
isArrEqual([1], [1, 2]);// false

但上述兩種做法，都無法對比數組中包含undefined，null的情況，比如如下對比就暴露了問題：

[undefined, 1, null, false].join("") === ['', 1, null, false].join("");// true

這是因為對於join而言，undefined與null都會 被轉為空字符串，所以上述代碼左右兩邊得到的都是'1flase'，因此相等。

而對於JSON.stringify而言同樣會存在這樣的問題，比如如下例子：

JSON.stringify([undefined, 1, NaN]) === JSON.stringify([null, 1, null]);// true

這是因為對於JSON.stringify而言，undefined和NaN都會被轉為null，這才導致上述代碼相等。

因此考慮基本數據類型以及NaN，其實可以這么實現它：

const isArrEqual = (arr1, arr2) => {
    return arr1.length === arr2.length && arr1.every((ele, index) => Object.is(ele, arr2[index]));
};
isArrEqual([1, 'b', false, undefined, null, NaN], [1, 'b', false, undefined, null, NaN]);// true

這里利用了Object.is方法，它接受兩個參數，用於核對這兩個參數是否相等，即便是NaN它也能有效判斷。

叄 ❀ 元素相同順序不同

在實際開發中，會有這樣一個場景，需要我們認定兩個元素相同但順序不同的數組為相同數組，比如數組[A,B]與[B,A]是相同數組。

比如一個功能設置模塊，默認就勾選了[A,B]兩個選項，下方會有一個更新按鈕，只有用戶修改了設置才會將更新按鈕變為可點擊狀態，畢竟設置沒改，就沒更新的必要。

那么現在我將這兩個選項清空，隨后勾選B，再勾選A，很明顯，這個數據層保存的數據為[B,A]，但對於用戶而言，我並未修改任何設置，此時按鈕其實就沒必要展示為可點擊狀態，因此我們需要認定[A,B]與[B,A]為相同值。

考慮到實際場景中對於值的唯一性維護，因此數組中理論上不會存在相同的值，因此我們可以這么實現：

const isArrEqual = (arr1, arr2) => {
    return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
};
isArrEqual([1, 'b', false, undefined, null, NaN], [1, null, 'b', undefined, false, NaN]);// true

注意，上述實現是考慮到特殊場景不會讓數組有重復項，因此可以這么實現，但如果數組有重復元素上述實現就不可行，比如這個例子就不OK：

isArrEqual([1, 1], [1, null]);// true

針對這種情況還是得考慮將兩個數組進行排序，再按數組完全相等的思路對每一位進行對比。

另外，關於JSON.stringify其實還有其它妙用，可參考博主這篇文章，json.stringify()的妙用，json.stringify()與json.parse()的區別。

NaN是JS中唯一一個與自身不相等的存在，如何判斷一個值是否等於NaN？window.isNaN與Number.isNaN又有什么區別？有興趣可以閱讀博主這篇文章js中的NaN，isNaN與Number.isNaN的區別，如何判斷一個值嚴格等於NaN

那么本文到這里結束。