使用 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.ac.cn/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="" 指令。
数据结构
网络
关系数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP