Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
非破壊的な配列メソッド
Search
rakus frontend
April 21, 2024
0
360
非破壊的な配列メソッド
rakus frontend
April 21, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
48
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
750
日付をもう少し真面目に勉強中
rakus_fe
0
43
React19 β をざっと見る
rakus_fe
0
320
Reactのパフォーマンス改善例
rakus_fe
0
510
Typescript5.4の新機能
rakus_fe
0
300
ココがすごいぜ!Playwright Component Test
rakus_fe
0
540
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
250
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Rails Girls Zürich Keynote
gr2m
95
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Fireside Chat
paigeccino
41
3.7k
GitHub's CSS Performance
jonrohan
1032
470k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Transcript
非破壊的な配列メソッド
破壊的メソッド、非破壊的メソッド • 破壊的メソッド(変更メソッド) ◦ 元の配列を変更する • 非破壊的メソッド(コピーメソッド) ◦ 元の配列を変更しない ◦
コピーは常にシャローコピーで行われる
破壊的メソッド fill():指定した範囲を、指定した値で埋める push():配列の末尾に一つ以上の要素を追加 pop():配列の末尾から要素を削除 reverse():配列の順序を逆にする sort():配列の並べ替え splice():要素の除去・置換・追加など
非破壊的メソッド concat():2 つ以上の配列を結合。 slice():配列の一部を範囲指定で抽出し新しい配列を生成 toReversed():配列の要素の順序を逆にし、新しい配列を生成 toSorted():配列の並べ替えて、新しい配列を生成 toSpliced():要素の除去・置換・追加して、新しい配列を生成 with():指定された位置の要素を指定された値で置き換えて、新しい配列を生成
破壊的メソッドの代替メソッド 破壊的メソッド 破壊的メソッドの代替メソッド(非破壊的メソッド) fill() 代替メソッドなし pop() slice(0, -1) push(v1, v2)
concat([v1, v2]) reverse() toReversed() splice() toSpliced() sort() toReversed()
破壊的メソッドの代替メソッド 破壊的メソッド 破壊的メソッドの代替メソッド(非破壊的メソッド) fill() 代替メソッドなし pop() slice(0, -1) push(v1, v2)
concat([v1, v2]) reverse() toReversed() splice() toSpliced() sort() toSorted()
ES2023 ( 2023 / 06 )
ES2023でリリースされた配列メソッド • toReversed() • toSpliced() • toSorted() • findLast() •
findLastIndex() • with()
ES2023でリリースされた配列メソッド • toSorted() • toReversed() • toSpliced() • findLast() •
findLastIndex() • with() 紹介済み 時間の関係上省略 紹介
with()
with() 指定された位置の要素を指定された値で置き換えた新しい配列を返す。 const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] array.with(index, value) 構文 サンプルコード
with() 指定された位置の要素を指定された値で置き換えた新しい配列を返す。 const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] arr.toSpliced(2, 1, 6) 🤔
デモ demo link
with():まとめ 配列操作のreplaceメソッドのようなものと思ってください。(時間あまって たら話す) 参考 :https://tc39.es/proposal-temporal/#sec-temporal.plaindate.prototype.wit h https://github.com/tc39/proposal-change-array-by-copy/issues/103