步遙——對(duì)象的擴(kuò)展

對(duì)象的擴(kuò)展

對(duì)象本身的數(shù)據(jù)結(jié)構(gòu)的改變:
1:屬性的簡(jiǎn)潔表示:允許在大括號(hào)里面,直接寫入變量和函數(shù)韧拒,作為對(duì)象的屬性和方法淹接。這樣的書寫更加簡(jiǎn)單

const foo = 'df'
const baz = {foo} //等同于{foo:foo}
baz // {foo: "df"}

2:方法也可以簡(jiǎn)寫

const o = {
method(){return 'hello!'}   //等同于 method:function(){return 'hello!'}
}
o.method() // 'hello!'

3:屬性名表達(dá)式
es5只有標(biāo)識(shí)符定義屬性,es6允許表達(dá)式做對(duì)象的屬性名叛溢,即把表達(dá)式放在方括號(hào)內(nèi)塑悼。

let propKey = 'foo'
let obj= {
[propKey]:true
}
obj  // {foo: true}

4:方法名也可以是表達(dá)式

let obj = {
  ['h' + 'eo']() {
    return 'hi';
  }};
obj.heo() // hi

如果屬性名是對(duì)象,會(huì)被轉(zhuǎn)為字符串[object Object]
對(duì)象的屬性可以是字符串和symbol類型

5:對(duì)象方法的name屬性
因?yàn)閷?duì)象的方法名可以是字符串楷掉,symbol厢蒜,方法也可以是get,set方法,所以name的值也有不同

普通的字符串烹植,則返回對(duì)應(yīng)的字符串
get,set方法的name需要在屬性描述符的set,get屬性上獲取

const obj = {
  get foo() {},
  set foo(x) {}
};

obj.foo.name
// TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

symbol值的會(huì)返回symbol的描述

6:屬性的可枚舉和遍歷
每個(gè)屬性都可以通過Object.getOwnPropertyDescriptor獲取到任意一個(gè)屬性的可配置的屬性:比如值斑鸦,是否可枚舉,是否可配置草雕,是否可修改等

class的原型的方法都是不可枚舉的巷屿,在循環(huán)時(shí)盡量不要使用for...in ,而使用Object.keys();

7:遍歷屬性的方法:

7.1:for...in // 循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性墩虹,不含symbol
7.2:Object.keys() // 返回一個(gè)數(shù)組嘱巾,包括對(duì)象自身的不含繼承的所有可枚舉屬性的鍵名,不含symbol
7.3:Object.getOwnPropertyNames //返回一個(gè)數(shù)組诫钓,包含對(duì)象自身的所有屬性不包含symbol,但是包含不可枚舉屬性的鍵名
7.4:Object.getOwnPropertySymbols // 返回一個(gè)數(shù)組旬昭,包含對(duì)象自身的所有symbol屬性的鍵名
7.5:Reflect.ownKeys //返回一個(gè)數(shù)組,包含對(duì)象自身的不含繼承的所有鍵名尖坤,不管鍵名是symbol或字符串稳懒,也不管是否可枚舉。
遍歷順序:

  • 首先遍歷所有數(shù)值鍵慢味,按照數(shù)值升序排列场梆。
  • 其次遍歷所有字符串鍵,按照加入時(shí)間升序排列纯路。
  • 最后遍歷所有 Symbol 鍵或油,按照加入時(shí)間升序排列。

8:super關(guān)鍵字
指向當(dāng)前對(duì)象的原型對(duì)象驰唬,并且只能用在對(duì)象的方法中顶岸。目前只有對(duì)象方法的簡(jiǎn)寫法可以讓js引擎確認(rèn)腔彰,定義的是對(duì)象的方法:

let obj ={
foo:2
}

let obj1 ={
method(){  //對(duì)象方法的簡(jiǎn)寫中可以使用super
return super.foo
}
}
obj1.method()//2

setPrototypeOf & getPrototypeOf 
Object.setPrototypeOf(obj,prototype) //將prototype設(shè)置為obj的原型
Object.getPrototypeOf(obj) // 返回obj的原型對(duì)象

8:對(duì)象的解構(gòu)賦值:
對(duì)象的解構(gòu)賦值用于從一個(gè)對(duì)象取值,相當(dāng)于將目標(biāo)對(duì)象自身的所有可遍歷的(enumerable)辖佣、但尚未被讀取的屬性霹抛,分配到指定的對(duì)象上面。所有的鍵和它們的值卷谈,都會(huì)拷貝到新對(duì)象上面

解構(gòu)賦值要求等號(hào)右邊是一個(gè)對(duì)象杯拐,undefined和null會(huì)報(bào)錯(cuò)
解構(gòu)賦值必須是最后一個(gè)參數(shù)
解構(gòu)賦值是淺拷貝
解構(gòu)賦值不能復(fù)制繼承自原型對(duì)象的屬性

用處:擴(kuò)展某個(gè)函數(shù)的參數(shù),引入其他操作

