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
190
非破壊的な配列メソッド
rakus frontend
April 21, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
Typescript5.4の新機能
rakus_fe
0
130
ココがすごいぜ!Playwright Component Test
rakus_fe
0
200
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
99
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Writing Fast Ruby
sferik
622
60k
Ruby is Unlike a Banana
tanoku
96
10k
Web Components: a chance to create the future
zenorocha
306
41k
Automating Front-end Workflow
addyosmani
1357
200k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Visualization
eitanlees
137
14k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
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