JavaScript での in演算子について紹介します。
オブジェクトでの in 演算子の利用
オブジェクトでin演算子を利用すると、オブジェクトにフィールド(メンバ変数)が存在するか判定できます。
プログラム例
下記のHTMLファイルを作成します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function exec() {
var data = new Object();
data.id = 10;
data.name = "ぺんぎんクッキー";
data.price = 150;
data.code = "PK-01";
var elem = document.getElementById("output");
var fieldname = "price";
if (fieldname in data == true) {
elem.innerText = "data に " + fieldname + " フィールドは存在します。";
} else {
elem.innerText = "data に " + fieldname + " フィールドは存在しません。";
}
}
</script>
</head>
<body>
<input type="button" value="Exec" onclick="exec();" />
<div id="output">出力</div>
</body>
</html>
解説
下記コードによりオブジェクトの作成とメンバ値の代入を実施します。
var data = new Object();
data.id = 10;
data.name = "ぺんぎんクッキー";
data.price = 150;
data.code = "PK-01";
fieldname 変数に代入された値のフィールド(メンバ)がオブジェとに存在するかを in 演算子で確認します。今回のコードでは、"price"メンバがオブジェクトに存在するかを確認するコードになっており、先のオブジェクトの初期化の部分で price メンバへの値の代入をしているため、 in 演算の結果は true となり、出力エリアに「data に price フィールドは存在します。」のメッセージが表示されます。
var elem = document.getElementById("output");
var fieldname = "price";
if (fieldname in data == true) {
elem.innerText = "data に " + fieldname + " フィールドは存在します。";
} else {
elem.innerText = "data に " + fieldname + " フィールドは存在しません。";
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Exec]ボタンをクリックします。「data に price フィールドは存在します。」のメッセージが表示されます。
結果が false になる例
先のHTMLファイルのexec 関数部分を下記のコードに変更します。
var fieldname = "price";
を
var fieldname = "detail";
に変更したものになります。detail メンバは data オブジェクトには用意していませんので、in演算の結果はfalseとなります。
function exec() {
var data = new Object();
data.id = 10;
data.name = "ぺんぎんクッキー";
data.price = 150;
data.code = "PK-01";
var elem = document.getElementById("output");
var fieldname = "detail";
if (fieldname in data == true) {
elem.innerText = "data に " + fieldname + " フィールドは存在します。";
} else {
elem.innerText = "data に " + fieldname + " フィールドは存在しません。";
}
}
変更したHTMLファイルをWebブラウザで表示します。
[Exec]ボタンをクリックします。「data に detail フィールドは存在しません。」のメッセージが表示されます。
配列での in 演算子の利用
配列でin演算子を利用すると、指定した位置の配列の要素が有効か無効(=undefined)化を判定できます。
プログラム例
下記のHTMLファイルを作成します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function exec() {
var data = new Array("Penguin", "Duck", "Pigion", "Owl", "Hawk");
var elem = document.getElementById("output");
if (2 in data == true) {
elem.innerText = "2番目の要素は有効です。";
} else {
elem.innerText = "2番目の要素は無効です。";
}
}
</script>
</head>
<body>
<input type="button" value="Exec" onclick="exec();"/>
<div id="output">出力</div>
</body>
</html>
解説
下記コードにより配列の初期化と値の代入を実施します。
var data = new Array("Penguin", "Duck", "Pigion", "Owl", "Hawk");
配列data の2番目の要素を in演算子を用いて有効か判定します。今回のコードでは配列作成後、特に処理をしていないため2番目の配列は有効であり、"2 in data" の式の結果はtrueとなり、画面には「2番目の要素は有効です。」の文字列が表示されます。
var elem = document.getElementById("output");
if (2 in data == true) {
elem.innerText = "2番目の要素は有効です。";
} else {
elem.innerText = "2番目の要素は無効です。";
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Exec]ボタンをクリックします。画面の出力欄に「2番目の要素は有効です。」のメッセージが表示されます。
要素が無効になる場合のコード
先のHTMLファイルを下記のコードに変更します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function exec() {
var data = new Array("Penguin", "Duck", "Pigion", "Owl", "Hawk");
delete data[2];
var elem = document.getElementById("output");
if (2 in data == true) {
elem.innerText = "2番目の要素は有効です。";
} else {
elem.innerText = "2番目の要素は無効です。";
}
}
</script>
</head>
<body>
<input type="button" value="Exec" onclick="exec();"/>
<div id="output">出力</div>
</body>
</html>
解説
変更点は下記のexec関数内に要素を削除するコードの追加になります。
function exec() {
var data = new Array("Penguin", "Duck", "Pigion", "Owl", "Hawk");
delete data[2];
var elem = document.getElementById("output");
if (2 in data == true) {
elem.innerText = "2番目の要素は有効です。";
} else {
elem.innerText = "2番目の要素は無効です。";
}
}
下記のコードにより、data配列の2の要素(3番目)を削除しています。deleteによる削除では要素が詰められることはなく、配列の長さは削除前後では変わりません。ただしdata[2]の要素は削除されているため、data[2]はundefined になります。
delete data[2];
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Exec]ボタンをクリックします。delete コマンドでdata[2]が削除されているため、出力欄に「2番目の要素は無効です。」のメッセージが表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-11-14
作成日: 2017-08-18
