一篇文章帶你了解JavaScript屬性

作者：前端進階者 2020-11-10 10:48:10

本文主要介紹了JavaScript 屬性，介紹了如何訪問一個屬性，如何去創(chuàng)建原型屬性，如何去添加一個新的屬性，如何去刪除一個屬性，以及在for...in 語句遍歷對象的屬性的應用，都做了詳細的講解。通過用豐富的案例幫助大家更好理解。

[[351385]]

一、什么是屬性?

屬性是一個JavaScript對象關聯(lián)的值。一個JavaScript對象是一個無序的性質集合，屬性通常可以更改、添加和刪除，但有些只讀。

二、訪問JavaScript屬性

訪問對象屬性的語法是(3種表現(xiàn)形式):

第一種

objectName.property          // person.age

第二種

objectName["property"]       // person["age"]

第三種

objectName[expression]       // x = "age"; person[x]

表達式必須是一個正確的屬性名

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>項目</title> 
    </head> 
    <body style="background-color: aqua;"> 
 
        <p>有兩種方法可以訪問對象屬性:</p> 
        <p>你可以使用 .property 或者 ["property"].</p> 
 
        <p id="demo"></p> 
 
        <script> 
            var person = { 
                firstname: "John", 
                lastname: "Doe", 
                age: 50, 
                eyecolor: "blue" 
            }; 
            document.getElementById("demo").innerHTML = 
                person.firstname + " is " + person.age + " years old."; 
</script> 
 
    </body> 
</html>

//復制上面代碼,替換不同語句，實現(xiàn)功能。 
person["firstname"] + " is " + person["age"] + " years old.";

1 . 原型屬性

JavaScript 對象繼承它們的prototype屬性。

delete 關鍵字不刪除繼承的屬性，但如果刪除原型屬性，則會影響從原型繼承的所有對象。

2. 添加新屬性

可以添加新的屬性到現(xiàn)有的對象，只要給它一個值.

假設person對象已經(jīng)存在-你可以給它新的屬性:

person.nationality = "English";

完整代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>項目</title> 
    </head> 
    <body style="background-color: aqua;"> 
 
        <p>你可以為現(xiàn)有對象添加新的屬性.</p> 
 
        <p id="demo"></p> 
 
        <script> 
            var person = { 
                firstname: "John", 
                lastname: "Doe", 
                age: 50, 
                eyecolor: "blue" 
            }; 
            person.nationality = "English"; 
            document.getElementById("demo").innerHTML = 
                person.firstname + " is " + person.nationality + "."; 
</script> 
 
    </body> 
</html>

注：

不能為屬性(或方法)名稱使用保留字。JavaScript的命名規(guī)則。

3. 刪除屬性

delete 關鍵字從對象中刪除屬性：

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 
delete person.age;   // or delete person["age"];

delete 關鍵字同時刪除屬性的值和屬性本身。

刪除后，屬性不能再使用之前的方法重新添加。

delete 運算符被設計用于對象屬性。它對變量或函數(shù)沒有影響

delete 運算符不得使用預定義JavaScript對象的屬性。它可以使得你的應用程序崩潰。

三、JavaScript for...in 循環(huán)

JavaScript for...in 語句可以遍歷對象的屬性

語法

for (variable in object) { 
    code to be executed 
}

for...in 循環(huán)里面的每個屬性將執(zhí)行一次。

循環(huán)對象屬性:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>項目</title> 
  </head> 
  <body style="background-color: aqua;"> 
 
    <p id="demo"></p> 
 
    <script> 
      var txt = ""; 
      var person = { 
        fname: "John", 
        lname: "Doe", 
        age: 25 
      }; 
      var x; 
      for (x in person) { 
        txt += person[x] + " "; 
      } 
      document.getElementById("demo").innerHTML = txt; 
</script> 
 
  </body> 
</html>

四、總結

希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯(lián)系前端進階學習交流公眾號。

責任編輯：武曉燕來源：前端進階學習交流

JavaScript 屬性對象