首页 > js教程 > 正文

JavaScript中in运算符有什么用法

原创 2018-11-30 15:03:58 0 685
赞助会员专享特权
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中文网其它相关文章!

  • 相关标签:in运算符
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 浅谈href=#与href=javascript:void(0)的区别_经验交流
  • javascript代码规范小结_基础教程
  • JAVASCRIPT IE 与 FF 中兼容写法记录_经验交流
  • javascript 获取特定的 CSS属性值_经验交流
  • javascript中in运算符用法分析_javascript技巧
  • Javascript学习笔记-详解in运算符_javascript技巧
  • python的三目运算符和not in运算符使用示例
  • JavaScript中in运算符有什么用法
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • Javascript 基础教程 Javascript 基础教程
  • javascript初级教程 javascript初级教程
  • JavaScript教程 JavaScript教程
  • JavaScript 入门教程 JavaScript 入门教程
  • 相关视频章节