js知識(shí)梳理2:對(duì)象屬性的操作

BearyChat 發(fā)布于2019-08-26 12:16 / 1262人閱讀

摘要：寫在前面注這個(gè)系列是本人對(duì)知識(shí)的一些梳理，其中不少內(nèi)容來自書籍高級(jí)程序設(shè)計(jì)第三版和權(quán)威指南第六版，感謝它們的作者和譯者。打印和類似，只是它返回對(duì)象的所有自有屬性的名稱，包括不可枚舉的。

寫在前面

注：這個(gè)系列是本人對(duì)js知識(shí)的一些梳理，其中不少內(nèi)容來自書籍:Javascript高級(jí)程序設(shè)計(jì)第三版和JavaScript權(quán)威指南第六版，感謝它們的作者和譯者。有發(fā)現(xiàn)什么問題的，歡迎留言指出。

1.屬性的查詢和設(shè)置 ①基本語法

這個(gè)簡(jiǎn)單，可以通過點(diǎn)（.）或方括號(hào)（[]）運(yùn)算來獲取屬性的值，注意點(diǎn)運(yùn)算符后的標(biāo)識(shí)符不能是保留字，方括號(hào)內(nèi)的表達(dá)式必須返回字符串或返回一個(gè)可以轉(zhuǎn)換成字符串的值。

var person = {
    name:"jaychou",
    height:172,
    sayName:function () {
        console.log(this.name);
    }
};
console.log(person["name"]);
console.log(person.height);

往往有一些場(chǎng)景使用方括號(hào)比點(diǎn)語法更靈活：

var addr = "";
for(var i=0;i<4;i++){
    //讀取customer對(duì)象的address0,address1,address2,address3屬性
    addr += customer["address"+i] + "
";
}

②繼承相關(guān)的影響

原型鏈實(shí)現(xiàn)了屬性的繼承。簡(jiǎn)單說，如果給對(duì)象o的屬性x賦值，如果o中已經(jīng)有屬性x（自有屬性，不是繼承來的），那就會(huì)改變這個(gè)已有屬性x的值。如果o中不存在屬性x，那么賦值操作給o添加一個(gè)新屬性x。如果之前o繼承了屬性x，那么這個(gè)繼承的屬性就創(chuàng)建的同名屬性覆蓋了。當(dāng)然，如果屬性的writable是false，就會(huì)拋出錯(cuò)誤。

但是如果這個(gè)繼承來的屬性是具有setter方法的存取器屬性，這時(shí)會(huì)調(diào)用setter方法而不是給o創(chuàng)建一個(gè)屬性x。繼承來的屬性是只讀的，才會(huì)在o上創(chuàng)建屬性。

③屬性訪問錯(cuò)誤

查詢一個(gè)不存在的屬性不會(huì)報(bào)錯(cuò)，返回undefined。但如果嘗試查詢這個(gè)不存在的對(duì)象它的屬性就會(huì)報(bào)錯(cuò)。

給null和undefined設(shè)置屬性會(huì)報(bào)類型錯(cuò)誤，嚴(yán)格模式下，設(shè)置屬性操作只要失敗都會(huì)拋出類型錯(cuò)誤異常。

2.刪除屬性

delete運(yùn)算符可以刪除對(duì)象的屬性，注意的是delete只是斷開屬性和宿主對(duì)象的聯(lián)系，而不會(huì)去操作屬性中的屬性，而且為了避免內(nèi)存泄漏，在銷毀對(duì)象的時(shí)候，要遍歷屬性中的屬性，依次刪除。

delete運(yùn)算符只能刪除自有屬性（這是肯定的，否則就影響了整個(gè)原型鏈的對(duì)象）。

3.檢測(cè)屬性

判斷某個(gè)屬性是否存在于某個(gè)對(duì)象中即為檢測(cè)屬性，常用方法：in運(yùn)算符、hasOwnProperty()、propertyIsEnumerable()，或者之前提及的屬性查詢也可以。

//in運(yùn)算符：如果對(duì)象的自有屬性或繼承屬性中包含這個(gè)屬性則返回true:
var o = {x:1};
console.log("x" in o);//true:
console.log("y" in o);//false
console.log("toString" in o);//true:
//hasOwnProperty:檢測(cè)是否是對(duì)象的自有屬性
console.log(o.hasOwnProperty("x"));//true
console.log(o.hasOwnProperty("y"));//false
console.log(o.hasOwnProperty("toString"));//false
//propertyIsEnumerable:hasOwnProperty的增強(qiáng)版，是自有屬性且可枚舉
console.log(o.propertyIsEnumerable("x"));//true
console.log(Object.prototype.propertyIsEnumerable("toString"));//false:不可枚舉

其他小辦法：!==判斷一個(gè)屬性是否是undefined（缺陷：!==無法區(qū)分不存在的屬性和存在但值為undefined的屬性）

console.log(o.x !== undefined);//true
console.log(o.y !== undefined);
console.log(o.toString !== undefined);//true

4.枚舉屬性

