阮一峰ES6教程讀書(shū)筆記(六)對(duì)象的新增方法

1. Object.is()

在ES6之前我們總是通過(guò)相等運(yùn)算符==或者嚴(yán)格相等運(yùn)算符===去判斷兩個(gè)值是否相等,但是這兩者都有一定的缺陷姻僧。所以JavaScript缺乏一種運(yùn)算,能夠在所有環(huán)境中判斷兩個(gè)值是不是一樣的谒养,如果是一樣的就應(yīng)該相等滔岳。
ES6提出了同值相等算法,用來(lái)解決這個(gè)問(wèn)題乏奥,該算法與===表現(xiàn)較為類似,不同之處在于比較+0-0和比較NaN與其自身:

+0 === -0 // true
NaN === NaN // false

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

在沒(méi)有部署Object.is()方法的環(huán)境可以通過(guò)以下代碼來(lái)部署該方法:

Object.defineProperty(Object, 'is', {
  value: function(x, y) {
    if (x === y) {
      // 針對(duì)+0 不等于 -0的情況
      return x !== 0 || 1 / x === 1 / y;
    }
    // 針對(duì)NaN的情況
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
})

2. Object.assign()

Object.assign()主要用于對(duì)象的合并翔忽,其行為是將源對(duì)象的所有可枚舉屬性和方法添加到目標(biāo)對(duì)象中英融。

const [target, source] = [{}, {name: 'bing', age: 23}]
Object.assign(target, source)

target // {name: 'bing', age: 23}

其行為與擴(kuò)展運(yùn)算符類似盏檐,不過(guò)擴(kuò)展運(yùn)算符是把所有的源對(duì)象的屬性和方法都放到了一個(gè)新的對(duì)象中歇式,但是Object.assign()是把源對(duì)象的屬性和方法放到了目標(biāo)對(duì)象中。

2.1 如果有同名屬性

如果有同名屬性胡野,那么后面的屬性會(huì)覆蓋前面的屬性值

let a = {name: 'bing'}
let b = {name: 'yan', age: 24}
let c = {name: 'can', age: 27}

Object.assign(a,b,c) // {name: "can", age: 27}

2.2 如果參數(shù)不是對(duì)象

嚴(yán)謹(jǐn)?shù)膩?lái)說(shuō)材失,如果源對(duì)象參數(shù)不是對(duì)象,或者是特殊對(duì)象(正則表達(dá)式硫豆,Date對(duì)象等)龙巨,那么該方法會(huì)直接跳過(guò)參數(shù)而不會(huì)報(bào)錯(cuò)

let a = new Date()
let b = {}

Object.assign(b, a) // {}

如果目標(biāo)對(duì)象不是對(duì)象或者是特殊對(duì)象,那么會(huì)返回一個(gè)包裝對(duì)象熊响,當(dāng)然undefinednull除外

Object.assign(null) // Cannot convert undefined or null to object
Object.assign(undefined) // Cannot convert undefined or null to object

// 下面的都會(huì)返回一個(gè)包裝對(duì)象
Object.assign(NaN)
Object.assign(2)
Object.assign('string')

2.3 參數(shù)是數(shù)組的情況

因?yàn)閿?shù)組也是一種對(duì)象旨别,當(dāng)使用該方法時(shí),數(shù)組會(huì)被當(dāng)做對(duì)象處理:

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

上述代碼中因?yàn)槟繕?biāo)數(shù)組中索引從0-3的位置都被原數(shù)組給覆蓋了汗茄,所以返回的數(shù)組是[3, 4, 5, 6]

2.4 對(duì)取值函數(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 }

上面代碼中递览,source對(duì)象的foo屬性是一個(gè)取值函數(shù)叼屠,Object.assign不會(huì)復(fù)制這個(gè)取值函數(shù),只會(huì)拿到值以后绞铃,將這個(gè)值復(fù)制過(guò)去镜雨。

3. Object.getOwnPropertyDescriptors()

ES5 的Object.getOwnPropertyDescriptor()方法會(huì)返回某個(gè)對(duì)象屬性的描述對(duì)象(descriptor)。ES2017 引入了Object.getOwnPropertyDescriptors()方法儿捧,返回指定對(duì)象所有自身屬性(非繼承屬性)的描述對(duì)象荚坞。

onst 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 } }

上述代碼中,使用該方法后反悔了一個(gè)對(duì)象纯命,對(duì)象中包括了源對(duì)象的所有自身的屬性的屬性描述對(duì)象西剥,該方法的出現(xiàn)主要是為了解決Object.assign無(wú)法拷貝getset,使用Object.getOwnPropertyDescriptors()方法配合Object.defineProperties()方法亿汞,就可以實(shí)現(xiàn)正確拷貝瞭空。

onst source = {
  set foo(value) {
    console.log(value);
  }
};

const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo')
// { get: undefined,
//   set: [Function: set foo],
//   enumerable: true,
//   configurable: true }

4. Object.setPrototypeOf()

ES6 推薦使用該方法設(shè)置原型對(duì)象,在某些時(shí)候我們想新生成一個(gè)對(duì)象使之繼承現(xiàn)有對(duì)象的原型疗我,我們可以采用以下方法:

