What is the usage of in operator in JavaScript?-JS Tutorial-php.cn

What is the usage of in operator in JavaScript?

不言

Release： 2018-11-30 15:03:58

Original

3414 people have browsed it

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.

What is the usage of in operator in JavaScript?

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>

Copy after login

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";

Copy after login

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

Copy after login

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";

Copy after login

becomes

var fieldname = "detail";

Copy after login

Because there is no data object, the result of the in operation is false. <br/>

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

Copy after login

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

Copy after login

Instructions:

Initialize the array and assign values through the following code.

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

Copy after login

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

Copy after login

Running results<br/>

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.

Copy after login

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

Copy after login

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];

Copy after login

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!