JS操作對象屬性(獲取、添加、刪除、修改對象屬性)


屬性也稱為名值對,包括屬性名和屬性值。屬性名可以是包含空字符串在內的任意字符串,一個對象中不能存在兩個同名的屬性。屬性值可以是任意類型的數據。

定義屬性

1. 直接量定義

在對象直接量中,屬性名與屬性值之間通過冒號分隔,冒號左側是屬性名,右側是屬性值,名值對(屬性)之間通過逗號分隔。

示例1

在下面示例中,使用直接量方法定義對象 obj,然后添加了兩個成員,一個是屬性,另一個是方法。
  1. var obj = {
  2. x : 1,
  3. y : function () {
  4. return this.x + this.x;
  5. }
  6. }

2. 點語法定義

示例2

通過點語法,可以在構造函數內或者對象外添加屬性。
  1. var obj = {};
  2. obj.x = 1;
  3. obj.y = function () {
  4. return this.x + this.x;
  5. }

3. 使用 Object.defineProperty

使用 Object.defineProperty() 函數可以為對象添加屬性,或者修改現有屬性。如果指定的屬性名在對象中不存在,則執行添加操作;如果在對象中存在同名屬性,則執行修改操作。

具體用法如下:

Object.defineProperty(object, propertyname, descriptor);

參數說明如下:
  • object:指定要添加或修改屬性的對象,可以是 JavaScript 對象或者 DOM 對象。
  • propertyname:表示屬性名的字符串。
  • descriptor:定義屬性的描述符,包括對數據屬性或訪問器屬性。

Object.defineProperty 返回值為已修改的對象。

示例3

下面示例先定義一個對象直接量 obj,然后使用 Object.defineProperty() 函數為 obj 對象定義屬性,屬性名為 x,值為 1,可寫、可枚舉、可修改特性。
  1. var obj = {};
  2. Object.defineProperty(obj, "x", {
  3. value : 1,
  4. writable : true,
  5. enumerable : true,
  6. configurable : true
  7. });
  8. console.log(obj.x); //1

4. 使用 Object.defineProperties

使用 Object.defineProperties() 函數可以一次定義多個屬性。具體用法如下:

object.defineProperties(object, descriptors);

參數說明如下:
  • object:對其添加或修改屬性的對象,可以是本地對象或 DOM 對象。
  • descriptors:包含一個或多個描述符對象,每個描述符對象描述一個數據屬性或訪問器屬性。

示例4

在下面示例中,使用 Object.defineProperties() 函數將數據屬性和訪問器屬性添加到對象 obj 上。
  1. var obj = {};
  2. Object.defineProperties(obj, {
  3. x : { //定義屬性x
  4. value : 1,
  5. writable : true, //可寫
  6. },
  7. y : { //定義屬性y
  8. set : function (x) { //設置訪問器屬性
  9. this.x = x; //改寫obj對象的x屬性的值
  10. },
  11. get : function () { //設置訪問器
  12. return this.x;
  13. },
  14. }
  15. });
  16. obj.y = 10;
  17. console.log(obj.x); //10

讀寫屬性

1. 使用點語法

使用點語法可以快速讀寫對象屬性,點語法左側是引用對象的變量,右側是屬性名。

示例1

下面示例定義對象 obj,包含屬性 x,然后使用點語法讀取屬性 x 的值。
  1. var obj = { //定義對象
  2. x : 1
  3. }
  4. console.log(obj.x); //訪問對象屬性x,返回1
  5. obj.x = 2; //重寫屬性值
  6. console.log(obj.x); //訪問對象屬性x,返回2

2. 使用中括號語法

從結構上分析,對象與數組相似,因此可以使用中括號來讀寫對象屬性。

示例2

針對上面示例,可以使用中括號來讀寫對象屬性。
  1. console.log(obj["x"]); //2
  2. obj["x"] = 3; //重寫屬性值
  3. console.log(obj["x"]); //3

【注意事項】

  • 在中括號語法中,必須以字符串形式指定屬性名,不能使用標識符。
  • 中括號內可以使用字符串,也可以使用字符型表達式,即只要表達式的值為字符串即可。

示例3

下面示例使用 for/in 遍歷對象的可枚舉屬性,並讀取它們的值,然后重寫屬性值。
  1. for (var i in obj) {
  2. console.log(obj[i]);
  3. obj[i] = obj[i] + obj[i];
  4. console.log(obj[i]);
  5. }
在上面代碼中,中括號中的表達式 i 是一個變量,其返回值為 for/in 遍歷對象時枚舉的每個屬性名。

3. 使用 Object.getOwnPropertyNames

使用 Object.getOwnPropertyNames() 函數能夠返回指定對象私有屬性的名稱。私有屬性是指用戶在本地定義的屬性,而不是繼承的原型屬性。具體用法如下:

