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
340
非破壊的な配列メソッド
rakus frontend
April 21, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
47
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
710
日付をもう少し真面目に勉強中
rakus_fe
0
41
React19 β をざっと見る
rakus_fe
0
310
Reactのパフォーマンス改善例
rakus_fe
0
490
Typescript5.4の新機能
rakus_fe
0
280
ココがすごいぜ!Playwright Component Test
rakus_fe
0
500
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
230
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
GitHub's CSS Performance
jonrohan
1031
460k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fireside Chat
paigeccino
37
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Done Done
chrislema
184
16k
Docker and Python
trallard
45
3.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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