[TOC] >[success] # 30s Array --過濾篇章(二) ~~~ 1.本章節代碼通過整理30s 項目中數組篇章知識點，對涉及數組根據某些條件進行過濾知識點進行整理 ~~~ >[info] ## 找到某個元素在對應的索引位置 ~~~ 1.現在有一個數組[1, 2, 3, 1, 2, 3]想找到所有元素為1的腳標，得到 [0, 3] ~~~ [原文](https://www.30secondsofcode.org/js/s/index-of-all) >[danger] ##### 30s ~~~ const {log} =console const indexOfAll = (arr,value) => arr.reduce((acc,curr,i) =>( curr === value ? [...acc, i] : acc ),[]) log( indexOfAll([1, 2, 3, 1, 2, 3], 1)) // [0, 3] log(indexOfAll([1, 2, 3], 4)) // [] ~~~ >[info] ## 返回數組中的最大元素 最小元素 ~~~ 1.返回數組中指定的n項，最大 最小元素 ~~~ [max-n](https://www.30secondsofcode.org/js/s/max-n) [min-n](https://www.30secondsofcode.org/js/s/min-n) >[danger] ##### 30s 最大元素 ~~~ 1.在sort前進行一次淺copy，因為sort 會改變原數組，因此注意這個小技巧 ~~~ ~~~ const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n); maxN([1, 2, 3]); // [3] maxN([1, 2, 3], 2); // [3, 2] ~~~ >[danger] ##### 30s 最小元素 ~~~ 1.在sort前進行一次淺copy，因為sort 會改變原數組，因此注意這個小技巧 ~~~ ~~~ const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n); minN([1, 2, 3]); // [1] minN([1, 2, 3], 2); // [1, 2] ~~~ >[info] ## 返回數組中的中位數 ~~~ 1.長度是奇數，則返回中間的數字，否則返回兩個中間數字的平均值 ~~~ [median](https://www.30secondsofcode.org/js/s/median) >[danger] ##### 30s ~~~ const median = arr => { const mid = Math.floor(arr.length / 2), nums = [...arr].sort((a, b) => a - b); return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2; }; median([5, 6, 50, 1, -5]); // 5 ~~~ >[info] ## 找到數組中出現頻率最高的值 ~~~ 1.現在想統計一個數組中，出現最高頻率的值，例如['a','b','a','c','a'] ,出現頻率最高的'a' ~~~ [原鏈接](https://www.30secondsofcode.org/js/s/most-frequent) >[danger] ##### 30s ~~~ 1.結局思路先將數據結構變成對象，統計出某個值的出現頻率'{ a: 3, b: 1, c: 1 }' 2."[ [ 'a', 3 ], [ 'b', 1 ], [ 'c', 1 ] ]"在當前值和之前值做比較看出現頻率大小，采用reduce ~~~ ~~~ const {log} =console const mostFrequest = (arr)=> Object.entries( arr.reduce((acc,cur)=>{ acc[cur] = acc[cur]? acc[cur]+1 : 1 return acc },{}) ).reduce((a,v)=>(v[1]>=a[1]?v:a),[null,0]) log(mostFrequest(['a','b','a','c','a'])) ~~~ >[info] ## 根據條件過濾對象數組并且濾掉未指定的鍵 ~~~ 1.現在有個場景已知一個對象數組，現在想做的是根據某些條件獲取對象數組中指定的的key形成的新的 對象數組，舉個例子： [ { id: 1, name: 'john', age: 24 }, { id: 2, name: 'mike', age: 50 } ]; 現在要做的是，過濾出年齡大于24 并且只帶有id 和name的數組對象 ~~~ [reduced-filter](https://www.30secondsofcode.org/js/s/reduced-filter) >[danger] ##### 30s ~~~ 1.先分析需要做什么，需要過濾 使用的api -- 'filter'，需要生成新的和之前內部結構不同的數組--'map' 2.現在可以確定好的兩個api，下一步就是'map'中獲取返回值的代碼怎么去寫,拋開for循環的形式， 數組中還有那個api可以做返回指定類型格式api -- 'reduce' ~~~ ~~~ const {log} = console const reducedFilter = (data, keys, fn) => // 先過濾 data.filter(fn).map(el => // 在用reduce 重組返回 map需要的 return 返回值 keys.reduce((acc, key) => { acc[key] = el[key]; return acc; }, {}) ); const data = [ { id: 1, name: 'john', age: 24 }, { id: 2, name: 'mike', age: 50 } ]; log( reducedFilter(data, ['id', 'name'], item => item.age > 24)) ~~~ >[info] ## 返回指定規則中數組最大值或者最小值 ~~~ 1.返回指定規則中數組最大值或者最小值 ~~~ [reduce-which](https://www.30secondsofcode.org/js/s/reduce-which) >[danger] ##### 30s ~~~ 1.思維轉換以前都是通過指定一個默認最大值或者最小值在一次比較，現在有了'reduce'它具備獲取 當前值和上一次值的能力 ~~~ ~~~ const {log} = console const reduceWhich = (arr, comparator = (a, b) => a - b) => arr.reduce((a, b) => (comparator(a, b) >= 0 ? b : a)); reduceWhich([1, 3, 2]); // 1 reduceWhich([1, 3, 2], (a, b) => b - a); // 3 reduceWhich( [ { name: 'Tom', age: 12 }, { name: 'Jack', age: 18 }, { name: 'Lucy', age: 9 } ], (a, b) => a.age - b.age ); // {name: 'Lucy', age: 9} ~~~ >[info] ## 指定條件過濾數組 ~~~ 1.按照指定條件過濾數組 ~~~ [remove](https://www.30secondsofcode.org/js/s/remove) >[danger] ##### 30s ~~~ 1.正常數組過濾用filter，但是這個 是想既有返回值又可以將原數組改變 ~~~ ~~~ const {log} = console const remove = (arr, func) => Array.isArray(arr) ? arr.filter(func).reduce((acc, val) => { arr.splice(arr.indexOf(val), 1); return acc.concat(val); }, []) : []; const t = [1, 2, 3, 4] log(remove(t, n => n % 2 === 0) ) // [ 2, 4 ] log(t) // [ 1, 3 ] ~~~ >[info] ## 過濾數組對象中指定key返回的val ~~~ 1.現在有個需求想將數組對象中指定key的val 獲取 [ { name: 'lisa', age: 8 }, { name: 'homer', age: 36 }, { name: 'marge', age: 34 }, { name: 'bart', age: 10 } ] 想取出key 為 age 的val 得到的效果[8, 36, 34, 10] ~~~ [pluck](https://www.30secondsofcode.org/js/s/pluck) >[danger] ##### 30s ~~~ const pluck = (arr, key) => arr.map(i => i[key]); const simpsons = [ { name: 'lisa', age: 8 }, { name: 'homer', age: 36 }, { name: 'marge', age: 34 }, { name: 'bart', age: 10 } ]; pluck(simpsons, 'age'); // [8, 36, 34, 10] ~~~ >[info] ## 兩個數組之間相互差值 ~~~ 1.之前都是只找,A對B 或者B對A的單向差值，現在想做找到A,B互相整體差值舉個例子 [1, 2, 2], [1, 3, 1] =》[2, 2, 3] ~~~ [symmetric-difference](https://www.30secondsofcode.org/js/s/symmetric-difference) >[danger] ##### 30s ~~~ 1.利用set 和 filter 兩個api 進行過濾查找 ~~~ ~~~ const symmetricDifference = (a, b) => { const sA = new Set(a), sB = new Set(b); return [...a.filter(x => !sB.has(x)), ...b.filter(x => !sA.has(x))]; }; symmetricDifference([1, 2, 3], [1, 2, 4]); // [3, 4] symmetricDifference([1, 2, 2], [1, 3, 1]); // [2, 2, 3] ~~~ >[danger] ##### 這一個系列 [unique-symmetric-difference](https://www.30secondsofcode.org/js/s/unique-symmetric-difference) [symmetric-difference](https://www.30secondsofcode.org/js/s/symmetric-difference) [symmetric-difference-by](https://www.30secondsofcode.org/js/s/symmetric-difference-by) [symmetric-difference-with](https://www.30secondsofcode.org/js/s/symmetric-difference-with) >[danger] ##### 不做過多說明系列直接去30s看 [union-by](https://www.30secondsofcode.org/js/s/union-by) [unique-elements-by-right](https://www.30secondsofcode.org/js/s/unique-elements-by-right)