JavaScript對象


1角撞、8種數(shù)據(jù)類型

number

bigint: 任意長度的整數(shù)

string

boolean

unll:空或不存在

undefined:未定義

object

symbol

2、typeof null == "object" // JavaScript 編程語言的設(shè)計錯誤

typeof function(){} == "function" // 函數(shù)被特殊對待

3谒所、創(chuàng)建對象的方法

構(gòu)造函數(shù):let user = new Obiect()

字面量: let user = {}

4沛申、屬性存在性測試,“in” 操作符

能夠被訪問任何屬性铁材。即使屬性不存在也不會報錯!

讀取不存在的屬性只會得到 undefined著觉。所以我們可以很容易地判斷一個屬性是否存在:

let user = {};alert( user.noSuchProperty === undefined ); // true 意思是沒有這個屬性

這里還有一個特別的,檢查屬性是否存在的操作符 "in"饼丘,key in object,in 的左邊必須是 屬性名葬毫。通常是一個帶引號的字符串。如果我們省略引號贴捡,就意味著左邊是一個變量,它應(yīng)該包含要判斷的實際屬性名屹逛。

let user = { name: "John", age: 30 };

alert( "age" in user ); // true,user.age 存在

alert( "blabla" in user ); // false罕模,user.blabla 不存在。

為何會有 in 運算符呢淑掌?與 undefined 進行比較來判斷還不夠嗎?

let obj = {? test: undefined};

alert( obj.test ); // 顯示 undefined抛腕,所以屬性不存在芋绸?

alert( "test" in obj ); // true摔敛,屬性存在!

這種情況很少發(fā)生马昙,因為通常情況下不應(yīng)該給對象賦值 undefined。我們通常會用 null 來表示未知的或者空的值行楞。因此,in 運算符是代碼中的特殊來賓敢伸。

5恒削、for...in循環(huán),遍歷對象

for (key in object) {? // 對此對象屬性中的每個鍵執(zhí)行的代碼}

let user = {? name: "John",? age: 30,? isAdmin: true};

for (let key in user) {? // keys? alert( key );

// name, age, isAdmin? // 屬性鍵的值? alert( user[key] ); // John, 30, true}

6钓丰、訪問屬性的方法&其它

點符號: obj.property。

方括號 obj["property"]携丁,方括號允許從變量中獲取鍵,例如 obj[varWithKey]

刪除屬性:delete obj.prop梦鉴。

檢查是否存在給定鍵的屬性:"key" in obj。

遍歷對象:for(let key in obj) 循環(huán)肥橙。

7、對象的引用和復(fù)制

與原始類型相比存筏,對象的根本區(qū)別之一是對象是通過引用被存儲和復(fù)制的,與原始類型相反string椭坚、number、boolean等始終以整體值得形式被復(fù)制得善茎;

賦值了對象的變量存儲的不是對象本身,而是該對象“在內(nèi)存中的地址”汁掠,換句話說就是對該對象的“引用”。

當(dāng)一個對象變量被復(fù)制 —— 引用則被復(fù)制考阱,而該對象并沒有被復(fù)制

let user = { name: 'John' }

let admin = user

user? ——> name <——? admin? 現(xiàn)在我們有了兩個變量鞠苟,它們保存的都是對同一個對象的引用;這里依然是只有一個對象当娱,現(xiàn)在有兩個引用它的變量,我們可以通過其中任何一個變量來訪問該對象并修改它的內(nèi)容跨细。

admin.name = 'pete'

console.log(user.name)? // pete

這就像我們有個帶著兩把鑰匙的柜子,并使其中一把鑰匙來打開它震叙,那么我們?nèi)绻笥昧硪话谚€匙打開,則也能看到更改媒楼。

8、通過引用來比較

僅當(dāng)兩個對象為同一對象時划址,兩者才相等

let a = {}

let b = a

console.log(a==b) // true

console.log(a===b) // true

這里a和b引用的都是同一個對象,所以它們相等夺颤;

let a = {}

let b = {}

console.log(a==b) // false

這里的a和b是兩個互相獨立的對象所以它們不相等;

9世澜、克隆與合并,Object.assign

如何拷貝一個對象變量會又創(chuàng)建一個對相同對象的引用宜狐。

let user = { name: 'lili', age: 48 }

let clone = {}

for (let key in user) {

? clone[key] = user[key]

}

// 現(xiàn)在 clone 是帶有相同內(nèi)容的完全獨立的對象

clone.name = 'mike'

console.log(user.name) // lili

下面使用Object.assign也能達到同樣的效果

let user = { name: "John" }

let permissions1 = { canView: true }

let permissions2 = { canEdit: true }

// 將 permissions1 和 permissions2 中的所有屬性都拷貝到 user 中Object.assign(user,permissions1,permissions2)

// 現(xiàn)在 user = { name: "John", canView: true, canEdit: true }

如果被拷貝的屬性的屬性名已經(jīng)存在蛇捌,那么它會被覆蓋:

let user = { name: "John" }

Object.assign(user, { name: "Pete" })

console.log(user.name) // 現(xiàn)在 user = { name: "Pete" }

我們也可以用 Object.assign 代替 for..in 循環(huán)來進行簡單克隆:

let user = {? name: "John",? age: 30}

let clone=Object.assign({},user)

10、深層克隆

let user = {? name: "John",? sizes: {? ? height: 182,? ? width: 50? }}

let clone = Object.assign({}, user)

console.log( user.sizes === clone.sizes ) // true

同一個對象user 和 clone 分享同一個 sizes,user.sizes.width++

// 通過其中一個改變屬性值

console.log(clone.sizes.width); // 51俭驮,能從另外一個看到變更的結(jié)果

為了解決此問題,我們應(yīng)該使用會檢查每個 user[key] 的值的克隆循環(huán)混萝,如果值是一個對象,那么也要復(fù)制它的結(jié)構(gòu)逸嘀。這就叫“深拷貝”。我們可以用遞歸來實現(xiàn)崭倘。或者不自己造輪子司光,使用現(xiàn)成的實現(xiàn),例如 JavaScript 庫 lodash 中的 _.cloneDeep(obj)残家。

11、總結(jié)

對象通過引用被賦值和拷貝坞淮。換句話說,一個變量存儲的不是“對象的值”碾盐,而是一個對值的“引用”(內(nèi)存地址)。因此毫玖,拷貝此類變量或?qū)⑵渥鳛楹瘮?shù)參數(shù)傳遞時,所拷貝的是引用付枫,而不是對象本身。

