JavaScriptのクラスで作った関数の入力を省略したい

JavaScriptで下のhtmlにおいて、クラスの全てのオブジェクトにa1()とa2()とa3()の3つの関数を実行させたいです。
同じ対象なのに「A.a1()」を3種類づつ何度も大量に入力しなければならないのでしょうか？
何か良い方法があれば教えてください。

JavaScript
1<!DOCTYPE html>
2<HTML>
3<body style="font-size:32px;">
4<script>
5
6
7class Cl {
8  constructor(a,b,c) 
9{
10    this.a = a;
11    this.b = b;
12    this.c = c;
13}
14a1()
15{
16 if(this.a==0)
17 {
18  if(this.b==1)
19  {
20   this.a++;
21  }
22  else if(this.b==2)
23  {
24   this.a=this.a+2;
25  }
26 }
27}
28a2()
29{
30 if(this.a==0)
31 {
32  if(this.c==3)
33  {
34   this.a=this.a+3;
35  }
36  else if(this.c==4)
37  {
38   this.a=this.a+5;
39  }
40 }
41}
42a3()
43{
44 if(this.a==0)
45 {
46  if(this.a==4)
47  {
48   this.a=this.a--;
49  }
50  else if(this.a==1)
51  {
52   this.a=this.a++;
53  }
54 }
55}
56
57}
58let A=new Cl(0,1,3);
59let B=new Cl(0,2,3);
60let C=new Cl(0,1,1);
61let D=new Cl(0,2,2);
62let E=new Cl(0,1,4);
63let F=new Cl(0,2,3);
64let G=new Cl(0,1,2);
65let H=new Cl(0,1,3);
66let I=new Cl(0,2,3);
67let J=new Cl(0,2,1);
68let K=new Cl(0,3,3);
69let L=new Cl(0,1,1);
70let N=new Cl(0,1,3);
71let M=new Cl(0,1,4);
72let O=new Cl(0,1,1);
73let P=new Cl(0,2,2);
74let Q=new Cl(0,2,2);
75let R=new Cl(0,1,3);
76let S=new Cl(0,1,1);
77let T=new Cl(0,2,2);
78let U=new Cl(0,1,1);
79let V=new Cl(0,1,1);
80let W=new Cl(0,4,4);
81let X=new Cl(0,2,2);
82let Y=new Cl(0,2,3);
83let Z=new Cl(0,1,1);
84
85A.a1()
86A.a2()
87A.a3()
88console.log(A);
89</script>
90</body>
91</HTML>

試した事は、functionで生成した関数に「オブジェクトの名前.代入部分()」を入れて
「関数の名前(a1)」「関数の名前(a2)」「関数の名前(a3)」で実行しましたが上手くいきませんでした。

行動規範の内容に同意します

回答5件

こういうこと？

JavaScript
1[A,B,C,D,E,F,G,H,I,J,K,L,N,M,O,P,Q,R,S,T,U,V,W,X,Y,Z].forEach(instance => {
2  ['a1', 'a2', 'a3'].forEach(methodName => {
3    instance[methodName]();
4  });
5  console.log(instance);
6});

投稿2020/03/19 17:55

shinji709

総合スコア805

ベストアンサー

配列に入れるやり方はどうですか？

