2018-01-12 ES6?阮一峰教程摘記5對象的擴展等

9.對象的擴展

1.屬性的簡潔表示法

es6允許直接寫入變量和函數(shù)回季,作為對象的屬性和方法--為了簡潔


簡寫例子


CommonJS 模塊輸出一組變量,就非常合適使用簡潔寫法

2.屬性名表達式

字面量定義對象厕怜,除es5中的標(biāo)識符定義屬性外纺讲,es6新增 表達式放到方括號內(nèi) 來作為對象的屬性名/方法名。


注意:


3.方法的name屬性

函數(shù)的name屬性矛辕,返回函數(shù)名笑跛。對象方法也是函數(shù),因此也有name屬性聊品。


對象的方法的name屬性

注意點:

1.使用了取值函數(shù)(getter)和存值函數(shù)(setter)飞蹂,會在name前加上‘get/set’

2.特殊情況1:bind方法創(chuàng)造的函數(shù),name屬性返回bound加上原函數(shù)的名字

3.特殊情況2:如果對象的方法是一個 Symbol 值翻屈,那么name屬性返回的是這個 Symbol 值的描述

4.Object.is()

用于比較兩個值是否嚴(yán)格相等陈哑;彌補===的兩個缺陷:

1)+0===-0? //true

2)NaN===NaN? //false


ES5 可以通過上面的代碼,部署Object.is

5.Object.assign()

用于對象的合并,將源對象(source)的所有可枚舉屬性惊窖,復(fù)制到目標(biāo)對象(target)用于對象的合并刽宪,將源對象(source)的所有可枚舉屬性,復(fù)制到目標(biāo)對象(target)界酒;例如:Object.assign(target,source1,source2);

特點:

1)若出現(xiàn)同名屬性圣拄,則后面的屬性會覆蓋前面的屬性

2)Object.assign(obj)===obj // true

如果只有一個參數(shù),Object.assign會直接返回該參數(shù)毁欣。

3)

4)source無法轉(zhuǎn)換成對象(null,undefined)庇谆,則會被跳過處理;
? 其他類型的值(即數(shù)值、字符串和布爾值)不在首參數(shù)凭疮,也不會報錯饭耳。但是,除了字符串會以數(shù)組形式执解,拷貝入目標(biāo)對象寞肖,其他值都不會產(chǎn)生效果。

5)Object.assign拷貝的屬性是有限制的材鹦,只拷貝源對象的自身屬性(不拷貝繼承屬性)逝淹,也不拷貝不可枚舉的屬性(enumerable: false)

6)屬性名為 Symbol 值的屬性,也會被Object.assign拷貝

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })

// { a: 'b', Symbol(c): 'd' }

注意點:

1)淺拷貝

如果源對象某個屬性的值是對象桶唐,那么目標(biāo)對象拷貝得到的是這個對象的引用

2)同名屬性是替換而非添加

3)數(shù)組的處理


4)取值函數(shù)的處理

Object.assign只能進行值的復(fù)制栅葡,如果要復(fù)制的值是一個取值函數(shù),那么將求值后再復(fù)制


Object.assign()方法的常見用途:

1)為對象添加屬性

2)為對象添加方法

3)克隆對象


4)合并多個對象

5)為屬性指定默認值

6.屬性的可枚舉性和遍歷

可枚舉性

描述對象的enumerable屬性尤泽,稱為”可枚舉性“欣簇,如果該屬性為false,就表示某些操作會忽略當(dāng)前屬性坯约。

目前熊咽,有四個操作會忽略enumerable為false的屬性。

for...in循環(huán):只遍歷對象自身的和繼承的可枚舉的屬性闹丐。

Object.keys():返回對象自身的所有可枚舉的屬性的鍵名横殴。

JSON.stringify():只串行化對象自身的可枚舉的屬性。

Object.assign(): 忽略enumerable為false的屬性卿拴,只拷貝對象自身的可枚舉的屬性衫仑。

總的來說,操作中引入繼承的屬性會讓問題復(fù)雜化堕花,大多數(shù)時候文狱,我們只關(guān)心對象自身的屬性。所以缘挽,盡量不要用for...in循環(huán)瞄崇,而用Object.keys()代替呻粹。

遍歷

es6的5種方法遍歷屬性:

1)for...in

2)Object.keys()

3)Object.ownKeys()

4)Object.getOwnPropertyNames(obj)

5)Object.getOwnPropertySymbols(obj)

以上的 5 種方法遍歷對象的鍵名,都遵守同樣的屬性遍歷的次序規(guī)則苏研。

首先遍歷所有數(shù)值鍵等浊,按照數(shù)值升序排列。

其次遍歷所有字符串鍵楣富,按照加入時間升序排列凿掂。

最后遍歷所有 Symbol 鍵,按照加入時間升序排列纹蝴。


7.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptor方法會返回某個對象屬性的描述對象(descriptor)庄萎。ES2017 引入了Object.getOwnPropertyDescriptors方法,返回指定對象所有自身屬性(非繼承屬性)的描述對象

8.原型鏈對象的操作方法:__proto__屬性塘安,Object.setPrototypeOf(),Object.getPrototypeOf()

(1)__proto__屬性:

讀取或設(shè)置當(dāng)前對象的prototype對象(原型對象)

標(biāo)準(zhǔn)明確規(guī)定糠涛,只有瀏覽器必須部署這個屬性,其他運行環(huán)境不一定需要部署兼犯,而且新的代碼最好認為這個屬性是不存在的忍捡。