Object.getOwnPropertyNames(object);

參數 object 表示一個對象,返回值為一個數組,其中包含所有私有屬性的名稱。其中包括可枚舉的和不可枚舉的屬性和方法的名稱。如果僅返回可枚舉的屬性和方法的名稱,應該使用 Object.keys() 函數。

示例4

在下面示例中定義一個對象,該對象包含三個屬性,然后使用 getOwnPropertyNames 獲取該對象的私有屬性名稱。
  1. var obj = {x : 1, y : 2, z : 3};
  2. var arr = Object.getOwnPropertyNames(obj);
  3. console.log(arr); //返回屬性名:x,yz

4. 使用 Object.keys

使用 Object.keys() 函數僅能獲取可枚舉的私有屬性名稱。具體用法如下:

Object.keys(object);

參數 object 表示指定的對象,可以是  JavaScript 對象或 DOM 對象。返回值是一個數組,其中包含對象的可枚舉屬性名稱。

5. Object.getOwnPropertyDescriptor

使用 Object.getOwnPropertyDescriptor() 函數能夠獲取對象屬性的描述符。具體用法如下:

Object.getOwnPropertyDescriptor(object, propertyname);

參數 object 表示指定的對象,propertyname 表示屬性的名稱。返回值為屬性的描述符對象。

示例5

在下面示例中定義一個對象 obj,包含 3 個屬性,然后使用 Object.getOwnPropertyDescriptor() 函數獲取屬性 x 的數據屬性描述符,並使用該描述符將屬性 x 設置為只讀。最后,調用 Object.defineProperty() 函數,使用數據屬性描述符修改屬性 x 的特性。遍歷修改后的對象,可以發現只讀屬性 writable 為 false。
  1. var obj = {x : 1, y : 2, z : 3}; //定義對象
  2. var des = Object.getOwnPropertyDescriptor(obj, "x"); //獲取屬性x的數據屬性描述符
  3. for (var prop in des) { //遍歷屬性描述符對象
  4. console.log(prop + ':' + des[prop]); //顯示特性值
  5. }
  6. des.writable = false; //重寫特性,不允許修改屬性
  7. des.value = 100; //重寫屬性值
  8. Object.defineProperty(obj, "x", des); //使用修改后的數據屬性描述符覆蓋屬性x
  9. var des = Object.getOwnPropertyDescriptor(obj, "x"); //重新獲取屬性x的數據屬性描述符
  10. for (var prop in des) { //遍歷屬性描述符對象
  11. console.log(prop + ':' + des[prop]); //顯示特性值
  12. }
一旦為未命名的屬性賦值后,對象就會自動定義該屬性的名稱,在任何時候和位置為該屬性賦值,都不需要定義屬性,而只會重新設置它的值。如果讀取未定義的屬性,則返回值都是 undefined。

刪除屬性

使用 delete 運算符可以刪除對象的屬性。

示例

下面示例使用 delete 運算符刪除指定屬性。
  1. var obj = {x : 1}; //定義對象
  2. delete obj.x; //刪除對象的屬性x
  3. console.log(obj.x); //返回undefined
當刪除對象屬性之后,不是將該屬性值設置為 undefined,而是從對象中徹底清除屬性。如果使用 for/in 語句枚舉對象屬性,只能枚舉屬性值為 undefined 的屬性,但不會枚舉已刪除屬性。

使用方法

方法也是函數,當函數被賦值給對象的屬性,就被稱為方法。方法的使用與函數是相同的,唯一的不同點是在方法內常用 this 引用調用對象,其實在普通函數內也有 this,只不過不常用。

使用點語法或中括號可以訪問方法,使用小括號可以激活方法。

示例1

與普通函數用法一樣,可以在調用方法時傳遞參數,也可以設計返回值。
  1. var obj = {};
  2. obj.f = function (n) { //定義對象的方法
  3. return 10 * n;
  4. }
  5. var n = obj.f(5); //調用方法,設置參數為5
  6. console.log(n); //返回值50

示例2

在方法內 this 總是指向當前調用對象。在下面示例中,當在不同運行環境中調用對象 obj 的方法 f() 時,該方法的 this 指向時不同的。
  1. var obj = { //定義對象
  2. f : function () { //定義對象的方法
  3. console.log(this); //訪問當前對象
  4. }
  5. }
  6. obj.f(); //此時this指向對象obj
  7. var f1 = obj.f; //引用對象obj的方法f
  8. f1(); //此時this指向對象window

關注微信公眾號「站長嚴長生」,在手機上閱讀所有教程,隨時隨地都能學習。本公眾號由C語言中文網站長運營,每日更新,堅持原創,敢說真話,凡事有態度。

魏雪原二維碼
微信掃描二維碼關注公眾號

 轉 http://c.biancheng.net/view/5773.html
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM