解释 JavaScript 中'in”运算符的用途-js教程-PHP中文网

首页

web前端

js教程

解释 JavaScript 中'in”运算符的用途

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 02:25 PM

解释 JavaScript 中“in”运算符的用途

本教程将教授 JavaScript 中的“in”运算符。 JavaScript中有很多可用的运算符，例如用于执行数学运算的算术运算符、赋值运算符、相等运算符等。“in”运算符也是其中之一，我们可以使用它来从对象中查找属性。

在开始之前，让我问你一个问题。在使用 JavaScript 编码时，您是否曾经需要检查对象属性是否存在？如果有，你是如何处理的？答案很简单，您可以使用“in”运算符，它根据对象是否包含该属性返回布尔值。

使用“in”运算符检查对象属性是否存在

“in”运算符的工作方式与其他运算符相同。它需要两个操作数。对象属性作为左操作数，对象本身作为右操作数。

语法

您可以按照以下语法使用“in”运算符检查对象属性是否存在。

let object = {
   property: value,
}
let ifExist = "property" in object;

在上面的语法中，您可以看到对象如何包含属性及其值。值可以是数字、字符串、布尔值等类型。ifExist 变量根据属性是否存在于对象中存储 true 或 false 布尔值。

示例 1

在此示例中，我们创建了包含不同属性和值的对象。此外，该对象还包含方法。之后，我们使用“in”运算符来检查对象中是否存在属性。

在示例输出中，用户可以观察到“in”运算符对于 property1 和 property4 返回 true，但对于 property7 返回 false，因为它不存在于对象中。

<html>
<body>
   <h3 id="Using-the-i-in-operator-i-to-check-for-the-existence-of-the-property-in-the-object">Using the <i> in operator </i> to check for the existence of the property in the object.</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      let object = {
         property1: "value",
         property2: 20,
         property3: false,
         property4: () => {
            console.log("This is a sample function.");
         },
      };
      let ifExist = "property1" in object;
      output.innerHTML +=
         "The property1 exist in the object " + ifExist + "<br/>";
      ifExist = "property4" in object;
      output.innerHTML +=
         "The property4 exist in the object " + ifExist + "<br/>";
      ifExist = "property7" in object;
      output.innerHTML +=
         "The property7 exist in the object " + ifExist + "<br/>";
   </script>
</body>
</html>

在 JavaScript 中，每个对象都有其原型。原型链对象实际上包含了对象中的一些方法和属性。然而，我们还没有将这些属性添加到对象中，但 JavaScript 默认添加了它们。例如，数组和字符串原型包含“length”属性，对象原型包含“toString”属性。

示例 2

在下面的示例中，我们创建了类并在其中定义了构造函数来初始化对象属性。此外，我们还在表类中定义了 getSize() 方法。

之后，我们使用构造函数创建了表类的对象。我们使用“in”运算符来检查该属性是否存在于对象原型中。在 JavaScript 中，每个对象的原型中都包含 toString() 方法，这就是它返回 true 的原因。

<html>
<body>
   <h3 id="Using-the-i-in-operator-i-to-check-for-the-existence-of-the-property-in-the-object-prototype">Using the <i> in operator </i> to check for the existence of the property in the object prototype</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // creating the table class
      class table {
         //  constructor function
         constructor(prop1, prop2, prop3) {
            this.prop1 = prop1;
            this.prop2 = prop2;
            this.prop3 = prop3;
         }
         getSize() {
            return 10;
         }
      }
      //  creating the object of the table class
      let tableObjet = new table("blue", "wood", "four drawers");
      // check if a property exists in the object
      let ifExist = "prop1" in tableObjet;
      output.innerHTML +=
         "The prop1 exists in the constructor properties of tableObject: " +
         ifExist + "</br>";
      // some properties also exist in the object prototype chain.
      ifExist = "length" in tableObjet;
      output.innerHTML +=
      "The length property exists in the constructor properties of tableObject: " 
         + ifExist + "</br>";
      ifExist = "toString" in tableObjet;
      output.innerHTML +=
         "The toString Property exists in the constructor properties of tableObject: " 
         + ifExist + "</br>";
   </script>
</body>
</html>

使用 in 运算符检查数组中是否存在索引

我们只能对对象使用“in”运算符。数组也是对象的一个实例。用户可以使用instanceOf或typeOf运算符来检查数组类型，它返回“Object”。因此，数组中的键是数组索引，键的值是数组值。

这里，我们可以使用“in”运算符来检查数组中是否存在索引。如果存在，我们就可以访问数组值以避免 arrayOutOfBound 异常。

语法

用户可以按照以下语法检查数组中是否存在索引 -

let array = [10, 20, 30];
let ifExist = 2 in array;

在上面的语法中，运算符前面写的2是数组索引，而不是值。

示例 3

在下面的示例中，我们创建了数组并使用 typeOf 运算符检查数组的类型，该运算符返回“Object”。

此外，我们还使用了“in”运算符来检查数组原型中是否存在数组索引和长度属性。

<html>
<body>
   <h2 id="Using-the-i-in-operator-i-to-check-whether-the-array-index-exists">Using the <i> in operator </i> to check whether the array index exists.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      let array = [10, 20, "Hello", "Hi", true];
      output.innerHTML += "The type of the array is " + typeof array + "<br/>";
      let ifExist = 2 in array;
      output.innerHTML +=
         "The index 2 exist in the array is " + ifExist + "<br/>";
      ifExist = 7 in array;
      output.innerHTML +=
         "The index 7 exist in the array is " + ifExist + "<br/>";
      ifExist = "length" in array;
      output.innerHTML +=
         "The length property exist in the array is " + ifExist + "<br/>";
   </script>
</body>
</html>

本教程教我们如何对对象和数组使用“in”运算符。在对象中，用户可以检查属性是否存在，在数组中，用户可以使用“in”运算符检查索引是否存在。

以上是解释 JavaScript 中'in”运算符的用途的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。