使用 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="" 指令。