使用物件的屬性時如何拋出錯誤？-js教程-PHP中文網

使用物件的屬性時如何拋出錯誤？

在 JavaScript 中，物件包含鍵值格式的屬性。我們可以透過以物件為引用，使用屬性名稱來存取物件的任何屬性。

有時，我們嘗試存取物件中不存在的物件屬性。在這種情況下，我們會得到未定義的值。讓我們透過下面的例子來理解它。

範例（存取物件屬性）

在下面的範例中，我們建立了物件並添加了一些屬性。此外，我們還添加了一些嵌套屬性。之後，我們嘗試存取“prop5”屬性，它是“prop4”的嵌套屬性。使用者可以在輸出中觀察其值。

此外，我們嘗試存取「prop6」屬性，但物件傳回未定義，因為它不存在於物件中。

<html>
<body>
   <h2>Accessing the object properties in JavaScript</h2>
   <div id="content"> </div>
   <script>
      let content = document.getElementById('content');
      let object = {
         name: 'Shubham',
         prop1: 'Hello',
         prop2: 'World',
         prop3: '!',
         prop4: {
            prop5: 'This is a nested object.'
         }
      }
      content.innerHTML = "The value of prop5 is : " + object.prop4.prop5;
      content.innerHTML += "<br> The value of prop3 is : " + object.prop3;
      content.innerHTML += "<br> The value of prop6 is : " + object.prop6;
   </script>
</body>
</html>

登入後複製

因此，每當物件中不存在某個屬性時，我們就可以拋出一個錯誤，指出該屬性在物件中不存在。

在這裡，我們將學習一種在存取物件屬性時拋出錯誤的不同方法。

使用「in」運算子在存取物件屬性時引發錯誤

「in」運算子允許我們檢查物件中是否存在屬性。我們可以使用鍵作為「in」運算子的左操作數，使用物件作為右操作數。

我們可以檢查物件中是否存在屬性。如果沒有，我們可以拋出一個錯誤。

文法

使用者可以依照下列語法使用「in」運算子在存取物件屬性時拋出錯誤。

if(key in obj){
}else {
   // throw error
}

登入後複製

在上面的語法中，鍵是一個屬性，用於檢查它是否存在於物件中。

範例

在下面的範例中，我們建立了 table_obj 物件並新增了一些鍵值對。名為 get_property_value() 的函數會檢查物件中是否存在屬性。如果該屬性存在於物件中，則傳回該屬性值。否則，它會拋出錯誤。

在 try-catch 區塊中，我們捕獲了一個錯誤。在輸出中，使用者可以觀察到 get_property_value() 函數針對「table_price1」屬性拋出錯誤，而不是傳回該屬性的未定義值。

<html>
<body>
   <h3>Using the <i> in </i> operator  to throw an error while accessing the object properties in JavaScript</h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      // creating an object for table details
      let table_obj = {
         table_name: "table1",
         table_type: "table",
         table_size: "10x10",
         table_color: "black",
         table_price: 1000
      }
      function get_property_value(key) {
         if (key in table_obj) {
            return table_obj[key];
         } else {
            throw new Error(key + " is not a valid property name.");
         }
      }
      try {
         content.innerHTML += "table_name : - " + get_property_value("table_name");
         content.innerHTML += "<br>" + get_property_value("table_price1");
      } catch (e) {
         content.innerHTML += "<br>" + e.message;
      }
   </script>
</body>
</html>

登入後複製

使用defineProperty()方法存取物件屬性時拋出錯誤

Javascript的defineProperty()方法允許我們為物件添加屬性。我們可以為拋出錯誤的屬性描述符新增 getter。

文法

使用者可以按照下面的語法使用defineProperty()方法在存取物件屬性時拋出錯誤。

Object.defineProperty(obj_name, 'prop_name', {
   get: () => {
      // throw an error
   }
});

登入後複製

在上面的語法中，我們將描述子作為defineProperty()方法的第三個參數傳遞。我們可以從物件的特定屬性的描述符函數中拋出錯誤。

參數

Obj_name - 這是向物件新增屬性的物件名稱。
Prop_name - 這是要新增到物件的屬性名稱。
{ get: () => { } } - 它是物件屬性的 getters 函數。

範例

在下面的範例中，我們建立了具有零個屬性的empty_obj物件。我們使用defineProperties()方法來新增屬性。作為描述符，我們新增了 get() 方法，該方法會拋出錯誤並顯示錯誤訊息。

在輸出中，使用者可以觀察到當我們嘗試存取「prop1」屬性時它會拋出錯誤。

<html>
<body>
   <h3>Using the <i> defineProperty() </i> method to throw an error while accessing the object properties in JavaScript </h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      let empty_obj = {};
      Object.defineProperty(empty_obj, 'prop1', {
         get: () => {
            throw new Error('You cannot access prop1 property');
         }
      });
      try {
         content.innerHTML = "The value of prop1 property in the empty object is " + empty_obj.prop1;
      }
      catch (err) {
         content.innerHTML = "The error is : - " + err;
      }
   </script>
</body>
</html>

登入後複製

存取物件屬性時使用 Proxy() 建構子引發錯誤

Proxy() 建構函數允許我們為物件建立代理並覆蓋物件的所有描述符，例如 getter 和 setter。在這裡，我們可以重寫 getters() 並寫一個可以拋出錯誤的新函數。

文法

使用者可以使用下面的語法來使用 Proxy() 建構子在存取物件屬性時拋出錯誤。

let proxy_obj = new Proxy(target_Obj, {
   get: function (target, prop) {
      // throw error
   },
});

登入後複製

在上面的語法中，target_obj是一個為其建立代理的物件。我們已將包含 get() 方法的物件作為第二個參數傳遞。在 get() 方法中，我們可以驗證物件屬性，如果物件屬性無效，則拋出錯誤。

範例

在下面的範例中，我們使用 Proxy() 建構函式建立了 targetObj 物件的代理。在建立代理時，我們檢查使用者是否存取了「prop5」屬性。如果沒有，我們總是會拋出錯誤。這意味著只能從物件存取“prop5”屬性。但是，它將傳回「prop5」屬性的未定義值，因為我們尚未在物件中定義它。

<html>
<body>
   <h3>Using the <i> defineProperty() </i> method to throw an error while accessing the object properties in JavaScript </h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      let targetObj = {
         prop1: 'Hello',
      }
      let proxy_obj = new Proxy(targetObj, {
         get: function (target, prop) {
            if (prop != 'prop5') {
               throw new Error('You are only allowed to access prop5');
            }
         },
      });
      try {
         content.innerHTML += "The value of prop1 is: " + proxy_obj.prop1 + "<br>";
      } catch (e) {
         content.innerHTML += "The error is - " + e + "<br>";
      }
   </script>
</body>
</html>

登入後複製

以上是使用物件的屬性時如何拋出錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！