一篇文章帶你了解JavaScript屬性
回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料
一、什么是屬性？
屬性是一個JavaScript對象關(guān)聯(lián)的值。一個JavaScript對象是一個無序的性質(zhì)集合，屬性通常可以更改、添加和刪除，但有些只讀。
二、訪問JavaScript屬性
訪問對象屬性的語法是(3種表現(xiàn)形式):
第一種
objectName.property // person.age第二種objectName["property"] // person["age"]第三種
objectName[expression] // x = "age"; person[x]表達(dá)式必須是一個正確的屬性名<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目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>
//復(fù)制上面代碼,替換不同語句，實(shí)現(xiàn)功能。person["firstname"] + " is " + person["age"] + " years old.";
1 . 原型屬性
JavaScript 對象繼承它們的prototype屬性。
delete 關(guān)鍵字不刪除繼承的屬性，但如果刪除原型屬性，則會影響從原型繼承的所有對象。
2. 添加新屬性
可以添加新的屬性到現(xiàn)有的對象，只要給它一個值.
假設(shè)person對象已經(jīng)存在-你可以給它新的屬性:
person.nationality = "English";完整代碼：<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目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 關(guān)鍵字從對象中刪除屬性：
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};delete person.age; // or delete person["age"];
delete 關(guān)鍵字同時刪除屬性的值和屬性本身。
刪除后，屬性不能再使用之前的方法重新添加。
delete 運(yùn)算符被設(shè)計用于對象屬性。它對變量或函數(shù)沒有影響
delete 運(yùn)算符不得使用預(yù)定義JavaScript對象的屬性。它可以使得你的應(yīng)用程序崩潰。
三、JavaScript for...in 循環(huán)
JavaScript for...in 語句可以遍歷對象的屬性
語法
for (variable in object) {code to be executed}
for...in 循環(huán)里面的每個屬性將執(zhí)行一次。
循環(huán)對象屬性:
<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 屬性，介紹了如何訪問一個屬性，如何去創(chuàng)建原型屬性，如何去添加一個新的屬性，如何去刪除一個屬性，以及在for...in 語句遍歷對象的屬性的應(yīng)用，都做了詳細(xì)的講解。通過用豐富的案例幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動手實(shí)現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
使用JavaScript 語言，方便大家更好理解，希望對大家的學(xué)習(xí)有幫助。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請?jiān)诤笈_回復(fù)【入群】
萬水千山總是情，點(diǎn)個【在看】行不行