[TOC] >[success] # 30s Array--比較篇(一) ~~~ 1.本章節代碼通過整理30s 項目中數組篇章知識點，對涉及數組比較邏輯代碼知識點進行整理 ~~~ [整理內容來自30s 數組篇章](https://www.30secondsofcode.org/js/s/is-disjoint) >[info] ## 檢查兩數組是否有交集返回交集內容 ~~~ 1.兩個數組取交集 ~~~ >[danger] ##### 30s ~~~ const {log} = console const intersection = (a, b) => { const s = new Set(b); return [...new Set(a)].filter(x => s.has(x)); } log(intersection([1, 2, 3], [4, 3, 2])) // [2, 3] ~~~ >[info] ## 檢查對象數組指key交集 ~~~ 1.現在有兩個數組 [{ title: 'Apple' }, { title: 'Orange' }] ， [{ title: 'Orange' }, { title: 'Melon' }]， 得到title 字段的交集 [ { title: 'Orange' } ] ~~~ [intersection-by](https://www.30secondsofcode.org/js/s/intersection-by) >[danger] ##### 30s ~~~ 1.先通過map過濾出數組中指定字段形成一個value 集合的數組 2.在通過filter 進行過濾 ~~~ ~~~ const {log} = console const intersectionBy = (a, b, fn) => { const s = new Set(b.map(fn)); return [...new Set(a)].filter(x => s.has(fn(x))); }; log( intersectionBy( [{ title: 'Apple' }, { title: 'Orange' }], [{ title: 'Orange' }, { title: 'Melon' }], x => x.title )) // [ { title: 'Orange' } ] log(intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor)); // [2.1] ~~~ >[info] ## 提供比較器函數返回兩個數組中都存在的元素 ~~~ 1.提供比較器函數返回兩個數組中都存在的元素 ~~~ [intersection-with](https://www.30secondsofcode.org/js/s/intersection-with) >[danger] ##### 30s ~~~ 1.下面代碼要拆開看 b.findIndex(y => comp(x, y)) 是一部分 ~~~ ~~~ const intersectionWith = (a, b, comp) => a.filter(x => b.findIndex(y => comp(x, y)) !== -1); intersectionWith( [1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b) ); // [1.5, 3, 0] ~~~ >[info] ## 檢查兩個可迭代對象是否是交集關系-- 返回boolean ~~~ 1.需求有兩個數組，如果兩個數組中的每一項沒有相同的返回true 否則返回false，舉個例子 a = [1,2,3] 、b = [4,5,6] a和b 沒有相同內容因此返回true ~~~ [is-disjoint](https://www.30secondsofcode.org/js/s/is-disjoint) >[danger] ##### 代碼案例 ~~~ 1.是否沒有交集 ，就是一個可迭代的數據都不在另外一個可迭代數據中 2.思路將內容去重，減少比較，利用數組方法'every' 方法,'every' 本質是每一個相等，如果取這個api就能 實現每一個不相等，配合'set'has 方法即可實現當前需求 ~~~ ~~~ // 為什么沒有用includes 原因是比較可迭代對象includes 是數組方法，所有的可迭代對象對 // 可以作為set初始化構造函數的參數，這樣所有的可迭代對象間接都獲得了set 的has方法 // const isDisjoint = (a,b)=> a.every(item => !b.includes(item)) // 檢查兩個迭代對象不存在交集 const isDisjoint = (a, b) =>{ const sA = new Set(a), sB = new Set(b) return [...sA].every(v=>!sB.has(v)) } // ---------------案例一------------------ const a = [1,2] const b = [3,4] // a 和 b 是否沒交集 let flag = isDisjoint(a,b) // true console.log(flag) // ---------------案例二------------------ const c = [1,2] const d = [1,4] // c he d 是否沒有交集 flag = isDisjoint(c,d) // false console.log(flag) ~~~ >[info] ## 是否是交集關系-- 返回boolean ~~~ 1.現在想判斷兩數組中是否存在交集，返回true 和 false ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/includes-any) >[danger] ##### 代碼案例 ~~~ 1.利用some 和 includes 兩個api 配合實現 ~~~ ~~~ const {log} =console const includesAny = (arr, values) => values.some(v => arr.includes(v)) log(includesAny([1,2,3,4],[2,9])) // true log(includesAny([1,2,3,4],[8,9])) // false ~~~ >[info] ## 檢測一個元素是否包含在第二個元素 ~~~ 1.第一個數組中每一項是否包含在第二個數組中，舉個例子[1, 4, 4], [2, 4, 1] 為false，因為第一個數組中 4這一項存在兩個，[1, 4], [2, 4, 1] true ，第一個的數組中1，4全部都包含在 第二個數組中2，4，1 ~~~ [is-contained-in](https://www.30secondsofcode.org/js/s/is-contained-in) >[danger] ##### 30s ~~~ 1.第一個數組是否包含在第二個數組隱藏兩個條件 1.1.要滿足第一數組每一項的值是否在第二個數組中 1.2.第一個數組和第二個數組相同的項，只能第二個數組相同項的個數大于等于第一個數組對應的項 否則出現第一個不第二個多第二個就沒有全部包含的問題 ~~~ ~~~ const {log} = console const isContainedIn = (a, b) => { for (const v of new Set(a)) { if ( !b.some(e => e === v) || a.filter(e => e === v).length > b.filter(e => e === v).length ) return false; } return true; }; log(isContainedIn([1, 4, 4], [2, 4, 1]) ) // false log(isContainedIn([1, 4], [2, 4, 1]) ) // true ~~~ >[info] ## 數組的每一項是否相等 ~~~ 1.現在有個需求，要求查數組中每一項是否相等 ~~~ [文章原鏈接](https://www.30secondsofcode.org/js/s/all-equal) >[danger] ##### 代碼實現 ~~~ 1.邏輯思維就是只要有一個不相等就說明數組中不是每一項都相等，因此每一項和第一項做比較即可, 數組的every 方法是每一項都符合條件則返回true 或 false，利用這個api來解決問題 ~~~ ~~~ const allEqual = (arr)=>arr.every(val=>val === arr[0]) let flag = allEqual([1,1,1,1,1]) console.log(flag) // true flag = allEqual([1,1,2,4,5,6]) console.log(flag) // false ~~~ >[info] ## 檢測兩數組包含的元素是否相同 ~~~ 1. 檢測兩數組包含的元素是否相同，不關心兩數組中元素的順序 ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/have-same-contents) >[danger] ##### 30s ~~~ 1.解決思路判斷同一個值在兩個數組中出現的頻率是否一致，如果都一致那么存在的元素都一樣 2.使用filter 來判斷同一個元素在，兩個數組中出現的頻率是否相同，如果每個元素出現的評率相同說明 兩個元素內容相同 ~~~ ~~~ const {log} =console 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; }; log(haveSameContents([1, 2, 4], [2, 4, 5,1])) // false ~~~ >[info] ## 兩個數組的差集 ~~~ 1.現在知道兩個數組，相求兩個數組的差集，例如[1,2,3] 和 [1,2,4] 的差集輸出應該為 [3] 2.不過濾重復值 ~~~ >[danger] ##### 代碼實現 [原文鏈接](https://www.30secondsofcode.org/js/s/difference) ~~~ const {log} =console const difference = (a, b) => { const s = new Set(b) return a.filter(x=>!s.has(x)) }; log(difference([1, 2, 3], [1, 2, 4])) // 3 ~~~ >[info] ## 兩個數組的差集 ~~~ 1.已知兩個數組，取對應數組對另一個數組的差集，例如數組"a" [1,2,3,4] 和數組"b"[1,2,3,6,7]， 獲取a 對 b的差集，得到'[4]' ~~~ [原文difference-with](https://www.30secondsofcode.org/js/s/difference-with) >[danger] ##### 30s案例思考 ~~~ 1.利用回調函數的思想解決問題，將這種未知的條件，通過回調函數的方式，讓使用者去自行解決 2.先分析這類問題的本質，是找一個數組中的元素和另一個數組中元素的差集，整個過程涉及下面 分別使用 'fittler' 和'findIndex' 兩個api 3.com 回調函數是來決定'findIndex' 查找值過濾條件，沒有使用find 原因如果本身內部是undefined，此時 分不清是查詢回來的 還是不存在的 ~~~ ~~~ // 下面案例中'val.findIndex((b)=>com(a,b)) ' 是一個整體 // val.findIndex((b)=>com(a,b)) ===-1 作為的是fittler的過濾條件 const differenceWith = (arr,val,com= (a,b)=>a===b) => arr.filter(a=>val.findIndex((b)=>com(a,b)) ===-1) log(differenceWith( [1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b) )) // [1, 1.2] log(differenceWith([1, 1.2, 1.3], [1, 1.3, 1.5])) // [1.2] ~~~ >[info] ## 兩個數組的差集 ~~~ 1.和上面兩個數組差集不同，這里我們更希望得到的是，根據條件查詢更改后的值，例如 數組 a [2.1, 1.2],數組 b [2.3, 3.4]想獲取的是他們每個元素 Math.floor 之后的差集 a 對b 向下取整的 差集 1 ~~~ >[danger] ##### 案例 [源碼鏈接](https://www.30secondsofcode.org/js/s/difference-by) ~~~ 1.利用回調函數的思想解決問題，將這種未知的條件，通過回調函數的方式，讓使用者去自行解決 2.利用map 的特性配合用戶自己定義的方法，生成一個扁平化的數組，進行使用之前上面邏輯思維來解決 這類問題 注：先轉換成需要的 格式，用轉換后的格式做差集 ~~~ ~~~ const {log} =console const differenceBy = (a, b, fn) => { const s = new Set(b.map(fn)); return a.map(fn).filter(el => !s.has(el)); }; log( differenceBy([2.1, 1.2,1.2], [2.1, 3.4], i=>i)) // [ 1.2, 1.2 ] log(differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor)) // [1] log(differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x)) // [2] ~~~