首頁 > web前端 > js教程 > 主體

JavaScript中in運算子有什麼用法

不言
發布: 2018-11-30 15:03:58
原創
3389 人瀏覽過

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。

delete data[2];
登入後複製

執行結果

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

JavaScript中in運算子有什麼用法

按一下[Exec]按鈕,由於已使用delete指令刪除了data[2],因此輸出欄位中將顯示「第二個元素無效」的資訊。

JavaScript中in運算子有什麼用法

以上是JavaScript中in運算子有什麼用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板