使用 AngularJS 检查对象中是否存在键


概述

可以使用 AngularJS 检查对象中是否存在某个键。对象中的键是唯一的,不能重复。由于对象是以键值对形式存储不同数据类型的集合,其中包含字符串、数字类型的数据到单个引用变量中。要检查键是否存在,我们将使用“in”运算符,它将检查对象并返回真或假。

语法

此问题中使用的语法为:

if (key in objectName ) {
   action
} else {
   action
}
  • objectName - 这是包含键值对的对象的名称。

  • key - 这是在对象中搜索的键。

  • in - 它是“in”运算符,它迭代给定的对象名称以检查给定的键。

解释

在这种方法中,我们使用了“in”运算符来检查其是否存在。由于 AngularJs 通过在 HTML 中使用“{{ expression }}”在 HTML 中使用表达式来简化我们的工作,因此在脚本标签中,我们创建了 Angular 模块并创建了一个对象,就像我们通常创建的那样。然后,我们将输入字段中的输入存储在 ng-model 的变量“val”中。然后通过“in”运算符检查“val”;如果在对象中找到键,则返回 if 操作;否则,执行另一个操作。

<script>
   var app = angular.module("myapp", []);
   app.controller("controller", function ($scope) {
      $scope.obj = { 'obj1': 1, 'obj2': 2, 'obj3': 3 };
   
         $scope.checkKey = function () {
            var val = $scope.objKey;
            if (val in $scope.obj) {
               $scope.output = "key "+val+" exist"
            } else {
               $scope.output = "key do not exist";
            }
         }
   })
</script>

算法

  • 步骤 1 - 创建一个 angular.module 容器,传递 HTML 根元素的名称并将其存储在变量中。

  • 步骤 2 - 在控制器中传递 $scope。创建一个名为 obj 的对象,并在控制器中传递另一个作用域绑定以创建一个名为 checkKey() 的函数。

  • 步骤 3 - 将要搜索的键存储在变量中。

  • 步骤 4 - 使用“in”运算符迭代对象以查找键。

  • 步骤 5 - 如果在迭代对象时,“in”运算符找到与我们正在搜索的键相等的键,则返回 true,否则返回 false。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
   <title>How to check the existence of key in an object using AngularJS</title>
   <style>
      body{
         display: flex;
         min-height: 90vh;
         place-content: center;
         align-items: center;
         background-color: #0a0a0a;
         color: white;
      }
      .main{
         box-shadow: 0 0 8px white;
         padding: 0.2rem;
         border-radius: 5px;
         margin: 0 auto;
      }
   </style>
</head>
   <body>
      <div ng-app="myapp">
         <div ng-controller="controller" class="main">
            <p>object: {{obj}}</p>
            <input type="text" ng-model="objKey" placeholder="Enter key here">
            <button ng-click="checkKey()" style="margin-top: 5px;">Check Now</button>
            <p>{{output}}</p>
         </div>
      </div>
      <script>
         var app = angular.module("myapp", []);
         app.controller("controller", function ($scope) {
            $scope.obj = { 'obj1': 1, 'obj2': 2, 'obj3': 3 };
            $scope.checkKey = function () {
               var val = $scope.objKey;
               if (val in $scope.obj) {
                  $scope.output = "key "+val+" exist"
               } else {
                  $scope.output = "Not Exist";
               }
            }
         })
      </script>
   </body>
</html>

输出显示我们检查了“obj1”,因此将此值传递给 checkKey() 函数并在给定对象中检查键。在通过“in”运算符检查后,它返回了 true,并且如果条件已执行,则输出“键 obj1 存在”,

它表明在输入字段中输入的键在对象中未找到,因此它返回了 false,并且 else 条件已执行,输出“键不存在”。

结论

“in”运算符的返回类型是布尔值,当在对象中找到特定键时,它返回 true,否则返回 false。“in”运算符既可以在 JavaScript 中使用,也可以在 AngularJs 中使用。在前面的方法中,对象是从内部 javascript 动态呈现的,并作为表达式插入表达式内部,但为了使用这些表达式,父标签必须使用 ng-app="" 指令。

更新于:2023-03-07

2K+ 阅读量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告