[TOC] >[success] # 比較兩個數組 ~~~ 1.有時候我們想比較a,b兩個數組中元素是否相同，因為數組是引用類型，因此不是按值進行比較，舉個例子 說明 const a = [1, 2, 3]; const b = [1, 2, 3]; a === b; // false ~~~ [原文javascript-array-comparison](https://www.30secondsofcode.org/blog/s/javascript-array-comparison) >[info] ## toString 和 join ~~~ 1.再簡單的兩個數組比較的時候可以常使用'toString 和 join',這種方式不推薦 2.toString 和 join 使用產生情況是相同的下面代碼以join為例 ~~~ >[danger] ##### 簡單數組類型使用 ~~~ 1.下面案例中滿足比較的兩個數組，他們的特點數組中每一項是常量，這一類型的數組通過轉換成字符串 在進行比較 ~~~ ~~~ const {log} = console const equals = (a,b) => a.join() === b.join() const simpleLs = [1,2,3,'w'] const simpleLs1 = [1,2,3,'w'] log(equals(simpleLs,simpleLs1)) // true ~~~ >[danger] ##### 這種比較的弊端 ~~~ 1.使用'toString 和 join' 這種形式問題會很多 舉幾個例子'數組中的值非常量'、'數組中的值有null或undefined' 這些都會讓我們得到的結果出現問題 2.下面案例打印的值都應該為false ,但是操作結果為true ~~~ * 得到的結果和預期不符 ~~~ const {log} = console const equals = (a,b) => a.join() === b.join() // 產生錯誤 const ls = [1,2,3,[5,6,[7]]] const ls1 = [1,2,3,5,6,7] log(equals(ls,ls1)) // true const lsObj = [{name:'20'}] const lsObj1 = [{name:'190'}] log(equals(lsObj,lsObj1)) // true const lsempty = [null] const lsempty1 = [undefined] log(equals(lsempty,lsempty1))// true const type = [new String('a')] const type1 = ['a'] log(equals(type,type1))// true ~~~ >[info] ## JSON.stringify ~~~ 1.JSON.stringify()，它允許我們序列化每個數組，然后比較兩個序列化的字符串,雖然這種寫法能解決 使用'toString 和 join' 這種寫法的大部分問題，但是也是有弊端 ~~~ >[danger] ##### 使用 ~~~ 1.下面案例可以解決'toString 和 join' ,對于嵌套和對象這種項產生的問題 ~~~ ~~~ const {log} = console const equals = (a,b) => JSON.stringify(a) === JSON.stringify(b) // 產生錯誤 const ls = [1,2,3,[5,6,[7]]] const ls1 = [1,2,3,5,6,7] log(equals(ls,ls1)) // false const lsObj = [{name:'20'}] const lsObj1 = [{name:'190'}] log(equals(lsObj,lsObj1)) // false ~~~ >[danger] ##### 弊端 ~~~ 1.JSON.stringify()，雖然可以幫助解決大部分場景的兩個數組值的比較但是也有相對問題依舊是null 和 undefined，和通過對象創建常量和常量比較情況 ~~~ ~~~ const {log} = console const equals = (a,b) => JSON.stringify(a) === JSON.stringify(b) // 產生錯誤 const lsempty = [null] const lsempty1 = [undefined] log(equals(lsempty,lsempty1))// true const str = 'a'; const strObj = new String('a'); str === strObj; // false equals([str], [strObj]); // true, should be false ~~~ >[info] ## 通過every 和 length ~~~ 1.可以利用length 先判數組長度是否一致作為優先判斷兩個數組是否相同條件 2.在使用every 判斷A數組中每一項 是否和B數組中對應項相等，來決定是否兩個數組一致 ~~~ >[danger] ##### 代碼實現 ~~~ 1.但是產生問題沒有考慮嵌套數組或對象，需要對它們進行遞歸檢查 ~~~ ~~~ const equals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]); const a = [1, 2, 3]; const b = [1, 2, 3]; const str = 'a'; const strObj = new String('a'); equals(a, b); // true equals([str], [strObj]); // false equals([null], [undefined]); // false ~~~ >[danger] ##### 解決遞歸問題 [代碼來源equals](https://www.30secondsofcode.org/js/s/equals) ~~~ const equals = (a, b) => { if (a === b) return true; if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime(); if (!a || !b || (typeof a !== 'object' && typeof b !== 'object')) return a === b; if (a.prototype !== b.prototype) return false; let keys = Object.keys(a); if (keys.length !== Object.keys(b).length) return false; return keys.every(k => equals(a[k], b[k])); }; 例子 equals( { a: [2, { e: 3 }], b: [4], c: 'foo' }, { a: [2, { e: 3 }], b: [4], c: 'foo' } ); // true equals([1, 2, 3], { 0: 1, 1: 2, 2: 3 }); // true ~~~ >[info] ## 只關心內容的比較 ~~~ 1.有時候我們不關心順序是否一致更多關系兩個數組中值是否相同，例如 [1,3,2] 和 [3,2,1] 判斷為true 每個數組中元素的順序并不重要，我們只關心兩個數組中存在的相同值 ~~~ [have-same-contents](https://www.30secondsofcode.org/js/s/have-same-contents) ~~~ const haveSameContents = (a, b) => { for (const v of new Set([...a, ...b])) if (a.filter(e => e === v).length !== b.filter(e => e === v).length) return false; return true; }; haveSameContents([1, 2, 4], [2, 4, 1]); // true ~~~