反復する処理をスッキリコーディングがしたいです

Question

例えば下記のようなコードがあります。（実際にはa-cではなくもっとたくさんの行で同じような処理を反復している状況です）

$('.a_wrapper').hasClass('show') ? ary.a_wrapper = $('.a_wrapper').width() :0;
$('.b_wrapper').hasClass('show') ? ary.b_wrapper = $('.b_wrapper').width():0;
$('.c_wrapper').hasClass('show') ? ary.c_wrapper = $('.c_wrapper').width():0;

その処理する量がのちの追加したり順番を入れ替えることを想定すると、このような書き方は後ほど、管理しづらくなるため、

• 配列を作成し、反復処理をさせること
• 後に変更を加える場合には配列だけ調整させる

このようなことを想定して以下のような改修を検討しました。

var ary =[];
var alphabet = ["a","b","c"];
var alphabet_wrapper = [ary.a_wrapper,ary.b_wrapper,ary.c_wrapper];
     for (var i = 0; i < alphabet.length; i++) {
      $("."+alphabet[i]+"_wrapper").hasClass('show') ? alphabet_wrapper[i] = $("."+alphabet[i]+"_wrapper").width() :0;
     }

ここで、変数名を配列に格納するようなvar alphabet_wrapper = [ary.a_wrapper,ary.b_wrapper,ary.c_wrapper];のような処理ができないため、イメージ通りの動作をさせることができません。

このようなケースでスッキリと後で配列の個数が変動したり順番が変わってしまっても管理しやすくする良い術が思いつかずアドバイスをいただければ幸いです。

よろしくお願い申し上げます。

Comments

[yambejp]

aryが配列なのにa_wrapperプロパティを指定するのはおかしいのでは？

[pegy]

コメントありがとうございます。然るべきはオブジェクトなので
var obj ={};
var alphabet = ["a","b","c"];
var alphabet_wrapper = [obj.a_obj,ary.b_wrapper,obj.c_wrapper];
for (var i = 0; i < alphabet.length; i++) {
$("."+alphabet[i]+"_wrapper").hasClass('show') ? alphabet_wrapper[i] = $("."+alphabet[i]+"_wrapper").width() :0;
}

[pegy]

ただ、実際のコードでは配列で初期化してドット演算子でプロパティ設定しているのに何故か配列にはJQueryラッパーの要素が適切に格納されている不思議な状況です。
配列ではpushすることで値を格納していくの確かにプロパティを設定するオリジナルのコードは変なのですが、実装できてしまっています・・実際にコードは以下の通りで、

