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

(1)屬性名表達(dá)式
JavaScript定義對(duì)象的屬性漱贱,有兩種方法妇垢。

//方法一
obj.foo = true
//方法二
obj['a' + 'bc'] = 123

(2)方法的name屬性:函數(shù)的name屬性,返回函數(shù)名宰衙。對(duì)象方法也是函數(shù)平道,因此也有name屬性。

 const person = {
   sayName() {
     console.log('hello')
   }
 }
person.sayName.name    // 'sayName'

上面代碼中供炼,方法的name屬性返回函數(shù)名(即方法名)一屋。

如果對(duì)象的方法使用了取值函數(shù)(getter)和存值函數(shù)(setter),則name屬性不是在該方法上面,而是該方法的屬性的描述對(duì)象的get和set屬性上面袋哼,返回值是方法名前加上get和set

 const obj = {
    get foo() {},
    set foo() {}
 }
 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'

有兩種特殊情況:bind方法創(chuàng)造的函數(shù)冀墨,name屬性返回bound加上原函數(shù)的名字;Function構(gòu)造函數(shù)創(chuàng)造的函數(shù)涛贯,name屬性返回anonymous.

(new Function()).name  // 'anonymous'
var doSomething = function() { }
doSomething.bind().name   // 'bound doSomething'

屬性的遍歷

ES6 一共有5種方法可以遍歷對(duì)象的屬性

(1)for...in...
    for...in...循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性(不含Symbol屬性)
(2)Object.keys(obj)
    Object.keys返回一個(gè)數(shù)組诽嘉,包括對(duì)象自身的(不含繼承的)所以可枚舉屬性(不含Symbol屬性)的鍵名
(3)Object.getOwnPropertyNames(obj)
    Object.getOwnPropertyNames返回一個(gè)數(shù)組,包含自身的所有屬性(不含Symbol屬性弟翘,但是包括不可枚舉屬性)的鍵名
(4)Object.getOwnPropertySymbols(obj)
    Object.getOwnPropertySymbols返回一個(gè)數(shù)組虫腋,包含對(duì)象自身的所有Symbol屬性的鍵名
(5)Reflect.ownKeys(obj)
    Reflect.ownKeys返回一個(gè)數(shù)組,包含對(duì)象自身的所有鍵名稀余,不管鍵名是 Symbol 或字符串悦冀,也不管是否可枚舉

遵守的屬性遍歷的次序規(guī)則:

首先遍歷所有數(shù)值鍵,按照數(shù)值升序排列睛琳。
其次遍歷所有字符串鍵盒蟆,按照加入時(shí)間升序排列。
最后遍歷所有 Symbol 鍵师骗,按照加入時(shí)間升序排列历等。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

(3)super關(guān)鍵字:指向當(dāng)前對(duì)象的原型對(duì)象

 const proto = {
   foo: 'hello'
 };

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

注意,super關(guān)鍵字表示原型對(duì)象時(shí)辟癌,只能用在對(duì)象的方法之中募闲,用在其他地方都會(huì)報(bào)錯(cuò)
(4)Object.is():比較兩個(gè)值是否嚴(yán)格相等,與嚴(yán)格比較運(yùn)算符(===)的行為基本一致

Object.is('foo','foo')  // true
Object.is({},{})  // false

不同之處只有兩個(gè):一是+0不等于-0愿待,二是NaN等于自身

 +0 === -0  //true
 NaN === NaN // false
 Object.is(+0,-0)  // false
 Object.is(NaN,NaN)  // true

(5)Object.assign():用于對(duì)象的合并,將源對(duì)象(source)的所有可枚舉屬性靴患,復(fù)制到目標(biāo)對(duì)象(target)

const target = {a:1}
const source1 = {b:2}
const source2 = {c:3}
Object.assign(target,source1,source2);
target  // {a:1,b:2,c:3}

Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象仍侥,后面的參數(shù)都是源對(duì)象

注意,如果目標(biāo)對(duì)象與源對(duì)象有同名屬性鸳君,或多個(gè)源對(duì)象有同名屬性农渊,則后面的屬性會(huì)覆蓋前面的屬性

const target = {a:1,b:1}
const source1 = {b:2,c:2}
const source2 = {c:3}
Object.assign(target,source1,source2)
target // {a:1,b:2,c:3}

如果只有一個(gè)參數(shù),Object.assign會(huì)直接返回該參數(shù)

 const obj = {a:1}
 Object.assign(obj) === obj

如果該參數(shù)不是對(duì)象或颊,則會(huì)先轉(zhuǎn)成對(duì)象砸紊,然后返回

typeof Object.assign(2)  // object

由于undefined和null無(wú)法轉(zhuǎn)成對(duì)象传于,所有如果它們作為參數(shù),就會(huì)報(bào)錯(cuò)

Object.assign(undefined)  //報(bào)錯(cuò)
Object.assign(null)  // 報(bào)錯(cuò)

如果非對(duì)象參數(shù)出現(xiàn)在源對(duì)象的位置(即非首參數(shù))醉顽,那么處理規(guī)則有所不同沼溜。首先,這些參數(shù)都會(huì)轉(zhuǎn)成對(duì)象游添,如果無(wú)法轉(zhuǎn)成對(duì)象系草,就會(huì)跳過(guò)。這意味著唆涝,如果undefined和null不在首參數(shù)找都,就不會(huì)報(bào)錯(cuò)。