Javascript
1<!DOCTYPE html>
2<HTML>
3<body style="font-size:32px;">
4<script>
5
6
7class Cl {
8  constructor(a,b,c) 
9{
10    this.a = a;
11    this.b = b;
12    this.c = c;
13}
14a1()
15{
16 if(this.a==0)
17 {
18  if(this.b==1)
19  {
20   this.a++;
21  }
22  else if(this.b==2)
23  {
24   this.a=this.a+2;
25  }
26 }
27}
28a2()
29{
30 if(this.a==0)
31 {
32  if(this.c==3)
33  {
34   this.a=this.a+3;
35  }
36  else if(this.c==4)
37  {
38   this.a=this.a+5;
39  }
40 }
41}
42a3()
43{
44 if(this.a==0)
45 {
46  if(this.a==4)
47  {
48   this.a=this.a--;
49  }
50  else if(this.a==1)
51  {
52   this.a=this.a++;
53  }
54 }
55}
56
57}
58const l = []
59l[0]=new Cl(0,1,3);
60l[1]=new Cl(0,2,3);
61l[2]=new Cl(0,1,1);
62l[3]=new Cl(0,2,2);
63l[4]=new Cl(0,1,4);
64l[5]=new Cl(0,2,3);
65l[6]=new Cl(0,1,2);
66l[7]=new Cl(0,1,3);
67l[8]=new Cl(0,2,3);
68l[9]=new Cl(0,2,1);
69l[10]=new Cl(0,3,3);
70l[11]=new Cl(0,1,1);
71l[12]=new Cl(0,1,3);
72l[13]=new Cl(0,1,4);
73l[14]=new Cl(0,1,1);
74l[15]=new Cl(0,2,2);
75l[16]=new Cl(0,2,2);
76l[17]=new Cl(0,1,3);
77l[18]=new Cl(0,1,1);
78l[19]=new Cl(0,2,2);
79l[20]=new Cl(0,1,1);
80l[21]=new Cl(0,1,1);
81l[22]=new Cl(0,4,4);
82l[23]=new Cl(0,2,2);
83l[24]=new Cl(0,2,3);
84l[25]=new Cl(0,1,1);
85
86l.forEach((l) => {
87  l.a1()
88  l.a2()
89  l.a3()
90  console.log(l);
91});
92</script>
93</body>
94</HTML>

投稿2020/03/19 16:42

yureighost

総合スコア2183

Ara

2020/03/19 23:35

ありがとうございます！解決しました！

行動規範の内容に同意します

こんにちは
以下の3点による修正案を挙げます。

クラスClのメソッド a1, a2, a3 をメソッドチェーンで書けるように、最後に return this; を追加
A, B, C ... という大文字アルファベットを、変数としてではなく、Cl のコンストラクタに渡す引数の配列を値とするオブジェクトobj のキーとして用意しておく。
obj のプロパティの値を Cl のインスタンスに置き換えるために、 lodashの_.mapValues を使う。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Q248199</title>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
7    <script>
8      class Cl {
9        constructor(a, b, c) {
10          this.a = a;
11          this.b = b;
12          this.c = c;
13        }
14
15        a1() {
16          if (this.a == 0) {
17            if (this.b == 1) {
18              this.a ++;
19            } else if (this.b == 2) {
20              this.a += 2;
21            }
22          }
23          return this;
24        }
25
26        a2() {
27          if (this.a == 0) {
28            if (this.c == 3) {
29              this.a += 3;
30            } else if (this.c == 4) {
31              this.a += 5;
32            }
33          }
34          return this;
35        }
36
37        a3() {
38          if (this.a == 0) {
39            if (this.a == 4) {
40              this.a --;
41            } else if (this.a == 1) {
42              this.a ++;
43            }
44          }
45          return this;
46        }
47      }
48
49      let obj = {
50        A: [0, 1, 3],
51        B: [0, 2, 3],
52        C: [0, 1, 1],
53        D: [0, 2, 2],
54        E: [0, 1, 4],
55        F: [0, 2, 3],
56        G: [0, 1, 2],
57        H: [0, 1, 3],
58        I: [0, 2, 3],
59        J: [0, 2, 1],
60        K: [0, 3, 3],
61        L: [0, 1, 1],
62        M: [0, 1, 3],
63        N: [0, 1, 4],
64        O: [0, 1, 1],
65        P: [0, 2, 2],
66        Q: [0, 2, 2],
67        R: [0, 1, 3],
68        S: [0, 1, 1],
69        T: [0, 2, 2],
70        U: [0, 1, 1],
71        V: [0, 1, 1],
72        W: [0, 4, 4],
73        X: [0, 2, 2],
74        Y: [0, 2, 3],
75        Z: [0, 1, 1]
76      };
77
78      obj = _.mapValues(obj, args => new Cl(...args).a1().a2().a3());
79
80      console.log(JSON.stringify(obj.A))
81      console.log(JSON.stringify(obj.Z))
82
83    </script>
84</head>
85<body>
86</body>
87</html>

