JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptで値が本物の配列かどうか判定する方法をわかりやすく解説

JavaScriptにおいて、配列(array)は厳密には「本物の配列」ではなく、JavaScriptのオブジェクトの一種です。そのため、typeof() 演算子を使って型を確認すると、結果は「object」と表示されてしまい、配列かどうかを区別することができません。


本記事では、なぜ typeof では判定できないのかを解説したうえで、Array.isArray() メソッドなどを使って正確に配列を判定する方法を紹介します。

typeof() 演算子の基本構文

typeof(operand);

パラメータ: typeof() 演算子はオペランドを受け取り、そのデータ型を文字列として返します。

次の例を見てみましょう。変数 a は配列ですが、typeof() の戻り値は「object」になります。これは、JavaScriptではすべての配列が内部的にはオブジェクトとして扱われているためです。

コード例

<html>
<body>
<script>
    var a = [1, 2, 5, "hello"];
    document.write(typeof(a));  // 配列なのに object と表示される
    document.write("</br>");
    var b = {};
    document.write(typeof(b));
</script>
</body>
</html>

出力結果

object
object

このように、typeof() では配列と通常のオブジェクトを区別できません。

Array.isArray() で配列かどうかを判定する

typeof() 演算子と異なり、Array.isArray() メソッドは、渡された引数が配列であるかどうかを直接チェックできます。

  • 引数が配列の場合 → true を返す
  • 引数が配列以外の場合 → false を返す

構文

Array.isArray(array);

次の例では、配列 a とオブジェクト b を Array.isArray() メソッドに渡しています。このメソッドはそれぞれを検査し、true と false を返します。

コード例

<html>
<body>
<script>
    var a = [1, 2, 5, "hello"];
    var res1 = Array.isArray(a);
    document.write(res1);  // true
    document.write("</br>");
    var b = {};
    var res2 = Array.isArray(b);
    document.write(res2);  // false
</script>
</body>
</html>

出力結果

true
false

その他の配列判定方法

Array.isArray() 以外にも、配列を判定する方法がいくつかあります。

1. instanceof 演算子を使う

var arr = [1, 2, 3];
console.log(arr instanceof Array); // true

instanceof 演算子でも配列を判定できますが、iframe間など実行コンテキスト(グローバルスコープ)が異なる環境では正しく動作しない場合があります。

2. Object.prototype.toString.call() を使う

console.log(Object.prototype.toString.call([1, 2, 3])); // "[object Array]"

この方法は環境に依存せず確実ですが、記述が冗長になりがちです。

まとめ

JavaScriptの配列はオブジェクトの一種のため、typeof() では配列を判定できません。配列かどうかを正確に判定したい場合は、ES5で導入された Array.isArray() を使うのが最もシンプルで確実な方法です。古いブラウザへの対応が必要な場合は、ポリフィルを利用することも検討しましょう。

  1. JavaScriptでチェックボックスが選択されているかどうかを判定する方法

    JavaScriptでチェックボックスがチェックされているかどうかを確認するには、チェックボックス要素の checked プロパティを使用します。このプロパティは、チェックボックスが選択されている場合に true を、未選択の場合に false を返します。以下の例では、チェックボックスの状態に応じてテキストの表示・非表示を切り替える実装を紹介します。サンプルコード<!DOCTYPE html> <html> <head> <h1>Displaying textBox when a checkbox is checked</h1> C

  2. JavaScriptでボタンがクリックされたかどうかを判定する方法

    JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1