配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA

JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた

[ducktoon]

forEach のために Object.entries するのって処理の無駄だよな

[kazatsuyu]

歴史的経緯からJSの配列の組み込み関数は配列を返すものが多い。filter().map() をするとfilterで一回配列が生成されてmapで更に一回配列が生成され効率が悪い。for ofや普通のforの方がマシなこともある

[tk_musik]

IE対応でポリフィルに任せると結構パフォーマンスしんどくて普通のfor文で書くことがあったな。

[madeoffat]

クリティカルなくらいパフォーマンスに差があるの。。？そうでなければ可読性保守性のためにこの記事のように書いて欲しい派

[ene0kcal]

JSはあまり知らないので勉強になる。しかし一部気になった。それは多次元配列。多次元配列と呼ぶのは止めましょう。配列の配列はジャグ配列（jagged array）と正確には言います。

[peperon_brain]

ES5からあるけどレガシーお守りが長かった人やjQueryチョットデキルの人にありがち。あと勘違いで定数const宣言、他は全部letにしてるとかいまだに見かける。

[hope_ring]

簡潔で上手なコーディングのつもりなんだろうけど、速度ちゃんと気にしているんだろうか。jsはforでぶん回すほうが何十倍も速いパターンが多いような

[nida3001]

古代のブラウザへの対応考えるとこんなん書けねえよアホか💢

[otchy210]

読みやすい時とパフォーマンスがシビアじゃない時に使う。なんでも関数プログラミングスタイルで書くマンが可読性落としてるの見るともにょる。

[punychan]

JSに限らず愚直に書くほうが実は速いってケースがよくあるので、データ多量案件では注意が必要。PowerShellとか、PowerShellとか、……

[kurocraft7522]

配列操作

[hadakadenkyu]

「条件に合致する要素から配列を作成する」は場合によってはreduce使うな。

[altar]

「NodeListにはforEachがある」に関しては本当にforEachしかないので、その場合だけ最適な記述を要求するのは2^n倍を左シフトで書くのに近い印象／過剰な配列生成を問題視するなら全部Array化せずに[].xxx.callを使うべきでは

[stk132]

forの方がパフォーマンスが〜っていう話は理解できるんだけど、ダルいよね。。。

[fukken]

古いブラウザの事を考えると、とか言ってる老害、「古いブラウザの事を考えて」（つまり、互換性テーブルを確認してどのくらいの環境まで使えるかを確認して）なさそうだし、そもそもpolyfillでいいだろ。

[yamadar]

パフォーマンスのコメントなるほど。どちらも理解して使うべきところで使えば良さそう。

[ya--mada]

配列なんて使いたくないのだけど、jsってこういうもんなの？

[strow0343]

C#のLinqみたいなやつか。振る舞い理解して使わないと意図せず重くなりそう

[rrttaa]

js

[toblog]

基本はforが間違いないと思う。ケースによってはこれら使えばいいけど。

[buhoho]

このくらいの配列操作の語彙はJS書くなら理解しててほしい

[spam_lover]

タイトルからもっと突っ込んだことかと思ったら、リファレンスレベルだった。===falseがスマートねぇ。MDNでいいんじゃない。

[fusionstar]

あえて言うけど ～Flag っていう変数名ださくない?

[djshigy]

javascript

[tettekete37564]

書き方の冗長・簡潔とパフォーマンスの高・低は必ずしも比例するとは限らないが、ベンチマークでもスコア高い例なのかな。ブラウザごとのJS実装にも依存すると思うが。通常言語に依存しない書き方の方がリーダブル

[qtamaki]

そしてその「配列を操作する」という概念は「コンテナを操作する」に汎化可能で、プログラミングを本質的に良くします

[lli]

デカい配列を操作するときはあえてforループにする。

[thesecret3]

そんなに良くなったように見えないんだよな。開発効率とおっしゃるがそれを直したら1人日でも縮むものだろうか。

[repon]

arrayにあってobjectに無い処理が多いので、objectをfilterとかmapとかしたいときはObject.keysかObject.entriesに対して操作してるけど、objectを操作できる処理が出てくるまではこのままかなぁ

[kijtra]

「簡潔な処理」と「簡潔な記述」を一緒にしちゃってる感じ？

[nonono-notch]

js、javascript、配列の書き方

[takamints]

someとeveryは知らなかった。新し目の配列操作関数群を多用すると、知識の浅い人にとっては何やってるのかまるでわからんらしいから、チーム全体の知識の底上げが必要だと痛感。あと、デバッグログが仕込みにくい。

[t-murachi]

jsのArrayにも遅延処理できるiterator欲しい(´・ω・`)

[kazuya030]

🤔

[jsoizo]

jsのArray.prototypeメソッドは引数にインデックスや配列本体も渡ってくるから、ES5で書かざるを得ないときでも配列周りはpolyfill使わないで最低限の可読性は維持したまま書けると思う。