所有通過被拷貝的引用的操作(如添加阐滩、刪除屬性)都作用在同一個對象上。

為了創(chuàng)建“真正的拷貝”(一個克碌嗬啤),我們可以使用 Object.assign 來做所謂的“淺拷貝”(嵌套對象被通過引用進行拷貝)或者使用“深拷貝”函數(shù)装获,例如 _.cloneDeep(obj)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末穴豫,一起剝皮案震驚了整個濱河市逼友,隨后出現(xiàn)的幾起案子秤涩,更是在濱河造成了極大的恐慌,老刑警劉巖筐眷,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異怨喘,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門肉拓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人暖途,你說我怎么就攤上這事∽な郏” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵欺栗,是天一觀的道長。 經(jīng)常有香客問我迟几,道長,這世上最難降的妖魔是什么类腮? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮缸逃,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘需频。我一直安慰自己,他們只是感情好修肠,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著饲化,像睡著了一般。 火紅的嫁衣襯著肌膚如雪吃靠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天巢块,我揣著相機與錄音,去河邊找鬼族奢。 笑死,一個胖子當(dāng)著我的面吹牛越走,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播廊敌,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼骡澈!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起肋殴,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嚼锄,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔽豺,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年沧侥,在試婚紗的時候發(fā)現(xiàn)自己被綠了魄鸦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡拾因,死狀恐怖旷余,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情正卧,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布炉旷,位于F島的核電站,受9級特大地震影響窘行,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜图仓,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望翘骂。 院中可真熱鬧,春花似錦帚豪、人聲如沸草丧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至懂拾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間岖赋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工唐断, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人脸甘。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像丹诀,于是被迫代替她去往敵國和親翁垂。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 今天感恩節(jié)哎沿猜,感謝一直在我身邊的親朋好友亿柑。感恩相遇!感恩不離不棄望薄。 中午開了第一次的黨會疟游,身份的轉(zhuǎn)變要...
    迷月閃星情閱讀 10,564評論 0 11
  • 彩排完颁虐,天已黑
    劉凱書法閱讀 4,217評論 1 3
  • 表情是什么,我認為表情就是表現(xiàn)出來的情緒另绩。表情可以傳達很多信息。高興了當(dāng)然就笑了花嘶,難過就哭了。兩者是相互影響密不可...
    Persistenc_6aea閱讀 125,011評論 2 7