What is the usage of in operator in JavaScript?

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

      
   
输出
  

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.

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

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.

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

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

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.

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

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.

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.

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!