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
330
非破壊的な配列メソッド
rakus frontend
April 21, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
41
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
660
日付をもう少し真面目に勉強中
rakus_fe
0
33
React19 β をざっと見る
rakus_fe
0
290
Reactのパフォーマンス改善例
rakus_fe
0
450
Typescript5.4の新機能
rakus_fe
0
270
ココがすごいぜ!Playwright Component Test
rakus_fe
0
450
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
210
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
Done Done
chrislema
184
16k
Rails Girls Zürich Keynote
gr2m
94
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Side Projects
sachag
453
42k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Music & Morning Musume
bryan
47
6.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
GitHub's CSS Performance
jonrohan
1031
460k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Practical Orchestrator
shlominoach
187
11k
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