Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Array Grouping will soon be arriving at TypeScript

jiko21
February 21, 2024
65

Array Grouping will soon be arriving at TypeScript

kansaits#5の資料です

jiko21

February 21, 2024
Tweet

Transcript

  1. SELECT keyName, valueArray(keyName, array) FROM array GROUP BY keyName Array

    Grouping will soon be KansaiTS#5 @jiko21 arriving at TypeScript
  2. About jiko21… Name: Daiki Kojima (jiko21) Multistack Engineer @ AppBrew.inc

    Love: Guitar, TypeScript, baseball @jiko21 @jiko_21
  3. About array grouping method • ڈ೥ʹͳͬͯECMAScriptʹೖͬͨproposal • Α͏΍͘TypeScript 5.4Ͱܕ৘ใ͕௥Ճ͞ΕΔʂ •

    ରԠ͞ΕͯΔϒϥ΢β͸͔ͳΓݶఆత https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
  4. About array grouping method • ഑ྻ಺ཁૉΛgroupԽͨ͠object(Object.groupBy)΍ map(Map.groupBy)͕ੜ੒Ͱ͖Δ • SQLͰ͍͏GroupByͬΆ͍ (sumͱ͔count͕Ͱͯ͘ΔΘ͚Ͱ͸ͳ͍͕)

    const array = [1, 2, 3, 4, 5]; const groupByResult = Object.groupBy(array, (nu m ) => { return num % 2 === 0 ? 'even': 'odd'; }); /** * { * 'even': [2, 4], * 'odd': [1, 3, 5], * } */ console.log(groupByResult)
  5. ࠓ·Ͱͩͱ… const array = [1, 2, 3, 4, 5]; const

    result = { even: [] as number[], odd: [] as number[], }; array.forEach((value) => { if (value % 2 === 0 ) { result.even.push(value) } else { result.odd.push(value) } }); GPS&BDIͰճͯͦ͠ΕͧΕཁૉΛQVTI
  6. ࠓ·Ͱͩͱ… const array = [1, 2, 3, 4, 5]; const

    result = array.reduce((prevValue, currentValue) => { if (currentValue % 2 === 0 ) { prevValue.even.push(currentValue) } else { prevValue.odd.push(currentValue) } return prevValue; }, { even: [] as number[], odd: [] as number[], }); "SSBZSFEVDFͰແཧ΍Γ͓͠ΌΕʹ
  7. ͜͏͍͏σʔλΛද͍ࣔͨ͠… const todos = [ { status: 'TODO', text: 'إΛચ͏',

    }, { status: 'TODO', text: 'ࣃΛຏ͘', }, { status: 'DOING', text: '෩࿊ʹೖΔ', }, { status: 'DONE', text: 'ञΛҿΉ', }, ];
  8. ݁ߏ؆୯ʹॻ͚·͢! function App() { const groupedTodos: { 'TODO': Todo[]; 'DOING':

    Todo[]; 'DONE': Todo[]; } = Object.groupBy(todos, (ite m ) => { return ite m .status; }); return ( <div> <List status={'todo'} list={groupedTodos. T ODO. m ap((ite m ) => ite m .text)} /> <List status={'doing'} list={groupedTodos.DOING. m ap((ite m ) => ite m .text)} /> <List status={'done'} list={groupedTodos.DONE. m ap((ite m ) => ite m .text)} /> </div> ) } 'JMUFS஍ࠈ͔Βൈ͚ग़ͤΔʂ
  9. ࣮ݧͯ͠ΈΔ • 0, 1, …, N-1͕ೖͬͨ഑ྻ͔ΒҎԼͷΑ͏ͳobjectΛੜ੒͢Δ • ࣮ߦ؀ڥ • bun:

    v1.0.25 • ϚγϯεϖοΫ: Apple M1 Pro / 32GB { even: [ 0 , 2, ...], odd: [1, 3, ...] }
  10. Object.groupBy͸͜ΕͰൺֱ inputArray.reduce((prevValue, currentValue) => { if (currentValue % 2 ===

    0 ) { prevValue.even.push(currentValue) } else { prevValue.odd.push(currentValue) } return prevValue; }, { even: [] as number[], odd: [] as number[], }) Object.groupBy(inputArray, (nu m ) => { return num % 2 === 0 ? "even": "odd"; }) WT
  11. Map.groupBy͸͜ΕͰൺֱ const map = new Map(); const evenArray: number[] =

    []; const oddArray: number[] = []; inputArray.forEach((currentValue) => { if (currentValue % 2 === 0 ) { evenArray.push(currentValue); } else { oddArray.push(currentValue); } }); map.set('even', evenArray); map.set('odd', oddArray); Map.groupBy(inputArray, (nu m ) => { return num % 2 === 0 ? "even": "odd"; }) WT
  12. ٖࣅίʔυΛॻ͍ͯΈΔͱ… function Object.groupBy(array, callback) { groups = GroupBy(array, callback, property);

    obj = {}; for (g of groups<Key, Elements>) { elements = g.elements obj[g.key] = elements; } return obj } function Map.groupBy(array, callback) { groups = GroupBy(array, callback, property); map = new Map(); for (g of groups<Key, Elements>) { elements = g.elements map.set(g.key, elements); } return map; } GroupByΛڞ௨ͯ͠ݺΜͰΔ…
  13. GroupByΛ೷͍ͯΈΔͱ… function GroupBy<T>(arr: T [], callback): {key: string; elements: T

    [] }[] { groups = []; for(k = 0; k < arr.length(); k++) { /* ࡉ͔͍ॲཧ */ key = callback(arr[k]); AddValueToKeyedGroup(groups, key, arr[k]). } return groups } AddValueToKeyedGroupΛݺΜͰΔ… 0 / ճݺͼग़͞ΕΔ
  14. AddValueToKeyedGroupΛ೷͍ͯΈΔͱ… function AddValueToKeyedGroup<T>(groups: {key: string; elements: T [] }[], key,

    value): { for(group: groups) { if (group.key === key) { group.elements.push(value); return } } group = { key: key, elements: [value] } groups.push(group) } LFZͷݸ਺ . ճ LFZ͕ͳ͚Ε͹৽ͨʹHSPVQTʹ௥Ճ
  15. ͭ·Γ͜͏ͳΔ… "EE7BMVF5P,FZFE(SPVQ 0 . 0CKFDUHSPVQ#ZPS.BQHSPVQ#Z (SPVQ#Z 0 / 0 .

    0 / /. ˠ0 /. Ͱ͸͋Δ ͜Ε·Ͱͩͱ.ͳͷͰ0 / Ͱ΋Αͦ͞͏ ͨͩ͠ϧʔϓ͕༨ܭʹଟΊʹճͬͯͦ͏
  16. reduceଆΛվྑͯ͠ΈΔ inputArray.reduce((prevValue, currentValue) => { const key = currentValue %

    2 === 0 ? 'even' : 'odd' if (prevValue.hasOwnProperty(key)) { prevValue[key].push(currentValue); } else { prevValue[key] = [currentValue]; } return prevValue; }, {}) LFZ஋͕࣮૷࣌ʹະఆͰ΋͍͍Α͏ʹ 0CKFDUHSPVQ#Zͷڍಈʹ߹ΘͤͯΔ
  17. Array grouping Method͸·͍͍͊ͧʂ • groupingܥָ͕ʹ͔͚Δ • ͦΕҎ֎Ͱ΋ fi lter஍ࠈ͔Β͸ൈ͚ग़͢ʹ΋࢖͑ͦ͏ •

    ύϑΥʔϚϯε͸ҎԼʹ஫ҙ • O(NM)Ͱ͸͋Δ͕ϧʔϓճ਺͕ωοΫ? • keyͷछྨ͕࣮ߦ࣌ʹ෼͔Δ৔߹Ͱ΋͍͍Α͏ʹ… • ↑छྨ͕ݻఆͩͱͪΐͬͱ͋Εͳؾ͢Δ…