常用的遍歷對(duì)象屬性的方法（未包括ES6）：for-in循環(huán)、Object.keys()、Object.getOwnPropertyNames()。

①for-in循環(huán)

for-in循環(huán)可以遍歷對(duì)象中所有可枚舉的屬性（包括自有屬性和繼承屬性）:

var o1 = {x:1,y:1,_z:111};
Object.defineProperty(o1,"sayX",{
    value:function () {
        console.log(this.x);
    },
    enumerable:false
});
Object.defineProperty(o1,"z",{
    get:function () { return this._z; },
    set:function (v) { this._z = v; },
    enumerable:false
})
//打印x,y,_z，不會(huì)打印sayX和z，因?yàn)槠鋏numerable為false
for(var p in o1) console.log(p);

②Object.keys()

返回一個(gè)數(shù)組，這個(gè)數(shù)組由對(duì)象中可枚舉的自有屬性的名稱組成。

//打印["x", "y", "_z"]
console.log(Object.keys(o1));

③Object.getOwnPropertyNames()

和Object.keys()類似，只是它返回對(duì)象的所有自有屬性的名稱，包括不可枚舉的。

//打印["x", "y", "_z", "sayX", "z"]
console.log(Object.getOwnPropertyNames(o1));
//打印["constructor", "__defineGetter__", "__defineSetter__", 
// "hasOwnProperty", "__lookupGetter__", "__lookupSetter__", 
// "isPrototypeOf", "propertyIsEnumerable", "toString", 
// "valueOf", "__proto__", "toLocaleString"]
console.log(Object.getOwnPropertyNames(Object.prototype));

④小拓展

給Object.prototype添加一個(gè)不可枚舉的extend()方法，這個(gè)方法將作為參數(shù)傳入的對(duì)象的所有自有屬性（包括不可枚舉的）一一復(fù)制，除了值，也復(fù)制屬性的所有特性，除非在目標(biāo)對(duì)象中存在同名的屬性。

Object.defineProperty(Object.prototype,"extend",{
   configurable:true,
   enumerable:false,//不可枚舉
   writable:true,
   value:function (o) {
       //先獲取o的全部自有屬性（包括不可枚舉的）
       var names = Object.getOwnPropertyNames(o);
       for(var i=0,len=names.length;i

云服務(wù)器 GPU云服務(wù)器 js中集合對(duì)象的屬性 js包裝對(duì)象中的屬性 js操作tr屬性 js_window對(duì)象屬性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108371.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

BearyChat

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

水資源領(lǐng)域受威脅 CISA警告注意針對(duì)水和廢水系統(tǒng)的網(wǎng)絡(luò)攻擊

閱讀 3431·2021-10-20 13:49
?基于H5+js開發(fā)一款音樂播放器

閱讀 2806·2021-09-29 09:34
vpsmalaysia：馬來西亞VPS，100M帶寬，低至$7/月，CX2機(jī)房，提供獨(dú)立服務(wù)器

閱讀 3701·2021-09-01 11:29
當(dāng)我在瀏覽器中輸入url都發(fā)生了什么

閱讀 3087·2019-08-30 11:01
《第41天：JQurey - 關(guān)燈效果》

閱讀 849·2019-08-29 17:10
postcss-lazysprite: 一種生成CSS 雪碧圖的懶惰姿勢(shì)

閱讀 886·2019-08-29 12:48
JavaScript正則進(jìn)階之路——活學(xué)妙用奇淫正則表達(dá)式

閱讀 2788·2019-08-29 12:40
Web 圖片性能優(yōu)化系列一：背景與基礎(chǔ)

閱讀 1361·2019-08-29 12:30

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

js知識(shí)梳理2:對(duì)象屬性的操作

相關(guān)文章

js知識(shí)梳理5：關(guān)于函數(shù)的要點(diǎn)梳理(1)

**js知識(shí)梳理1:理解對(duì)象的屬性特性**

**JS核心知識(shí)點(diǎn)梳理——原型、繼承（上）**

**JS核心知識(shí)點(diǎn)梳理——變量篇**

**JS核心知識(shí)點(diǎn)梳理——原型、繼承（下）**

發(fā)表評(píng)論

0條評(píng)論

BearyChat

男|高級(jí)講師

TA的文章

水資源領(lǐng)域受威脅 CISA警告注意針對(duì)水和廢水系統(tǒng)的網(wǎng)絡(luò)攻擊

?基于H5+js開發(fā)一款音樂播放器

vpsmalaysia：馬來西亞VPS，100M帶寬，低至$7/月，CX2機(jī)房，提供獨(dú)立服務(wù)器

當(dāng)我在瀏覽器中輸入url都發(fā)生了什么

《第41天：JQurey - 關(guān)燈效果》

postcss-lazysprite: 一種生成CSS 雪碧圖的懶惰姿勢(shì)

JavaScript正則進(jìn)階之路——活學(xué)妙用奇淫正則表達(dá)式

Web 圖片性能優(yōu)化系列一：背景與基礎(chǔ)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

js知識(shí)梳理2:對(duì)象屬性的操作

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！