Slide 1
Slide 1 text
Copying
Array
Methods
KansaiTS#4
@jiko21
arrived at TypeScript
Slide 2
Slide 2 text
About jiko21…
Name: Daiki Kojima (jiko21)
Multistack Engineer @ AppBrew.inc
Love: Guitar, TypeScript, baseball
@jiko21
@jiko_21
Slide 3
Slide 3 text
Copying Array Method
Slide 4
Slide 4 text
About Copying array method
• ࠓʹͳͬͯECMAScriptʹೖͬͨproposal
• ྻʹରͯ͠ඇഁյૢ࡞͕Ͱ͖Δ(ޙड़)
• Α͏͘TypeScript 5.2Ͱܕใ͕Ճ͞Ε·ͨ͠ʂ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed
Slide 5
Slide 5 text
ྻʹର͢Δඇഁյૢ࡞ͬͯʁ
• 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]
Slide 6
Slide 6 text
ࠓճՃ͞Εͨͷ
• Array
• toReversed
• toSorted
• toSpliced
• with
Slide 7
Slide 7 text
toReversed
Slide 8
Slide 8 text
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]
Slide 9
Slide 9 text
toSorted
Slide 10
Slide 10 text
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]
Slide 11
Slide 11 text
toSpliced
Slide 12
Slide 12 text
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]
Slide 13
Slide 13 text
with
Slide 14
Slide 14 text
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]
Slide 15
Slide 15 text
ҙ
Slide 16
Slide 16 text
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); // '...'
Slide 17
Slide 17 text
ύϑΥʔϚϯε
Slide 18
Slide 18 text
ύϑΥʔϚϯε
• ৽͍͠method͕ੜ͑ͯɺܕใՃ͞Εͨͱ͍͏͜ͱɺɹɹɹ
ͦΕ૬Ԡʹ͍͍ͣʂ
• ύϑΥʔϚϯεʹ͕͋Δͱ৽͍͠ϝιου͕͋ͬͯ͏ͷ͕ɹ
ͨΊΒΘΕΔ…
Slide 19
Slide 19 text
࣮ݧͯ͠ΈΔ
• ҎԼͷΑ͏ͳobject͕ೖͬͨྻ(͞N)ʹରͯ͠ૢ࡞Λߦ͏
• ࣮ߦڥ
• Node: v20.6.0
• ϚγϯεϖοΫ: Apple M1 Pro / 32GB
type User = {
id: number;
name: string;
}
Slide 20
Slide 20 text
͜Μͳײ͡ͷίʔυ
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Λ
ͬͯΈΔ
Slide 21
Slide 21 text
ύϑΥʔϚϯε
Slide 22
Slide 22 text
ύϑΥʔϚϯε
Slide 23
Slide 23 text
ͳΜ͔શମతʹྑͦ͞͏ʁ
Slide 24
Slide 24 text
N=100000Ͱͷൺֱ
• ·͊ݢฒΈૣͦ͏
• spliceͱ͔withΈ͍ͨͳɹ
ಛఆͷindexͷૢ࡞ɹ
ڧ͍͔
Slide 25
Slide 25 text
͏Ϟνϕʔγϣϯ
Slide 26
Slide 26 text
ҎԼ͋Γͦ͏
1. ύϑΥʔϚϯε͕͍͍
2.ܕνΣοΫճආ͔ܳΒͷ։์
Slide 27
Slide 27 text
ܕνΣοΫճආ͔ܳΒͷ։์
• ReadonlyͳArrayʹରͯ͠ݱঢ়(5.1<)·ͰҎԼͷΑ͏ʹͯͨͣ͠
• ܕؔແཧΓ௨͢ܥ
• @ts-ignoreͰԥΓ௵͢
• type-festͱ͔ͰWritableͱ͔Λassertionͯ͠ճආ
• ߹๏తղܾܥ
• spreadߏจͱ͔ͰྻͦͷͷΛίϐʔ
Slide 28
Slide 28 text
ܕؔແཧΓ௨͢ܥ
• ts-ignoretype-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();
Slide 29
Slide 29 text
spreadߏจͱ͔ͰྻͦͷͷΛίϐʔ
• Spreadߏจͱ͔ͰҰ୴ྻΛίϐʔ
ܕΤϥʔͳ͍͚ͲύϑΥʔϚϯε͕…
type Player = {id: number; name: string;};
const array: ReadonlyArray = [
{id: 51, name: 'ichiro'},
{id: 1, name: 'shinjo'}
];
[...array].reverse();
Slide 30
Slide 30 text
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();
Slide 31
Slide 31 text
·ͱΊ
Slide 32
Slide 32 text
Copying Array Method͍͍ͧʂ
• ͍(ΑͬΆͲͰ͔͍ཁૉ͡Όͳ͍ݶΓ)!
• εϚʔτ!
• ܕΤϥʔ͕ى͖ͳ͍!
Slide 33
Slide 33 text
ࢀߟ
• https://devblogs.microsoft.com/typescript/announcing-
typescript-5-2/
• https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/
Global_Objects/Array/toReversed