[TOC] >[success] # 30s Array -- 分組篇(一) ~~~ 1.本章節代碼通過整理30s 項目中數組篇章知識點，對涉及數組分組代碼片段整理 ~~~ >[info] ## 數組中的元素按照指定規則分組 ~~~ 1.有一組數據，需要按照提條件分成兩組 ~~~ >[danger] ##### 代碼說明 ~~~ 1.設計思路用回調函數做條件，用'reduce' 高階函數來定義使用保存的數據格式，根據回調條件true false 來決定 ~~~ [bifurcate-by](https://www.30secondsofcode.org/js/s/bifurcate-by) ~~~ const {log} =console const bifurcateBy = (arr, fn) => arr.reduce((acc, val, i) => (acc[fn(val) ? 0 : 1].push(val), acc), [[], []]); log(bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b')) // [ [ 'beep', 'boop', 'bar' ], [ 'foo' ] ] ~~~ >[info] ## 數組內容按照每組規定數量分組 ~~~ 1.將[1,2,3,4,5,6,7,8,9] 數組中的內容以每兩項為一組分割成一個二維數組表現形式 [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9 ] ] ~~~ >[danger] ##### 代碼實現 [原文鏈接](https://www.30secondsofcode.org/js/s/chunk) ~~~ const {log} =console const chunk = (arr,size)=> Array.from({length:Math.ceil(arr.length/size)},(v,i)=>arr.slice(i * size, i * size + size)) log(chunk([1,2,3,4,5,6,7,8,9],2)) // [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9 ] ] ~~~ >[info] ## 將數組內容規定分組分割 ~~~ 1.上面的案例是規定了每個小組中的數據進行分割，這個案例是將數據分割成固定組 ~~~ >[danger] ##### 代碼實現 [chunk-into-n](https://www.30secondsofcode.org/js/s/chunk-into-n) ~~~ const {log} =console const chunkIntoN=(arr,n)=>{ const size = Math.ceil(arr.length/n) return Array.from({length:n},(v,i)=>arr.slice(i*size,i*size+size)) } log(chunkIntoN([1, 2, 3, 4, 5, 6, 7], 4)) // [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7 ] ] ~~~ >[info] ## 根據給定的函數對數組的元素進行分組，并返回每個組中元素的計數 ~~~ 1.根據給定的函數對數組的元素進行分組，并返回每個組中元素的計數,例如數組 [{ count: 5 }, { count: 10 }, { count: 5 }] 統計成 {5: 2, 10: 1} ~~~ >[danger] ##### 案例 ~~~ const {log} =console const countBy = (arr,fn)=> arr.map(typeof fn === 'function'?fn:val=>val[fn]).reduce((acc,val)=>{ // 標記這個元素出來多少次 以這個元素作為key acc[val] = (acc[val]||0)+1 return acc },{}) log(countBy([6.1, 4.2, 6.3], Math.floor)) // {4: 1, 6: 2} log(countBy(['one', 'two', 'three'], 'length')) // {3: 2, 5: 1} log(countBy([{ count: 5 }, { count: 10 }, { count: 5 }], x => x.count)) // {5: 2, 10: 1} log(countBy([{ count: 5 }, { count: 10 }, { count: 5 }],'count')) // {5: 2, 10: 1} ~~~ >[info] ## 組合兩個對象數組，使用指定的鍵來匹配對象 ~~~ 1.現在有兩組數組對象，像將他們按照指定相同key中value 相同項進行合并，例如： const x = [ { id: 1, name: 'John' }, { id: 2, name: 'Maria' } ]; const y = [ { id: 1, name:'w',age: 28 }, { id: 3, age: 26 }, { age: 3} ]; 合并成： [ { id: 1, name: 'w', age: 28 }, { id: 2, name: 'Maria' }, { id: 3, age: 26 } ] ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/combine) >[danger] ##### 代碼實現 ~~~ 1.這種相同合并邏輯代碼，要先想只能做唯一項的數據類型，確定好數據類型后，在進行邏輯整理， 優先想到對象這種結構來做 2.先用reduce循環，可以定義返回的基礎數據類型，利用定義基礎數據對象這個類型的特點 以指定key的value作為唯一標識的key，來判斷當前內容是否是二次出現來決定合并 3.利用reduce 返回一個對象，在利用Object.values，將value 取出變成數組 ~~~ ~~~ const {log} =console const combine = (a, b, prop) => Object.values( [...a, ...b].reduce((acc, v) => { if (v[prop]) acc[v[prop]] = acc[v[prop]] ? { ...acc[v[prop]], ...v } : { ...v }; return acc; }, {}) ); const x = [ { id: 1, name: 'John' }, { id: 2, name: 'Maria' } ]; const y = [ { id: 1, name:'w',age: 28 }, { id: 3, age: 26 }, { age: 3} ]; log( combine(x, y, 'id')) // 打印結果： [ { id: 1, name: 'w', age: 28 }, { id: 2, name: 'Maria' }, { id: 3, age: 26 } ] ~~~ >[info] ## 統計數組中每個項出現次數 ~~~ 1.現在想統計數組中可每個元素出現的次數，舉個例子['a', 'b', 'a', 'c']得到的結果為{a:2,b:1,c:1} ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/frequencies) >[danger] ##### 30s ~~~ const {log} =console const frequencies = arr=> arr.reduce((acc, curr)=>{ acc[curr] = acc[curr]? ++acc[curr] :1 return acc },{}) log(frequencies(['a', 'b', 'a', 'c', 'a', 'a', 'b']))// { a: 4, b: 2, c: 1 } log(frequencies([...'ball'])) // { b: 1, a: 1, l: 2 } ~~~ >[info] ## 根據給定的函數對數組的元素進行分組 ~~~ 1.現在有一個需求，需要按特定的條件將數組中的內容劃分成組，舉個例子['one', 'two', 'three'] 根據長度劃分成{3: ['one', 'two'], 5: ['three']} ~~~ [原文鏈接](https://www.30secondsofcode.org/js/s/group-by) >[danger] ##### 30s ~~~ 1.先將數組轉換，在利用轉換數組值做key，再利用 轉換和 未轉換的數組長度一致特點做分配 ~~~ ~~~ const {log} =console // 先將數組轉換，在利用轉換數組值做key，再利用 轉換和 未轉換的數組長度一致特點做分配 const groupBy = (arr,fn)=>arr .map(typeof fn === 'function'? fn:val=>val[fn]) .reduce((acc,curr,i)=>{ acc[curr] = (acc[curr]||[]).concat(arr[i]) return acc },{}) log(groupBy([6.1, 4.2, 6.3], Math.floor))// {4: [4.2], 6: [6.1, 6.3]} log(groupBy(['one', 'two', 'three'], 'length'))// {3: ['one', 'two'], 5: ['three']} ~~~ >[info] ## 將數組對象按照指定規則分為兩組 ~~~ 1.現在有一個數組對象，想按照指定條件分成兩組舉個例子 [ { user: 'barney', age: 36, active: false }, { user: 'fred', age: 40, active: true }, ] 將active 字段根據 true 和false 分為兩組數據 [ [{ user: 'fred', age: 40, active: true }], [{ user: 'barney', age: 36, active: false }] ] ~~~ [partition](https://www.30secondsofcode.org/js/s/partition) >[danger] ##### 30js ~~~ const partition = (arr, fn) => arr.reduce( (acc, val, i, arr) => { acc[fn(val, i, arr) ? 0 : 1].push(val); return acc; }, [[], []] ); const users = [ { user: 'barney', age: 36, active: false }, { user: 'fred', age: 40, active: true }, ]; partition(users, o => o.active); // [ // [{ user: 'fred', age: 40, active: true }], // [{ user: 'barney', age: 36, active: false }] // ] ~~~ >[info] ## 將兩個數組合并成對象 ~~~ 1.現在有兩個數組，想分別作為新對象的key 和 val，舉個例子 ['a', 'b', 'c'], [1, 2] =》 {a: 1, b: 2, c: undefined} ~~~ [zip-object](https://www.30secondsofcode.org/js/s/zip-object) >[danger] ##### 30s ~~~ 1.用reduce 的特性，初始化時候是對象，依次取值key val ~~~ ~~~ const zipObject = (props, values) => props.reduce((obj, prop, index) => ((obj[prop] = values[index]), obj), {}); zipObject(['a', 'b', 'c'], [1, 2]); // {a: 1, b: 2, c: undefined} zipObject(['a', 'b'], [1, 2, 3]); // {a: 1, b: 2} ~~~