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

Copying Array Methods arrived at TypeScript

jiko21
November 22, 2023
530

Copying Array Methods arrived at TypeScript

jiko21

November 22, 2023
Tweet

Transcript

  1. About jiko21… Name: Daiki Kojima (jiko21) Multistack Engineer @ AppBrew.inc

    Love: Guitar, TypeScript, baseball @jiko21 @jiko_21
  2. About Copying array method • ࠓ೥ʹͳͬͯECMAScriptʹೖͬͨproposal • ഑ྻʹରͯ͠ඇഁյૢ࡞͕Ͱ͖Δ(ޙड़) • Α͏΍͘TypeScript

    5.2Ͱܕ৘ใ͕௥Ճ͞Ε·ͨ͠ʂ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed
  3. ഑ྻʹର͢Δඇഁյૢ࡞ͬͯʁ • reverseɺsortͳͲͷapi͸ɺݩͷ഑ྻࣗମʹରͯ͠ഁյతૢ࡞͕ɹ ൃੜͯ͠͠·͏ • ඇഁյૢ࡞͕Ͱ͖Δͱݩ഑ྻ౳Λอ࣋ͭͭ͠ιʔτ౳͕ߦ͑ͯɹ ͏Ε͍͠ const arr =

    [1, 2, 3]; arr.reverse(); console.log(arr); // [3, 2, 1] const arr = [1, 2, 3]; const arr_cpy = arr.toReversed(); console.log(arr); // [1, 2, 3] console.log(arr_cpy); // [3, 2, 1]
  4. Array#toReversed • reverseͷඇഁյ൛ const arr = [1, 2, 3]; arr.reverse();

    console.log(arr); // [3, 2, 1] const arr = [1, 2, 3]; const arr_cpy = arr.toReversed(); console.log(arr); // [1, 2, 3] console.log(arr_cpy); // [3, 2, 1]
  5. Array#toSorted • sortͷඇഁյ൛ const arr = [1, 4, 3, 2];

    const arr_cpy = arr.toSorted((a, b) => a - b); console.log(arr); // [1, 4, 3, 2] console.log(arr_cpy); // [1, 2, 3, 4] const arr = [1, 4, 3, 2]; arr.sort((a, b) => a - b); console.log(arr); // [1, 2, 3, 4]
  6. Array#toSpliced • spliceͷඇഁյ൛ const arr = [1, 4, 3, 2];

    arr.splice(2, 1, 10); console.log(arr); // [1, 4, 10, 2] const arr = [1, 4, 3, 2]; const arr_cpy = arr.toSpliced(2, 1, 10); console.log(arr); // [1, 4, 3, 2] console.log(arr_cpy); // [1, 4, 10, 2]
  7. Array#with • ͜Ε͚ͩ͸ΦϦδφϧʁͳϝιου(cloneʹ͸ͳ͍) • ഑ྻίϐʔͯ͠த਎Λॻ͖׵͍͑ͨ৔߹ʹ࢖͏ const arr = [1, 4,

    3, 2]; const arr_cpy = arr.with(2, 10); console.log(arr); // [1, 4, 3, 2] console.log(arr_cpy); // [1, 4, 10, 2]
  8. Copying Array Method͸γϟϩʔίϐʔ • ৽͍͠ม਺ʹ୅ೖ͍ͯ͠ΔͷͰΘ͢Εͯ͠·͍͕͕ͪͩɺ Copying Array Method͸σΟʔϓίϐʔ͸͍ͯ͠ͳ͍ • ↑ͦͷͨΊɺ഑ྻͷத਎ʹΑͬͯڍಈ͕มΘͬͯ͘Δ

    QSJNJUJWF஋ͷ৔߹ 0CKFDU౳ͷ৔߹ const arr = [1, 2, 3]; const arr_cpy = arr.toReversed(); arr[0] = 100; console.log(arr); // [100, 2, 3] console.log(arr_cpy); // [3, 2, 1] const arr = [{ id: 1, name: 'eric' }]; const arr_cpy = arr.toReversed(); arr[0].name = '...'; console.log(arr[0].name); // '...' console.log(arr_cpy[0].name); // '...'
  9. ͜Μͳײ͡ͷίʔυ import { performance } from'node:perf_hooks'; const bigArray = [];

    const bigArrayN = parseInt(process.argv[2]); for (let i = 0; i < bigArrayN; i++) { bigArray.push({id: i, name: `user ${i}`}); } // previousReverse performance.mark('previousSortStart'); const _arr1 = [...bigArray].sort((a, b) => b.id - a.id); performance.mark('previousSortEnd'); const previousSortStatus = performance.measure('previousSort', 'previousSortStart', 'previousSortEnd'); // nowReverse performance.mark('nowReverseStart'); const _arr2 = bigArray.toSorted((a, b) => b.id - a.id); performance.mark('nowReverseEnd'); const nowSortStatus = performance.measure('nowReverse', 'nowReverseStart', 'nowReverseEnd'); console.log(`${previousSortStatus.duration}, ${nowSortStatus.duration}`); ΈΜͳΑ͘΍Δʁ 4QSFBEߏจͰίϐʔ͢Δ৔߹ $PQZJOH"SSBZ.FUIPEΛ ࢖ͬͯΈΔ
  10. ܕؔ܎ແཧ΍Γ௨͢ܥ • ts-ignore΍type-festͱ͔Λ࢖ͬͯແཧ΍ΓܕΤϥʔ͚ͩ௨͢ Readonly͕ػೳ͠ͳ͍… type Player = {id: number; name:

    string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; // @ts-ignore array.reverse(); import { Writable } from 'type-fest/source/writable'; type Player = {id: number; name: string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; (array as Writable<Player>[]) .reverse();
  11. spreadߏจͱ͔Ͱ഑ྻͦͷ΋ͷΛίϐʔ • Spreadߏจͱ͔ͰҰ୴഑ྻΛίϐʔ ܕΤϥʔ͸ͳ͍͚ͲύϑΥʔϚϯε͕… type Player = {id: number; name:

    string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; [...array].reverse();
  12. Copying Array MethodͳΒ… 1. ܕΤϥʔ͕ى͖ͳ͍ 2. ܕΤϥʔΛѲΓͭͿ͞ͳͯ͘΋͍͍ 3. ύϑΥʔϚϯε΋͍͍ type

    Player = {id: number; name: string;}; const array: ReadonlyArray<Player> = [ {id: 51, name: 'ichiro'}, {id: 1, name: 'shinjo'} ]; const newArray = array.toReversed();