// 方法一
const a = {name: 'bing'}
const b = a.constructor() // b繼承了a的原型

// 方法二
const a = {name: 'bing'}
const b = {}
Object.setPrototypeOf(b, Object.getPrototypeOf(a))

5. Object.values()

Object.values方法返回一個(gè)數(shù)組咆畏,成員是參數(shù)對(duì)象自身的(不含繼承的)所有可遍歷enumerable屬性的鍵值。

const a = {name: 'bing'}
a.__proto__.age = 23  // 繼承屬性
Object.defineProperty(a, 'gender', {value: 'male', enumerable: false}) 
// 不可枚舉屬性

Object.values(a) // ["bing"] 只返回自身的可枚舉屬性

如果該方法的參數(shù)是一個(gè)字符串吴裤,那么將會(huì)得到令人驚喜的結(jié)果:

Object.values('string') // ["s", "t", "r", "i", "n", "g"]
[...'string'] // ["s", "t", "r", "i", "n", "g"]
Array.from('string') // ["s", "t", "r", "i", "n", "g"]

上述三種方法都能把一個(gè)字符串分解為包含字符的數(shù)組

6. Object.entries()

Object.entries()方法返回一個(gè)數(shù)組旧找,成員是參數(shù)對(duì)象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對(duì)數(shù)組。
Object.entries的基本用途是遍歷對(duì)象的屬性麦牺。

let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
  console.log(
    `${JSON.stringify(k)}: ${JSON.stringify(v)}`
  );
}
// "one": 1
// "two": 2

Object.entries方法的另一個(gè)用處是钮蛛,將對(duì)象轉(zhuǎn)為真正的Map結(jié)構(gòu)。

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

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

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

該方法的主要目的,是將鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)還原為對(duì)象吱晒,因此特別適合將 Map 結(jié)構(gòu)轉(zhuǎn)為對(duì)象甸饱。

參考鏈接

作者:阮一峰
鏈接:http://es6.ruanyifeng.com/#docs/destructuring

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市仑濒,隨后出現(xiàn)的幾起案子叹话,更是在濱河造成了極大的恐慌,老刑警劉巖墩瞳,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件驼壶,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡喉酌,警方通過(guò)查閱死者的電腦和手機(jī)热凹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén)箩溃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人碌嘀,你說(shuō)我怎么就攤上這事涣旨。” “怎么了股冗?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵霹陡,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我止状,道長(zhǎng)烹棉,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任怯疤,我火速辦了婚禮浆洗,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘集峦。我一直安慰自己伏社,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布塔淤。 她就那樣靜靜地躺著摘昌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪高蜂。 梳的紋絲不亂的頭發(fā)上聪黎,一...
    開(kāi)封第一講書(shū)人閱讀 52,158評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音备恤,去河邊找鬼稿饰。 笑死,一個(gè)胖子當(dāng)著我的面吹牛露泊,可吹牛的內(nèi)容都是我干的喉镰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼滤淳,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼梧喷!你這毒婦竟也來(lái)了砌左?” 一聲冷哼從身側(cè)響起脖咐,我...
    開(kāi)封第一講書(shū)人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎汇歹,沒(méi)想到半個(gè)月后屁擅,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡产弹,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年派歌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了弯囊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡胶果,死狀恐怖匾嘱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情早抠,我是刑警寧澤霎烙,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站蕊连,受9級(jí)特大地震影響悬垃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜甘苍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一尝蠕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧载庭,春花似錦看彼、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至靡挥,卻和暖如春序矩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背跋破。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工簸淀, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人毒返。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓租幕,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親拧簸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子劲绪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

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

  • 1.屬性的簡(jiǎn)潔表示法 允許直接寫(xiě)入變量和函數(shù) 上面代碼表明,ES6 允許在對(duì)象之中盆赤,直接寫(xiě)變量贾富。這時(shí),屬性名為變量...
    雨飛飛雨閱讀 1,136評(píng)論 0 3
  • 一牺六、概覽 Object.is() Object.assign() Object.getOwnPropertyDes...
    HalShaw閱讀 2,192評(píng)論 0 0
  • 屬性的簡(jiǎn)潔表示法 ES6允許直接寫(xiě)入變量和函數(shù)颤枪,作為對(duì)象的屬性和方法。 上面代碼表明淑际,ES6允許在對(duì)象之中畏纲,直接寫(xiě)...
    oWSQo閱讀 510評(píng)論 0 0
  • 9.對(duì)象的擴(kuò)展 1.屬性的簡(jiǎn)潔表示法 es6允許直接寫(xiě)入變量和函數(shù)扇住,作為對(duì)象的屬性和方法--為了簡(jiǎn)潔 2.屬性名表...
    安樂(lè)_f487閱讀 528評(píng)論 0 0
  • Object.freeze() 該方法可以凍結(jié)一個(gè)對(duì)象,凍結(jié)對(duì)象指的是不能向這個(gè)對(duì)象,添加屬性、刪除屬性盗胀、修改屬性...
    秦聲閱讀 3,690評(píng)論 0 10