cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript中in运算符有什么用法

JavaScript中in运算符有什么用法

不言
不言asal
2018-11-30 15:03:583394semak imbas

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）。

我们来看具体的示例

代码如下

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

运行结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

2345截图20181130141434.png

单击[Exec]按钮，屏幕的输出字段中显示消息“第二个元素有效”。

2345截图20181130144232.png

元素变为无效时的代码

将上面的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

Atas ialah kandungan terperinci JavaScript中in运算符有什么用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 运算符 delete undefined 对象
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用class语法在JavaScript中实现类的方法介绍Artikel seterusnya：JavaScript实现访问对象的属性（获取/设置属性值）

Artikel berkaitan

Lihat lagi