JavaScript中in運算子有什麼用法-js教程-PHP中文網

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，在輸出區域顯示「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文件，將顯示如下所示的效果。

JavaScript中in運算子有什麼用法

點擊[Exec]按鈕，將顯示訊息「data中price欄位存在」,效果如下。

JavaScript中in運算子有什麼用法

結果為false的範例

#將先前的HTML檔案的exec函數部分變更為以下程式碼。

var fieldname ="price";

登入後複製

變成

var fieldname = "detail";

登入後複製

因為data物件沒有，所以in運算的結果是fale。

<br/>

  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文件，將顯示如下所示的效果。

JavaScript中in運算子有什麼用法

點選[Exec]按鈕，將顯示訊息「data中price欄位不存在」,效果如下。

JavaScript中in運算子有什麼用法

在陣列中使用in運算子

#在陣列中使用in運算子時，可以確定指定位置的陣列元素是有效還是無效（= undefined）。

我們來看具體的範例

程式碼如下

<br/>

登入後複製

說明：

初始化陣列並透過以下程式碼賦值。

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

登入後複製

它透過使用in運算子判斷陣列資料的第二個元素是否有效。此程式碼排列建立後，因為沒有特別的處理，所以他是有效的結果是true，在頁面上顯示「第二個元素有效。」的字元。

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

登入後複製

執行結果

<br/>

使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。

JavaScript中in運算子有什麼用法

點擊[Exec]按鈕，螢幕的輸出欄位中顯示訊息「第二個元素有效」。

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 = "第二个元素无效。";
    }
  }

登入後複製

透過下面的程式碼，刪除data陣列的第二個元素（第三個）。由於元素不會被delete刪除，刪除前後數組的長度不會改變。但是，由於data[2]的元素已被刪除，因此data[2]是undefined。