動作確認用サンプル: https://codepen.io/jun68ykt/pen/VwLBPBR?editors=0012

以上、参考になれば幸いです。

追記

上記のコードは、以下の2点でも修正しています。

(1) 代入演算子の使用

修正前：

javascript
1this.a = this.a + 2;

修正後：

javascript
1this.a += 2;

　　　　　

(2) インクリメント、デクリメント

修正前：

javascript
1this.a = this.a++;

javascript
1this.a = this.a--;

修正後：

javascript
1this.a ++;

javascript
1this.a --;

投稿2020/03/19 22:07

編集2020/03/19 23:28

jun68ykt

総合スコア9058

すべてのインスタンスについて、a1(), a2(), a3()をまとめて実行するメソッドを追加してみては？

例えば、初期値を与えて直ぐに、まとめて実行するメソッド（_init()）を実行する例。
（インスタンス生成時にコンストラクタ関数で処理）

javascript
1class Cl {
2  constructor(a,b,c) {
3    this.a = a;
4    this.b = b;
5    this.c = c;
6    this._init();
7  }
8  _init() {
9    this.a1()
10    this.a2()
11    this.a3()
12  }
13  a1() {
14    if (this.a==0) {
15      if (this.b==1) this.a++;
16      else if(this.b==2) this.a=this.a+2;
17    }
18  }
19  a2() {
20    if(this.a==0) {
21      if(this.c==3) this.a=this.a+3;
22      else if(this.c==4) this.a=this.a+5;
23    }
24  }
25  a3() {
26    if(this.a==0) {
27      if(this.a==4) this.a=this.a--;
28      else if(this.a==1) this.a=this.a++;
29    }
30  }
31}
32
33let [A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z] = [
34  [0,1,3],
35  [0,2,3],
36  [0,1,1],
37  [0,2,2],
38  [0,1,4],
39  [0,2,3],
40  [0,1,2],
41  [0,1,3],
42  [0,2,3],
43  [0,2,1],
44  [0,3,3],
45  [0,1,1],
46  [0,1,3],
47  [0,1,4],
48  [0,1,1],
49  [0,2,2],
50  [0,2,2],
51  [0,1,3],
52  [0,1,1],
53  [0,2,2],
54  [0,1,1],
55  [0,1,1],
56  [0,4,4],
57  [0,2,2],
58  [0,2,3],
59  [0,1,1]
60].map( arg => new Cl(...arg) );
61console.log(A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z);
62

追記）メソッドチェーンできるようにする例

メソッドチェーンは多くの javascript ライブラリが採用する手法でもあり、return this; のメソッドを持ちます。

javascript
1class Cl {
2  constructor(a,b,c) {
3    this.a = a;
4    this.b = b;
5    this.c = c;
6  }
7  a1() {
8    if (this.a==0) {
9      if (this.b==1) this.a++;
10      else if(this.b==2) this.a=this.a+2;
11    }
12    return this;
13  }
14  a2() {
15    if(this.a==0) {
16      if(this.c==3) this.a=this.a+3;
17      else if(this.c==4) this.a=this.a+5;
18    }
19    return this;
20  }
21  a3() {
22    if(this.a==0) {
23      if(this.a==4) this.a=this.a--;
24      else if(this.a==1) this.a=this.a++;
25    }
26    return this;
27  }
28
29}
30
31// 処理順を変更できる
32let A = (new Cl(0,1,3)).a1().a2().a3();
33let B = (new Cl(0,1,3)).a3().a2().a1();
34console.log( A );
35console.log( B );

投稿2020/03/19 20:54

編集2020/03/19 21:15

AkitoshiManabe

総合スコア5434

不可能ではないですけど・・・。

javascript
1for(let i = 0; i < 26; i++) {
2  calculate(eval(String.fromCharCode(0x0041 + i)));
3}
4
5function calculate(Lletter) {
6  Lletter.a1();
7  Lletter.a2();
8  Lletter.a3();
9}