Home > Article > Web Front-end > What is the usage of in operator in JavaScript?

What is the usage of in operator in JavaScript?

不言Original: 2018-11-30 15:03:583389browse

What is the usage of in operator in What is the usage of in operator in JavaScript?? This article will introduce to you the usage of the in operator in What is the usage of in operator in JavaScript?. Let’s take a look at the specific content.

First let’s look at the use of the in operator on objects

Let’s look at specific examples

The code is as follows

<!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>

Instructions:

Use the following code to create an object and assign a value.

var data = new Object();
  data.id = 10;
  data.name = "曲奇饼干";
  data.price = 150;
  data.code = "PK-01";

Use the in operator to check whether the field (member) assigned to the fieldname variable exists in the object and object. In this code, it is the code to confirm whether "price" exists in the object. Because the value of price is substituted in the initialization part of the previous object, the result of the in operation becomes true, and the "price field in data" is displayed in the output area. existence" information.

var elem = document.getElementById("output");  
var fieldname = "price";  
if (fieldname in data == true) {
    elem.innerText = "data 中 " + fieldname + " 字段存在";
  } else {
    elem.innerText = "data 中" + fieldname + " 字段不存在。";
  }

Run results

Use a web browser to display the above HTML file, and the effect shown below will be displayed.

What is the usage of in operator in JavaScript?

Click the [Exec] button and the message "The price field in data exists" will be displayed. The effect is as follows.

What is the usage of in operator in JavaScript?

Example of false result

Change the exec function part of the previous HTML file to the following code.

var fieldname ="price";

becomes

var fieldname = "detail";

Because there is no data object, the result of the in operation is false.

  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 + "字段不存在。";
        }
      }

Run results

Use a web browser to display the above HTML file, and the effect shown below will be displayed.

What is the usage of in operator in JavaScript?

Click the [Exec] button and the message "The price field in data does not exist" will be displayed. The effect is as follows.

What is the usage of in operator in JavaScript?

Using the in operator in an array

When using the in operator in an array, you can determine the array element at the specified position Is it valid or invalid (= undefined).

Let’s look at a specific example

The code is as follows

<br/>

Instructions:

Initialize the array and assign values through the following code.

 var data = new Array("Penguin", "Duck", "Pigion", "Owl", "Hawk");

It determines whether the second element of the array data is valid by using the in operator. After this code arrangement is created, because there is no special processing, it is valid and the result is true, and the characters "The second element is valid." are displayed on the page.

var elem = document.getElementById("output");  
if (2 in data == true) {
    elem.innerText = "第二个元素有效。";
  } else {
    elem.innerText = "第二个元素无效。";
  }

Running results

Use a web browser to display the above HTML file. The effect shown below will be displayed.

What is the usage of in operator in JavaScript?

Click the [Exec] button and the message "The second element is valid" is displayed in the output field of the screen.

What is the usage of in operator in JavaScript?

Code when the element becomes invalid

Change the above HTML file to the following code.

Description:

The point of change is to add code to remove the elements in the following exec function.

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

Through the following code, delete the second element (third) of the data array. Since elements will not be deleted by delete, the length of the array will not change before and after deletion. However, since the elements of data[2] have been deleted, data[2] is undefined.

delete data[2];

Running results

Use a web browser to display the above HTML file. The effect shown below will be displayed.

What is the usage of in operator in JavaScript?

Click the [Exec] button. Since data[2] has been deleted using the delete command, the message "The second element is invalid" will be displayed in the output field.

What is the usage of in operator in JavaScript?

The above is the detailed content of What is the usage of in operator in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html 运算符 delete undefined 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to methods of implementing classes in JavaScript using class syntaxNext article：Introduction to methods of implementing classes in JavaScript using class syntax

See more

What is the usage of in operator in JavaScript?

Related articles