一篇文章帶你了解JavaScript屬性
一、什么是屬性?
屬性是一個(gè)JavaScript對(duì)象關(guān)聯(lián)的值。一個(gè)JavaScript對(duì)象是一個(gè)無(wú)序的性質(zhì)集合，屬性通?？梢愿?、添加和刪除，但有些只讀。
二、訪問(wèn)JavaScript屬性
訪問(wèn)對(duì)象屬性的語(yǔ)法是(3種表現(xiàn)形式):
第一種
- objectName.property // person.age
第二種
- objectName["property"] // person["age"]
第三種
- objectName[expression] // x = "age"; person[x]
表達(dá)式必須是一個(gè)正確的屬性名
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <p>有兩種方法可以訪問(wèn)對(duì)象屬性:</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>
- //復(fù)制上面代碼,替換不同語(yǔ)句，實(shí)現(xiàn)功能。
- person["firstname"] + " is " + person["age"] + " years old.";
1 . 原型屬性
JavaScript 對(duì)象繼承它們的prototype屬性。
delete 關(guān)鍵字不刪除繼承的屬性，但如果刪除原型屬性，則會(huì)影響從原型繼承的所有對(duì)象。
2. 添加新屬性
可以添加新的屬性到現(xiàn)有的對(duì)象，只要給它一個(gè)值.
假設(shè)person對(duì)象已經(jīng)存在-你可以給它新的屬性:
- person.nationality = "English";
完整代碼：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <p>你可以為現(xiàn)有對(duì)象添加新的屬性.</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 關(guān)鍵字從對(duì)象中刪除屬性：
- var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
- delete person.age; // or delete person["age"];
delete 關(guān)鍵字同時(shí)刪除屬性的值和屬性本身。
刪除后，屬性不能再使用之前的方法重新添加。
delete 運(yùn)算符被設(shè)計(jì)用于對(duì)象屬性。它對(duì)變量或函數(shù)沒(méi)有影響
delete 運(yùn)算符不得使用預(yù)定義JavaScript對(duì)象的屬性。它可以使得你的應(yīng)用程序崩潰。
三、JavaScript for...in 循環(huán)
JavaScript for...in 語(yǔ)句可以遍歷對(duì)象的屬性
語(yǔ)法
- for (variable in object) {
- code to be executed
- }
for...in 循環(huán)里面的每個(gè)屬性將執(zhí)行一次。
循環(huán)對(duì)象屬性:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項(xiàng)目</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>
四、總結(jié)
本文主要介紹了JavaScript 屬性，介紹了如何訪問(wèn)一個(gè)屬性，如何去創(chuàng)建原型屬性，如何去添加一個(gè)新的屬性，如何去刪除一個(gè)屬性，以及在for...in 語(yǔ)句遍歷對(duì)象的屬性的應(yīng)用，都做了詳細(xì)的講解。通過(guò)用豐富的案例幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。
