使用 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+ 閱讀量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告
© . All rights reserved.