解释 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中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

jQuery检查日期是否有效Mar 01, 2025 am 08:51 AM

简单JavaScript函数用于检查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //测试 var

jQuery获取元素填充/保证金Mar 01, 2025 am 08:53 AM

本文探讨如何使用 jQuery 获取和设置 DOM 元素的内边距和外边距值，特别是元素外边距和内边距的具体位置。虽然可以使用 CSS 设置元素的内边距和外边距，但获取准确的值可能会比较棘手。 // 设置 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能会认为这段代码很

10个jQuery手风琴选项卡Mar 01, 2025 am 01:34 AM

本文探讨了十个特殊的jQuery选项卡和手风琴。选项卡和手风琴之间的关键区别在于其内容面板的显示和隐藏方式。让我们深入研究这十个示例。相关文章：10个jQuery选项卡插件

10值得检查jQuery插件Mar 01, 2025 am 01:29 AM

发现十个杰出的jQuery插件，以提升您的网站的活力和视觉吸引力！这个精选的收藏品提供了不同的功能，从图像动画到交互式画廊。让我们探索这些强大的工具：相关文章： 1

HTTP与节点和HTTP-Console调试Mar 01, 2025 am 01:37 AM

HTTP-Console是一个节点模块，可为您提供用于执行HTTP命令的命令行接口。不管您是否针对Web服务器，Web Serv

自定义Google搜索API设置教程Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中，提供了比标准WordPress主题搜索功能更精致的搜索体验。令人惊讶的是简单！您将能够将搜索限制为Y

jQuery添加卷轴到DivMar 01, 2025 am 01:30 AM

当div内容超出容器元素区域时，以下jQuery代码片段可用于添加滚动条。 (无演示，请直接复制到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c

See all articles