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

Copying Array Methods arrived at TypeScript

jiko21
November 22, 2023
330

Copying Array Methods arrived at TypeScript

jiko21

November 22, 2023
Tweet

Transcript

  1. Copying
    Array
    Methods
    KansaiTS#4
    @jiko21
    arrived at TypeScript

    View full-size slide

  2. About jiko21…
    Name: Daiki Kojima (jiko21)
    Multistack Engineer @ AppBrew.inc
    Love: Guitar, TypeScript, baseball
    @jiko21
    @jiko_21

    View full-size slide

  3. Copying Array Method

    View full-size slide

  4. About Copying array method
    • ࠓ೥ʹͳͬͯECMAScriptʹೖͬͨproposal
    • ഑ྻʹରͯ͠ඇഁյૢ࡞͕Ͱ͖Δ(ޙड़)
    • Α͏΍͘TypeScript 5.2Ͱܕ৘ใ͕௥Ճ͞Ε·ͨ͠ʂ
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

    View full-size slide

  5. ഑ྻʹର͢Δඇഁյૢ࡞ͬͯʁ
    • 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]

    View full-size slide

  6. ࠓճ௥Ճ͞Εͨ΋ͷ
    • Array
    • toReversed
    • toSorted
    • toSpliced
    • with

    View full-size slide

  7. 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]

    View full-size slide

  8. 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]

    View full-size slide

  9. 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]

    View full-size slide

  10. 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]

    View full-size slide

  11. 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); // '...'

    View full-size slide

  12. ύϑΥʔϚϯε

    View full-size slide

  13. ύϑΥʔϚϯε
    • ৽͍͠method͕ੜ͑ͯɺܕ৘ใ΋௥Ճ͞Εͨͱ͍͏͜ͱ͸ɺɹɹɹ
    ͦΕ૬Ԡʹ͍͍͸ͣʂ
    • ύϑΥʔϚϯεʹ໰୊͕͋Δͱ৽͍͠ϝιου͕͋ͬͯ΋࢖͏ͷ͕ɹ
    ͨΊΒΘΕΔ…

    View full-size slide

  14. ࣮ݧͯ͠ΈΔ
    • ҎԼͷΑ͏ͳobject͕ೖͬͨ഑ྻ(௕͞N)ʹରͯ͠ૢ࡞Λߦ͏
    • ࣮ߦ؀ڥ
    • Node: v20.6.0
    • ϚγϯεϖοΫ: Apple M1 Pro / 32GB
    type User = {
    id: number;
    name: string;
    }

    View full-size slide

  15. ͜Μͳײ͡ͷίʔυ
    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Λ
    ࢖ͬͯΈΔ

    View full-size slide

  16. ύϑΥʔϚϯε

    View full-size slide

  17. ύϑΥʔϚϯε

    View full-size slide

  18. ͳΜ͔શମతʹ͸ྑͦ͞͏ʁ

    View full-size slide

  19. N=100000Ͱͷൺֱ
    • ·͊ݢฒΈૣͦ͏
    • spliceͱ͔withΈ͍ͨͳɹ
    ಛఆͷindex΁ͷૢ࡞͸ɹ
    ڧ͍͔΋

    View full-size slide

  20. ࢖͏Ϟνϕʔγϣϯ

    View full-size slide

  21. ҎԼ͋Γͦ͏
    1. ύϑΥʔϚϯε͕͍͍
    2.ܕνΣοΫճආ͔ܳΒͷ։์

    View full-size slide

  22. ܕνΣοΫճආ͔ܳΒͷ։์
    • ReadonlyͳArrayʹରͯ͠ݱঢ়(5.1<)·Ͱ͸ҎԼͷΑ͏ʹͯͨ͠͸ͣ
    • ܕؔ܎ແཧ΍Γ௨͢ܥ
    • @ts-ignoreͰԥΓ௵͢
    • type-festͱ͔ͰWritableͱ͔Λassertionͯ͠ճආ
    • ߹๏తղܾܥ
    • spreadߏจͱ͔Ͱ഑ྻͦͷ΋ͷΛίϐʔ

    View full-size slide

  23. ܕؔ܎ແཧ΍Γ௨͢ܥ
    • ts-ignore΍type-festͱ͔Λ࢖ͬͯແཧ΍ΓܕΤϥʔ͚ͩ௨͢
    Readonly͕ػೳ͠ͳ͍…
    type Player = {id: number; name: string;};
    const array: ReadonlyArray = [
    {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 = [
    {id: 51, name: 'ichiro'},
    {id: 1, name: 'shinjo'}
    ];
    (array as Writable[])
    .reverse();

    View full-size slide

  24. spreadߏจͱ͔Ͱ഑ྻͦͷ΋ͷΛίϐʔ
    • Spreadߏจͱ͔ͰҰ୴഑ྻΛίϐʔ
    ܕΤϥʔ͸ͳ͍͚ͲύϑΥʔϚϯε͕…
    type Player = {id: number; name: string;};
    const array: ReadonlyArray = [
    {id: 51, name: 'ichiro'},
    {id: 1, name: 'shinjo'}
    ];
    [...array].reverse();

    View full-size slide

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

    View full-size slide

  26. Copying Array Method͸͍͍ͧʂ
    • ଎͍(ΑͬΆͲͰ͔͍ཁૉ਺͡Όͳ͍ݶΓ)!
    • εϚʔτ!
    • ܕΤϥʔ͕ى͖ͳ͍!

    View full-size slide

  27. ࢀߟ
    • https://devblogs.microsoft.com/typescript/announcing-
    typescript-5-2/
    • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/
    Global_Objects/Array/toReversed

    View full-size slide