無論從語義的角度,還是從兼容性的角度切黔,都不要使用這個屬性砸脊,而是使用下面的Object.setPrototypeOf()(寫操作)、Object.getPrototypeOf()(讀操作)纬霞、Object.create()(生成操作)代替

實現(xiàn)上凌埂,__proto__調(diào)用的是Object.prototype.__proto__


(2)Object.setPrototypeOf()

用來設(shè)置一個對象的prototype對象,返回參數(shù)對象本身(ES6 正式推薦的設(shè)置原型對象的方法)


格式中诗芜,將prototype設(shè)為object的原型瞳抓,所以從objecct可以讀取prototype的屬性。

注意:

1)第一個參數(shù)不是對象時伏恐,會自動轉(zhuǎn)成對象孩哑,但方法返回的時第一個參數(shù)本身,所以不會有變化

2)若第一個參數(shù)是undefined或null,無法轉(zhuǎn)成對象翠桦,則會報錯

(3)Object.getPrototypeOf()

用來讀取對象的prototype對象? 格式:Object.getPrototypeOf(obj)

注意點同Object.setPrototypeOf()

9.super關(guān)鍵字

this關(guān)鍵字總是指向函數(shù)所在的當(dāng)前對象横蜒,ES6 又新增了另一個類似的關(guān)鍵字super,指向當(dāng)前對象的原型對象


目前销凑,只有對象方法的簡寫法可以讓 JavaScript 引擎確認愁铺,定義的是對象的方法

JavaScript 引擎內(nèi)部,super.foo等同于Object.getPrototypeOf(this).foo(屬性)或Object.getPrototypeOf(this).foo.call(this)(方法)闻鉴。

10.Object.keys(),Object.values(),Object.entries()--鍵,值茂洒,鍵值對

Object.keys():ES5中引入的孟岛,返回一個數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名;

后兩個方法也是不含繼承的渠羞,可遍歷的斤贰;返回數(shù)組的成員順序,與本章的《屬性的遍歷》部分介紹的排列規(guī)則一致

ES2017 引入了跟Object.keys配套的Object.values和Object.entries次询,作為遍歷一個對象的補充手段荧恍,供for...of循環(huán)使用。


例子

11.對象的擴展運算符...

ES2017 將這個運算符引入了對象屯吊;? 和數(shù)組的擴展運算符很相似

用于:(1)解構(gòu)賦值--擴展運算符的解構(gòu)賦值送巡,不能復(fù)制繼承自原型對象的屬性

(2)擴展運算符--用于取出參數(shù)對象的所有可遍歷屬性,拷貝到當(dāng)前對象之中


類似的盒卸,也可以合并兩個對象

12.Null傳導(dǎo)運算符(提案)


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末骗爆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蔽介,更是在濱河造成了極大的恐慌摘投,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虹蓄,死亡現(xiàn)場離奇詭異犀呼,居然都是意外死亡,警方通過查閱死者的電腦和手機薇组,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門外臂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人体箕,你說我怎么就攤上這事专钉。” “怎么了累铅?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵跃须,是天一觀的道長。 經(jīng)常有香客問我娃兽,道長菇民,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任投储,我火速辦了婚禮第练,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘玛荞。我一直安慰自己娇掏,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布勋眯。 她就那樣靜靜地躺著婴梧,像睡著了一般下梢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上塞蹭,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天孽江,我揣著相機與錄音,去河邊找鬼番电。 笑死岗屏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的漱办。 我是一名探鬼主播这刷,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼洼冻!你這毒婦竟也來了崭歧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤撞牢,失蹤者是張志新(化名)和其女友劉穎率碾,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體屋彪,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡所宰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了畜挥。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仔粥。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蟹但,靈堂內(nèi)的尸體忽然破棺而出躯泰,到底是詐尸還是另有隱情,我是刑警寧澤华糖,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布麦向,位于F島的核電站,受9級特大地震影響客叉,放射性物質(zhì)發(fā)生泄漏诵竭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一兼搏、第九天 我趴在偏房一處隱蔽的房頂上張望卵慰。 院中可真熱鬧,春花似錦佛呻、人聲如沸裳朋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽再扭。三九已至氧苍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泛范,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工紊撕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留罢荡,地道東北人。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓对扶,卻偏偏與公主長得像区赵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子浪南,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,969評論 2 355

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

  • 屬性的簡潔表示法 ES6允許直接寫入變量和函數(shù)笼才,作為對象的屬性和方法。 上面代碼表明络凿,ES6允許在對象之中骡送,直接寫...
    oWSQo閱讀 509評論 0 0
  • 1.屬性的簡潔表示法 允許直接寫入變量和函數(shù) 上面代碼表明,ES6 允許在對象之中絮记,直接寫變量摔踱。這時,屬性名為變量...
    雨飛飛雨閱讀 1,136評論 0 3
  • 屬性的簡潔表示法 ES6允許直接寫入變量和函數(shù)怨愤,作為對象的屬性和方法派敷。這樣的書寫更加簡潔。 上面代碼表明撰洗,ES6允...
    呼呼哥閱讀 2,923評論 0 2
  • 2017-8-10學(xué)經(jīng)匯報: 一篮愉、學(xué)經(jīng)日期:2017年8月10日 農(nóng)歷潤六月十九 晴 星期四 寶貝年齡...
    b0a4ca4b06a4閱讀 159評論 0 1
  • 堅持星球天使班開學(xué)典禮流程 時 間:2018年7月5號6:30-7:30 地 點:YY 134547097...
    寬幸福閱讀 1,720評論 0 15