for文を一つにまとめる

Question

やりたいこと：
２つ以上あるfor文を一つにまとめてコードの簡略化を行いたい。

可能なのかわかりませんが調べても不明だったので、
ご教示頂きたくお願い足します。

ソースコード例：

 const click = (e) => { 
        const iterable = document.querySelectorAll('textarea');
        const imgmap = document.querySelectorAll('.graphics');
    
            let t = e.target;            
            if(t.nodeName != 'TEXTAREA' && !t.classList.contains('graphics')) return;
            for (const elmTa of iterable) {　　　　　　←この部分を一つにまとめたい
                elmTa.classList.remove('active');
                }
            for (const image of imgmap) {　　　　     ←この部分を一つにまとめたい
                image.classList.remove('active');
                }
            t.classList.add('active');
    }

Comments

[m.ts10806]

要件を記載してください。
コードはあくまで手段でしかないので手段だけを質問に書かれてもこのコードにより実現される機能までは他人にはわかりません。

[m.ts10806]

単に短くなったとして、想定する結果が担保されるわけではありません

[yambejp]

graphicsクラスはtextareaに付いているのですか？textarea以外についているのですか？
その両方ですか？
またclick関数は何をしたときに呼び出されるのですか？

Answer 1

iterableとimgmapの相関関係がわかりませんが、それぞれ別に取得しているなら
無理やりこうする感じでしょうか

  [...iterable,...imgmap].forEach(x=>{
    x.classList.remove('active');
  });

取得方法を一括にすればこう

  document.querySelectorAll('textarea,.graphics').forEach(x=>{
    x.classList.remove('active');
  });

ちょっとひねってこう

  document.querySelectorAll('.active').forEach(x=>{
     x.classList.toggle('active',!([...iterable,...imgmap].includes(x)));
  });

Comments

[rei78087487]

回答ありがとうございます。

foreachを使用したやり方もあり、記述方法も様々ああるのですね。
Lhankor_Mhyのアドバイスだと３番目の方法が一番処理が早いとお聞きしましたが、
まだ処理速度の違いなど内部の細かい部分がわからないので、日々レベルを上げていきたいと思います。
ありがとうございます。

Answer 2

こうするとどうでしょうか。

for (const elmTa of [...iterable, ...imgmap]) {　　　　　　←この部分を一つにまとめたい
  elmTa.classList.remove('active');
}

または

const iterable = document.querySelectorAll('textarea,.graphics');

Comments

[rei78087487]

回答ありがとうございます。

無事できました。
こんなに簡略的に出来る方法があるなんて知りませんでした。

改めてありがとうございます。

[Lhankor_Mhy]

お役に立てたようで何よりです。

yambejpさんのご回答も参考になさってください。
おそらく3番目のコードを使うと、早くなります。