9:擴(kuò)展運(yùn)算符
用于取出參數(shù)對(duì)象的所有可遍歷屬性世蔗,拷貝到當(dāng)前對(duì)象之中
擴(kuò)展運(yùn)算符后面不是對(duì)象端逼,則會(huì)自動(dòng)轉(zhuǎn)為對(duì)象

擴(kuò)展運(yùn)算符后是數(shù)字,布爾污淋,undefined顶滩,null,都會(huì)返回空對(duì)象

對(duì)象的擴(kuò)展運(yùn)算符等同于使用Object.assign()方法

let aClone = {...obj} //
let aClone1 = Object.assign({},obj)//同上只拷貝對(duì)象實(shí)例屬性寸爆,像完整克隆一個(gè)對(duì)象礁鲁,還拷貝對(duì)象原型的屬性,可以采用下面的寫法

const aClone2 = Object.assign(Object.create(Object.getPrototyOf(obj)),obj) // 將原型和對(duì)象合并

如果用戶自定義的屬性赁豆,放在擴(kuò)展運(yùn)算符后面救氯,則擴(kuò)展運(yùn)算符內(nèi)部的同名屬性會(huì)被覆蓋掉。 這用來修改現(xiàn)有對(duì)象部分的屬性就很方便了歌憨,新的值會(huì)覆蓋前面的屬性
與數(shù)組的擴(kuò)展運(yùn)算符一樣着憨,對(duì)象的擴(kuò)展運(yùn)算符后面可以跟表達(dá)式

用處:合并對(duì)象

10:鏈判斷運(yùn)算符

const  firstName = message.body.user.firstName;

es5:
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

es6:
const firstName = message?.body?.user?.firstName || 'default';

判斷方法是否存在并執(zhí)行

iterator.return?.()
obj1.method?.() // 2
obj1.aaa?.() // undefined

鏈判斷語(yǔ)法:
* obj?.prop // 對(duì)象屬性
* obj?.[expr] // 同上
* func?.(...args) // 函數(shù)或?qū)ο蠓椒ǖ恼{(diào)用
判斷數(shù)組是否有值

let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1];

鏈判斷特點(diǎn):
短路機(jī)制
delete運(yùn)算符,失敗則不刪除
如果屬性鏈有圓括號(hào)务嫡,鏈判斷運(yùn)算符對(duì)圓括號(hào)外部沒有影響甲抖,只對(duì)圓括號(hào)內(nèi)部有影響
鏈判斷運(yùn)算符的左側(cè)不能是 super
鏈判斷不能用來賦值
右側(cè)不得為十進(jìn)制數(shù)值

12:Null判斷運(yùn)算符 ??

左側(cè)只有等于null或undefined的時(shí)候,才會(huì)返回右側(cè)的值,如果為‘’ 或false的時(shí)候心铃,還返回‘’或false

用處:
就是跟鏈判斷運(yùn)算符?.配合使用准谚,為null或undefined的值設(shè)置默認(rèn)值。

如果多個(gè)邏輯運(yùn)算符一起使用去扣,必須用括號(hào)表明優(yōu)先級(jí)柱衔,否則會(huì)報(bào)錯(cuò)。

lhs && middle ?? rhs //報(bào)錯(cuò)
(lhs && middle) ?? rhs // 不報(bào)錯(cuò)愉棱,必須使用括號(hào)表明優(yōu)先級(jí)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末唆铐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子奔滑,更是在濱河造成了極大的恐慌艾岂,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件朋其,死亡現(xiàn)場(chǎng)離奇詭異王浴,居然都是意外死亡脆炎,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門氓辣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秒裕,“玉大人,你說我怎么就攤上這事钞啸〈乇” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵爽撒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我响蓉,道長(zhǎng)硕勿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任枫甲,我火速辦了婚禮源武,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘想幻。我一直安慰自己粱栖,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布脏毯。 她就那樣靜靜地躺著闹究,像睡著了一般。 火紅的嫁衣襯著肌膚如雪食店。 梳的紋絲不亂的頭發(fā)上渣淤,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音吉嫩,去河邊找鬼价认。 笑死,一個(gè)胖子當(dāng)著我的面吹牛自娩,可吹牛的內(nèi)容都是我干的用踩。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼忙迁,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼脐彩!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起姊扔,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤丁屎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后旱眯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晨川,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡证九,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了共虑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片愧怜。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖妈拌,靈堂內(nèi)的尸體忽然破棺而出拥坛,到底是詐尸還是另有隱情,我是刑警寧澤尘分,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布猜惋,位于F島的核電站,受9級(jí)特大地震影響培愁,放射性物質(zhì)發(fā)生泄漏著摔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一定续、第九天 我趴在偏房一處隱蔽的房頂上張望谍咆。 院中可真熱鬧,春花似錦私股、人聲如沸摹察。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)供嚎。三九已至,卻和暖如春峭状,著一層夾襖步出監(jiān)牢的瞬間查坪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工宁炫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留偿曙,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓羔巢,卻偏偏與公主長(zhǎng)得像望忆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子竿秆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

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