【js】配列の内容で処理を分岐させたい

Question

5つの文字列を入れた配列があり、その並び順ごとに処理を分岐させたいのですがうまくいきません。
おそらく基本的な何かを理解していないのだと思いますが、ご教授いただけますと幸いです。

switch( Array ) {
   case ["F","F","T","T","T"]:
   console.log('Aの処理');
   break;
     
     
   case ["F","T","T","T","T"]:
   console.log('Bの処理');
   break;
     
   }

上記でやりたいことが伝わるでしょうか。
FFFFFならAの処理、
TFFFFならBの処理、
TTFFFならCの処理…と、すべての組み合わせで処理を変えたいのです。

Arrayに５つの文字列を入れるところまではできているのですが…。
よろしくお願いいたします。

Answer 1

こんにちは。

おそらく基本的な何かを理解していないのだと思いますが、

とおっしゃっている、"基本的な何か" とは以下の2点かと思われます。

　(1) javascript の switch文で、 switch(x ) で与える x と各 case y : の y とは同値演算子 ===で比較されること。（つまり x === y が true になる case y : が選ばれる。）

(2) 二つのArrayオブジェクト a と b があり、両者が過不足なく同じ要素を同じ順番で含んでいても、a と b が別個のオブジェクトであれば、 a === b は false になること

上記の(1) については、以下に記載があります。

ECMAScript® Language Specification: 12.11 The switch Statement

If input is equal to clauseSelector as defined by the === operator, then …

(2) については、以下のようにして確かめられます。

$ node -v
v10.8.0
$ node
> var a = ["T","F","T","F","T"]
undefined
> var b = ["T","F","T","F","T"]
undefined
> a === b
false
>

　
2つの配列a と bが、同じ要素を同じ順番で過不足なく持っている、すなわち「aとb は内容が同じ配列である」という判定を、どのようなコードで書けばよいか？ という問題は、以下の投稿

• stackoverflow: How to compare arrays in JavaScript?

からも分かるように、様々な案が出てくるテーマでもあります。
ですが、上記のstackoverflowの質問への回答で、一番得票数が多い Array.prototype.equalsを自作するという案だと、MikiSFさんのご質問にあるswitch 〜 case を使うことができません。

MikiSFさんのご質問の解法として、あくまでswitch 〜 caseを使うことにするならば、対象とする配列の要素を結合した文字列をswitchの対象にするのが分かり易い方法かなと思います。つまり、["F","F","T","T","T"] であれば、"FFTTT" をswitchの対象とします。以下はコード例です。

const sampleAry = ["F","F","T","T","T"];

switch (sampleAry.join('')) {
    case 'FFTTT':
        console.log('Aの処理');
        break;
    case 'FTTTT':
        console.log('Bの処理');
        break;
    default:
        console.log('その他の処理');
        break;
}

上記を実行すると、Aの処理と表示されます。

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

---

追記

配列要素の "T" を"1"、"F"を"0"と置き換え、要素を結合した文字列を作ると、例えば["T","F","T","F","T"] は "10101" となり、さらに"10101" を2進数と考えれば、 10進数としては 21 です。このように "T"か "F" を持つ配列を対応する10進数に変換した値で switch させる手もあるかと思いました。

具体的なコードとしては、少しトリッキーかもしれませんが、例えば以下のように、Array.prototype.valueOfメソッドをオーバーライドし対応する10進数を返すようにしておくと、配列の変数sampleAry があったときに、+を変数の前に置いて +sampleAry とするとvalueOfが呼ばれて10進数に変換されます。

Array.prototype.valueOf = function() {
    return parseInt(this.map(e => e === 'T' ? '1':'0').join(''), 2);
};

const sampleAry = ["T","F","T","F","T"]; // 2進数の10101を表すものと考えれば、10進数だと21