$(document).ready(function () {
var touch_elm_before_wd = 0;
var touch_elm_after_wd = 0;
var touch_elm_id = "";
var children = []
var cnt_elm = 0;
var diff_wd = 0;

$(".resizable").resizable({
minWidth: 140,
// maxWidth:1080,
// containment: 'parent',
handles: 'e',
animateDuration: 'fast',
start:function( event, ui ) {

$('.text_wrapper').hasClass('show') ? children.text_wrapper = $('.text_wrapper').width() :0;
$('.index_wrapper').hasClass('show') ? children.index_wrapper = $('.index_wrapper').width():0;
$('.note_wrapper').hasClass('show') ? children.note_wrapper = $('.note_wrapper').width():0;
$('.refer_wrapper').hasClass('show') ? children.refer_wrapper = $('.refer_wrapper').width():0;
$('.qa_wrapper').hasClass('show') ? children.qa_wrapper = $('.qa_wrapper').width():0;

console.log(children);
},//以下省略
console.log(children);の結果、[text_wrapper: 1018.41, index_wrapper: 321.594]のように格納できてしまっています。試しにJSFiddleで

var ary =[];
ary.a = "a";
ary.b = "b";
ary.c = "c";
console.log(ary)
のようなことをしても出力結果は[]なのですが、この点は検証中です。

[yambejp]

・a_wrapperクラスのついたHTML要素が複数あった場合どうするか
・a_wrapperlおよびb_wrapperが両方ついたHTML要素があったらどうするか
など管理上の課題があると思います

またshowクラスがついてないときにa_wrapperは古いデータを引き継ぐことになりますが
クリアしなくてよいのでしょうか？

[int32_t]

JavaScriptの配列には任意の名前のプロパティを付けられます。これを利用するのはコード可読性面で褒められたものではありませんが、正常な動作です。

[pegy]

int32_t様
コメントありがとうございます。おそらく実質的に「連想配列」のようなものがものが作れてしまうということなのかと思います。
確かに正常な動作として今実装しているコードが動いている以上、実装可能なものと推察しますが、これに照らしてどうしても以下のコードが動作しないことが整理できません。。
https://jsfiddle.net/czbeLvo7/
プロパティ名のaなどが予約語でダメなのかと？など色々試したのですが、動作をせずに戸惑っております。

[pegy]

yambejp様
コメントありがとうございます。
>・a_wrapperクラスのついたHTML要素が複数あった場合どうするか
>・a_wrapperlおよびb_wrapperが両方ついたHTML要素があったらどうするか
など管理上の課題があると思います

この点はクラスが複数存在する実装を予定していないと考えていたのですが、なら尚更管理上idで対応すべきだと考えますでの、修正することとしました。

>またshowクラスがついてないときにa_wrapperは古いデータを引き継ぐことになりますが
クリアしなくてよいのでしょうか？

ご指摘ありがとうございます。お示しした範囲外のコードでクリアをしています。ご推察の通りです。

[int32_t]

> https://jsfiddle.net/czbeLvo7/

jsfiddle の console.log() の表示方法がブラウザとは違うのでしょう。表示だけの問題なので、気にする必要はありません。

[pegy]

申し訳ございません。そのような仕様であることが盲点でございました。
var ary =[];
ary.abc = "a";
ary.def = "b";
ary.ghi = "c";
alert(ary.abc)
とすることで正しくブラウザが"a"を出力することを確認することができました。
一方で、このような形で配列を利用すべきではないという点を念頭に置き実装したいと思います。

Answer 1

<script>
$(function(){
  var obj={a_wrapper:0,b_wrapper:0,c_wrapper:0};
  $('.show').each(function(){
    Object.keys(obj).forEach(x=>{
      if($(this).hasClass(x)) obj[x]=$(this).width();
    });
  });
  console.log(obj);
});
</script>
<div class="wrapper a_wrapper">a</div>
<div class="wrapper b_wrapper show">b</div>
<div class="wrapper c_wrapper show">c</div>

Comments

[pegy]

コメントをいただきありがとうございます。
オブジェクトを前提にお示しいただいたものと理解しております。
オブジェクトの各要素のプロパティ名はObject.keys(obj).forEachのような形で回すことができるのですね。とても、勉強になりました。

[yambejp]

配列のプロパティを利用するのはバグの温床になりかねないのでおすすめしません
配列だけでなく文字列・数値オブジェクトもプロパティを持てますが
普通は利用しません。
var str=new String("test");
str.x=100;
var num=new Number(200);
num.x=300;
console.log(str,str.x,num,num.x);

[pegy]

ありがとうございます。試しに参考コードを実行してみると文字列の型はオブジェクトに格納されていて
0: "t"
1: "e"
2: "s"
3: "t"
x: 100
のように出力されました。普段利用している文字列型がこのように存在していると知らずに目から鱗でした。確かに、インスタンスにプロパティxに追加できてしまうことも確認しました。一方でnumの数値列は不思議ですね。
なんとなく、
0:200
x:300
のように出力されるのかと予想していたのですが、結果は以下の通りでした。
x: 300
__proto__: Number
[[PrimitiveValue]]: 200

実態としての200はどのように取り出されているのか、そしてプロトタイプに存在しているPrimitiveValueと何者なのかは今直感的に理解できないのですが、何か確認できる術を探してみようと思います。

Answer 2

何をするコードなのかよくわかりませんが、そのコードをそのままシンプルにするなら、

const names = ['a_wrapper', 'b_wrapper', 'c_wrapper'];
names.forEach(name => {
  $('.' + name).hasClass('show') ? ary[name] = $('.' + name).width() : 0;
});

Comments

[pegy]

コメントありがとうございます。
かなりスッキリと実装することができました
一方で、上記の質問修正のyambejp様のコメントでプロパティ指定はおかしいのではということで、今ary.a_wrapper のような形で何故配列の中に連想配列のように添え字と値のセットを格納できてしまっているのかを確認しております。おそらく添え字付きの連想配列のような形を撮りたいのであれば、ご回答にあるようにary[name]とするのが適切なのかと思いますが、ドット演算（プロパティ指定）で実装できてしまっていることが今不思議な状態です。

以下のようなコードは何も配列に格納されているため、理由を調べています。
var ary =[];
ary.a = "a";
ary.b = "b";
ary.c = "c";
console.log(ary)