争怎路由网/网站教程/内容

JavaScript中in运算符有什么用法

网站教程2024-04-29 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
JavaScript中in运算符有什么用法呢？本篇文章就来给大家介绍关于JavaScript中in运算符的用法，下面我们来看具体内容。

JavaScript

首先我们来看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文件，将显示如下所示的效果。
2345截图20181130141434.png
单击[Exec]按钮，将显示消息“data中price字段存在”,效果如下。
2345截图20181130141657.png
结果为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文件，将显示如下所示的效果。
2345截图20181130141434.png
单击[Exec]按钮，将显示消息“data中price字段不存在”,效果如下。
2345截图20181130142631.png
在数组中使用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文件。将显示如下所示的效果。
2345截图20181130141434.png
单击[Exec]按钮，屏幕的输出字段中显示消息“第二个元素有效”。
2345截图20181130144232.png
元素变为无效时的代码
将上面的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文件。将显示如下所示的效果。
2345截图20181130141434.png
单击[Exec]按钮，由于已使用delete命令删除了data[2]，因此输出字段中将显示“第二个元素无效”的信息。
2345截图20181130144546.png
以上就是JavaScript中in运算符有什么用法的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:JavaScript中in运算符有啥用法
 
相关阅读