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
47
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
700
日付をもう少し真面目に勉強中
rakus_fe
0
35
React19 β をざっと見る
rakus_fe
0
300
Reactのパフォーマンス改善例
rakus_fe
0
480
Typescript5.4の新機能
rakus_fe
0
270
ココがすごいぜ!Playwright Component Test
rakus_fe
0
480
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
220
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
For a Future-Friendly Web
brad_frost
179
9.8k
Designing for Performance
lara
609
69k
Code Reviewing Like a Champion
maltzj
524
40k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Become a Pro
speakerdeck
PRO
28
5.4k
Making Projects Easy
brettharned
116
6.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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