switch(+sampleAry) {
    case 0:
        console.log('["F","F","F","F","F"] の場合の処理');
        break;
    case 1:
        console.log('["F","F","F","F","T"] の場合の処理');
        break;
    case 2:
        console.log('["F","F","F","T","F"] の場合の処理');
        break;
    // ・・・
    case 21:
        console.log('["T","F","T","F","T"] の場合の処理');
        break;
    // ・・・
    case 31:
        console.log('["T","T","T","T","T"] の場合の処理');
        break;
    default:
        break;
}

上記を実行すると、case 21: に該当して、["T","F","T","F","T"] の場合の処理 と表示されます。(同じコードを、https://jsfiddle.net/jun68ykt/kose0cqu/19/ にも上げておきました。）

---

以下、蛇足です。

質問者のMikiSFさんから

switchにこだわる理由があるわけではないので、他の方法も調べてみます！

とのコメントを頂きましたので、以下を補足します。

２つの配列が同じ内容である判定関数を自作せずに、配列などの操作でよく使われるライブラリ Lodash を利用する手もあります。これの _.isEqual(value, other)を使ったコードを以下に上げておきました。

https://jsfiddle.net/jun68ykt/jqp63Lum/6/

ご参考まで。

---

何度もお節介すみません。

switch 〜 caseを使うにせよ、if 〜 else ifを使うにせよ、該当する処理にたどりつくのに、caseあるいはifの数に比例した時間がかかります。（計算量のオーダーが O(n) である、と言ったります。 ) 言い換えると、FFFFFからTTTTTまですべてのケースは２の５乗で32個あり、これらのそれぞれに case または if があるとすると、最悪の場合は３２回の比較をへて、ようやく該当する処理が決まるということがあり得ます。
これを避けたいので、私がもし業務上で、このご質問と同様の課題に遭遇したら、おそらく以下のコードをベースにするでしょう。

const operations = {
  FFFFF() { console.log('[F,F,F,F,F]の処理'); },
  FFFFT() { console.log('[F,F,F,F,T]の処理'); },
  /* ・・・ */
  TFTFT() { console.log('[T,F,T,F,T]の処理'); },
  /* ・・・ */
  TTTTT() { console.log('[T,T,T,T,T]の処理'); }, 
};

const sampleAry = ["T","F","T","F","T"];

operations[sampleAry.join('')]();　　// => "[T,F,T,F,T]の処理" と出力される。

※ https://jsfiddle.net/jun68ykt/1bLm7eyd/14/ にも上げておきました。

これに、エラー処理などを加えたり適宜リファクタして、安全かつ最適化されたコードに仕上げていくだろうと思います。

Comments

[MikiSF]

大変わかりやすく、かつ詳細に教えていただいてありがとうございました！
教えていただいた方法で一旦やってみますが、switchにこだわる理由があるわけではないので、他の方法も調べてみます！

[jun68ykt]

> switchにこだわる理由があるわけではないので、他の方法も調べてみます！
なるほどです。
switch の他にどういう書き方が良いか、また迷ったら、再度ご質問されるとよいでしょう。

[jun68ykt]

オマケというか蛇足ですが、Lodash のisEqualを使うコードを回答に追記しました。「ふーん。そんなのがあるんだ」程度に眺めてもらえればと思います。

[MikiSF]

ありがとうございます！
こちらも詳しく見てみます。

[jun68ykt]

ご返信ありがとうございます。回答にもうひとつお節介を追加させて頂きました。自分が仕事上で書くならこのコードをベースにブラッシュアップしていくだろうというものです。

[MikiSF]

なるほどです…。
確かに、動作を実現するのに精一杯で、軽くしていく、安全にしていく、というところまでなかなか至れていないです…。
丁寧にアドバイス頂き本当に助かります。
ありがとうございます！

[think49]

