JavaScript での in 演算子の使用法は何ですか?-jsチュートリアル-php.cn

JavaScript での in 演算子の使用法は何ですか?

不言

リリース： 2018-11-30 15:03:58

オリジナル

3401 人が閲覧しました

JavaScript での in 演算子の使用法は何ですか? での in 演算子の使用法は何ですか?この記事ではJavaScript での in 演算子の使用法は何ですか?におけるin演算子の使い方を紹介します。具体的な内容を見ていきましょう。

JavaScript での in 演算子の使用法は何ですか?

#まず、オブジェクトに対する in 演算子の使用法を見てみましょう

具体的な例を見てみましょう

コードは次のとおりです

<!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";

ログイン後にコピー

in 演算子を使用して、fieldname 変数に割り当てられたフィールド (メンバー) がオブジェクトとオブジェクトに存在するかどうかを確認します。このコードでは、オブジェクトに「price」が存在するかどうかを確認するコードです。先のオブジェクトの初期化部分にpriceの値が代入されているため、in演算の結果がtrueとなり、「price」フィールドが出力領域には「データ」の情報が表示されます。

var elem = document.getElementById("output");  
var fieldname = "price";  
if (fieldname in data == true) {
    elem.innerText = "data 中 " + fieldname + " 字段存在";
  } else {
    elem.innerText = "data 中" + fieldname + " 字段不存在。";
  }

ログイン後にコピー

実行結果

Webブラウザで上記のHTMLファイルを表示すると、以下のような効果が表示されます。

JavaScript での in 演算子の使用法は何ですか?

[実行]ボタンをクリックすると、「データに価格フィールドが存在します」というメッセージが表示されます。

JavaScript での in 演算子の使用法は何ですか?

#誤った結果の例

前の HTML ファイルの exec 関数の部分を次のコードに変更します。

var fieldname ="price";

ログイン後にコピー

は

var fieldname = "detail";

ログイン後にコピー

になります。データオブジェクトがないため、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 + "字段不存在。";
        }
      }

ログイン後にコピー

<br/>実行結果

Webブラウザを使用して上記のHTMLファイルを表示すると、以下のような効果が表示されます。

JavaScript での in 演算子の使用法は何ですか? [実行]ボタンをクリックすると、「データ内の価格フィールドが存在しません」というメッセージが表示されます。

JavaScript での in 演算子の使用法は何ですか?

配列での in 演算子の使用

配列で in 演算子を使用する場合、次の場所で配列要素を決定できます。指定した位置が有効か無効(=未定義)か。

具体的な例を見てみましょう

コードは次のとおりです

<br/>

ログイン後にコピー

手順:

次のコードを通じて配列を初期化し、値を割り当てます。

 var data = new Array("Penguin", "Duck", "Pigion", "Owl", "Hawk");

ログイン後にコピー

in 演算子を使用して、配列データの 2 番目の要素が有効かどうかを判断します。このコード配置を作成した後は、特別な処理を行っていないため有効となり、結果は true となり、ページ上には「2 番目の要素は有効です」という文字が表示されます。

var elem = document.getElementById("output");  
if (2 in data == true) {
    elem.innerText = "第二个元素有效。";
  } else {
    elem.innerText = "第二个元素无效。";
  }

ログイン後にコピー

実行結果

<br/>Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。

JavaScript での in 演算子の使用法は何ですか? [実行]ボタンをクリックすると、画面の出力欄に「2番目の要素は有効です」というメッセージが表示されます。

JavaScript での in 演算子の使用法は何ですか? #要素が無効になった場合のコード

上記の 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 = "第二个元素有效。";
    } else {
      elem.innerText = "第二个元素无效。";
    }
  }

ログイン後にコピー

次のコードにより、データ配列の 2 番目の要素 (3 番目) を削除します。 deleteでは要素は削除されないため、削除前後で配列の長さは変わりません。ただし、data[2]の要素が削除されているため、data[2]は未定義となります。