溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 + " 字段不存在。";
}運行結果
使用Web瀏覽器顯示上述HTML文件，將顯示如下所示的效果。
單擊[Exec]按鈕，將顯示消息“data中price字段存在”,效果如下。
結果為false的示例
將以前的HTML文件的exec函數部分更改為以下代碼。
var fieldname ="price";
變為
var fieldname = "detail";
因為是data對象沒有，所以in運算的結果是fale。
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 + "字段不存在。";
}
}運行結果
使用Web瀏覽器顯示上述HTML文件，將顯示如下所示的效果。
單擊[Exec]按鈕，將顯示消息“data中price字段不存在”,效果如下。
在數組中使用in運算符
在數組中使用in運算符時，可以確定指定位置的數組元素是有效還是無效（= undefined）。
我們來看具體的示例
代碼如下
說明：
初始化數組并通過以下代碼賦值。
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 = "第二個元素無效。";
}運行結果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
單擊[Exec]按鈕，屏幕的輸出字段中顯示消息“第二個元素有效”。
元素變為無效時的代碼
將上面的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 = "第二個元素有效。";
} else {
elem.innerText = "第二個元素無效。";
}
}
</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 = "第二個元素有效。";
} else {
elem.innerText = "第二個元素無效。";
}
}通過下面的代碼，刪除data數組的第二個元素（第三個）。由于元素不會被delete刪除，刪除前后數組的長度不會改變。但是，由于data[2]的元素已被刪除，因此data[2]是undefined。
delete data[2];
運行結果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
單擊[Exec]按鈕，由于已使用delete命令刪除了data[2]，因此輸出字段中將顯示“第二個元素無效”的信息。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