> 最悪の場合は３２回の比較をへて、ようやく該当する処理が決まるということがあり得ます。
Array#join() も32回分の演算コストがかかるので、配列を廃止して、String型の値 'TFTFT' でデータを持っておく方法も…。
あるいは、フラグがNパターン -> N進数(2bitならビット演算がおそらく、最速)
配列の利点は、1文字では足りず、可変長データを収められる性質にあります。

[jun68ykt]

※ ここに書いた当方のコメントを消去させて頂きました。お見苦しい点、誠に申し訳ありません。

[think49]

一応、実装例は回答で触れたリンク先にあります。
https://teratail.com/questions/84834

> Array.prototype.valueOf
今更ですが、今気が付いたので一言。
フラグ管理の為だけに、全体に影響するビルトインオブジェクトを拡張するのはお勧めしません。
予め、プリミティブ化しやすいように準備するならば、CustomArrayをコンストラクタ定義しておき、そちらで自由に拡張させる方が安全かと。

[jun68ykt]

※ ここに書いた当方のコメントを消去させて頂きました。重ね重ね、お見苦しい点、誠に申し訳ありません。

[think49]

副題でもコードが適用される事はあります。
そしてそれが初心者であった場合、「未知の」エラーを誘発させるリスクがあります。
「既知の」リスクにする為に、私は指摘しました。
jun68yktさん自身は勿論、よくご存知と思いますが、質問者は違うと思います。

[think49]

> 質問の本題から外れるコードを余分に加えて肥大化させることは、
私としては、「リスク説明なし」が懸念で、コードを追記してもらう意図はありませんでした。
代案を示したのは、「否定だけでは前向きではない」という考えからで、代案はあくまで個人的な見解です。

Answer 2

2つの配列を受け取ってその内容が一致しているかを判定する関数があれば、「5つの文字列を入れた配列の並び順」ごとに処理を分岐させることができます。
それさえ出来れば、あとは各パターンごとに処理を書いていくだけです。

「2つの配列を受け取ってその内容が一致しているかを判定する関数」は自前で作ってしまいましょう。

var hoge = ["F","F","T","T","T"]; // 5つの文字列を入れた配列

// 各パターンごとに処理
if (isEqualArray(hoge, ["F","F","T","T","T"])) {
	console.log('Aの処理');
} else if (isEqualArray(hoge, ["F","T","T","T","T"])) {
	console.log('Bの処理');
} else {
	console.log('AでもBでもない処理');
}

// 2つの配列を受け取ってその内容が一致しているかを判定する関数
function isEqualArray(array1, array2) {
	if (array1.length != array2.length) { return false; }
	
	for (var i=0; i<array1.length; i++) {
		if (array1[i] != array2[i]) { return false; }
	}
	
	return true;
}

Comments

[MikiSF]

ありがとうございます！
シンプルでわかりやすかったです！
参考にさせていただきます！

Answer 3

Reference型

• JavaScript Primitive型 Reference型 - Google 検索

オブジェクトはReference型なので、

console.log(["F","F","T","T","T"] === ["F","F","T","T","T"]); // false

JSON.stringify()

配列の要素値がPrimitive型なら、

'use strcit';
function sample (array) {
  switch (JSON.stringify(array)) {
    case '["F","F","T","T","T"]':
      console.log('処理A');
      break;
    case '["F","T","T","T","T"]':
      console.log('処理B');
      break;
  }
}

sample(["F","F","T","T","T"]);
sample(["F","T","T","T","T"]);

フラグ管理

• C# - 適切な分岐処理について(84834)｜teratail

Re: MikiSF さん

Comments

[MikiSF]

ありがとうございます！
ちょっと私には難しいですががんばって勉強します！

Answer 4

配列がフラグ管理で T と F が true , false なら、ビット演算を学習すると良さげです。

Comments

[MikiSF]

そうなのですね！
調べてみます！
ありがとうございます！

Answer 5

配列は使えません。
配列の要素を全部つないで、５文字の文字列にしましょう。

Comments

[MikiSF]

ありがとうございます！