let obj = {a:1}
Object.assign(obj,undefined) === obj // true
Object.assign(obj,null) === obj  // true

其他類(lèi)型的值廊酣,(即數(shù)值能耻、字符串和布爾值)不在首參數(shù),也不會(huì)報(bào)錯(cuò)亡驰。但是晓猛,除了字符串會(huì)以數(shù)組形式,拷貝入目標(biāo)對(duì)象隐解,其他值都不會(huì)產(chǎn)生效果

const v1 = 'abc'
const v2 = true
const v3 = 10

const obj = Object.assign({},v1,v2,v3)
obj  // {"0":"a","1":"b","2":"c"}

屬性名為Symbol值的屬性鞍帝,也會(huì)被Object.assign拷貝

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

注意點(diǎn)
(1)淺拷貝
Object.assign方法實(shí)行的是淺拷貝,而不是深拷貝煞茫。也就是說(shuō)帕涌,如果源對(duì)象某個(gè)屬性的值是對(duì)象,那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用

const obj1 = {a: {b: 1}}
const obj2 = Object.assign({},obj1)

obj1.a.b = 2
obj2.a.b // 2

(2)同名屬性的替換
對(duì)于這種嵌套的對(duì)象续徽,一旦遇到同名屬性蚓曼,Object.assign的處理方法是替換,而不是添加

const target = {a: {b: 'c', d: 'e'}}
const source = {a: { b: 'hello'}}
Object.assign(target, source)
//  { a: { b: 'hello' } }

(3)數(shù)組的處理
Object.assign可以用來(lái)處理數(shù)組钦扭,但是會(huì)把數(shù)組視為對(duì)象

Object.assign([1,2,3], [4,5])
//[4,5,3]

(4)取值函數(shù)的處理
Object.assign只能進(jìn)行值的復(fù)制纫版,如果要復(fù)制的值是一個(gè)取值函數(shù),那么將求值后再?gòu)?fù)制

const source = {
  get foo() = {return 1}
}
const target = {}
Object.assign(target,source)  // {foo: 1}

(6)Object.getOwnPropertyDescriptors():返回???對(duì)象所有自身屬性(非繼承屬性)的描述對(duì)象

const obj = {
   foo: 123,
   get bar() { return 'abc' }
}
Object.getOwnPropertyDescriptors(obj)
 // { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

(7)Object.setPrototypeOf():設(shè)置原型對(duì)象的方法

//格式
Object.setPrototypeOf(object, prototype)
//用法
const o = Object.setPrototypeOf({}, null)

(8)Object.getPrototypeOf():用于讀取一個(gè)對(duì)象的原型對(duì)象

 Object.getPrototypeOf(obj)

(9)Object.fromEntries():Object.fromEntries()方法是Object.entries()的逆操作客情,用于將一個(gè)鍵值對(duì)數(shù)組轉(zhuǎn)為對(duì)象

 Obejct.fromEntries([
    ['foo', 'bar'],
    ['baz', 42]
 ])
 // { foo: 'bar', baz: 42}

原文鏈接:
https://es6.ruanyifeng.com/#docs/object
https://es6.ruanyifeng.com/#docs/object-methods

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末其弊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子膀斋,更是在濱河造成了極大的恐慌梭伐,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仰担,死亡現(xiàn)場(chǎng)離奇詭異糊识,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)赂苗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)愉耙,“玉大人,你說(shuō)我怎么就攤上這事拌滋∑友兀” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵鸠真,是天一觀(guān)的道長(zhǎng)悯仙。 經(jīng)常有香客問(wèn)我,道長(zhǎng)吠卷,這世上最難降的妖魔是什么锡垄? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮祭隔,結(jié)果婚禮上货岭,老公的妹妹穿的比我還像新娘。我一直安慰自己疾渴,他們只是感情好千贯,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著搞坝,像睡著了一般搔谴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上桩撮,一...
    開(kāi)封第一講書(shū)人閱讀 51,482評(píng)論 1 302
  • 那天敦第,我揣著相機(jī)與錄音,去河邊找鬼店量。 笑死芜果,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的融师。 我是一名探鬼主播右钾,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼旱爆!你這毒婦竟也來(lái)了舀射?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤怀伦,失蹤者是張志新(化名)和其女友劉穎后控,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體空镜,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了吴攒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片张抄。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖洼怔,靈堂內(nèi)的尸體忽然破棺而出署惯,到底是詐尸還是另有隱情,我是刑警寧澤镣隶,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布极谊,位于F島的核電站,受9級(jí)特大地震影響安岂,放射性物質(zhì)發(fā)生泄漏轻猖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一域那、第九天 我趴在偏房一處隱蔽的房頂上張望咙边。 院中可真熱鬧,春花似錦次员、人聲如沸败许。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)市殷。三九已至,卻和暖如春刹衫,著一層夾襖步出監(jiān)牢的瞬間醋寝,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工绪妹, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留甥桂,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓邮旷,卻偏偏與公主長(zhǎng)得像黄选,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子婶肩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

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