對象的新增方法

對象的新增方法

1.object.is()

ES5 比較兩個值是否相等入宦,只有兩個運算符:相等運算符(==)和嚴格相等運算符(===)偿乖。它們都有缺點冶伞,前者會自動轉(zhuǎn)換數(shù)據(jù)類型,后者的NaN不等于自身筑凫,以及+0等于-0。JavaScript 缺乏一種運算并村,在所有環(huán)境中巍实,只要兩個值是一樣的,它們就應(yīng)該相等橘霎。

+0===-0//true

NaN===NaN// false

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

Object.is(NaN,NaN)// true

2.object.assign()

Object.assign()方法用于對象的合并蔫浆,將源對象(source)的所有可枚舉屬性,復(fù)制到目標對象(target)姐叁。

consttarget={a:1};

constsource1={b:2};

constsource2={c:3};

Object.assign(target,source1,source2);

target// {a:1, b:2, c:3}

Object.assign()拷貝的屬性是有限制的瓦盛,只拷貝源對象的自身屬性(不拷貝繼承屬性)洗显,也不拷貝不可枚舉的屬性(enumerable: false)。

Object.assign({b:'c'},

Object.defineProperty({},'invisible', {

enumerable:false,

value:'hello'

? })

)

// { b: 'c' }

注意點

(1)淺拷貝

Object.assign()方法實行的是淺拷貝原环,而不是深拷貝挠唆。也就是說,如果源對象某個屬性的值是對象嘱吗,那么目標對象拷貝得到的是這個對象的引用玄组。

constobj1={a: {b:1}};

constobj2=Object.assign({},obj1);

obj1.a.b=2;

obj2.a.b// 2

上面代碼中,源對象obj1的a屬性的值是一個對象谒麦,Object.assign()拷貝得到的是這個對象的引用俄讹。這個對象的任何變化,都會反映到目標對象上面绕德。

(2)同名屬性的替換

對于這種嵌套的對象患膛,一旦遇到同名屬性,Object.assign()的處理方法是替換耻蛇,而不是添加踪蹬。

consttarget={a: {b:'c',d:'e'} }

constsource={a: {b:'hello'} }

Object.assign(target,source)

// { a: { b: 'hello' } }

(3)數(shù)組的處理

Object.assign()可以用來處理數(shù)組,但是會把數(shù)組視為對象臣咖。

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

// [4, 5, 3]

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

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

constsource={

getfoo() {return1}

};

consttarget={};

Object.assign(target,source)

// { foo: 1 }

上面代碼中疚漆,source對象的foo屬性是一個取值函數(shù),Object.assign()不會復(fù)制這個取值函數(shù)蚊惯,只會拿到值以后愿卸,將這個值復(fù)制過去。

(1)為對象添加屬性

classPoint{

constructor(x,y) {

Object.assign(this, {x,y});

? }

}// this 指的是當(dāng)前的對象

上面方法通過Object.assign()方法截型,將x屬性和y屬性添加到Point類的對象實例趴荸。

(2)為對象添加方法

Object.assign(SomeClass.prototype, {

someMethod(arg1, arg2) {

···

},

anotherMethod() {

···

}? ? // 把當(dāng)前對象添加到SomeClass.prototype 里面

});

// 等同于下面的寫法

SomeClass.prototype.someMethod = function (arg1, arg2) {

···

};

SomeClass.prototype.anotherMethod = function () {

···

};

上面代碼使用了對象屬性的簡潔表示法,直接將兩個函數(shù)放在大括號中宦焦,再使用assign()方法添加到SomeClass.prototype之中发钝。

(3)克隆對象

function clone(origin) {

return Object.assign({}, origin);

}

上面代碼將原始對象拷貝到一個空對象,就得到了原始對象的克隆波闹。

不過酝豪,采用這種方法克隆,只能克隆原始對象自身的值精堕,不能克隆它繼承的值孵淘。如果想要保持繼承鏈,可以采用下面的代碼歹篓。

function clone(origin) {

let originProto = Object.getPrototypeOf(origin);

return Object.assign(Object.create(originProto), origin);

}

(4)合并多個對象

const merge =

(target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一個新對象瘫证,可以改寫上面函數(shù)揉阎,對一個空對象合并

const merge =

(...sources) => Object.assign({}, ...sources);

(5)為屬性指定默認值

const DEFAULTS = {

logLevel: 0,

outputFormat: 'html'

};

function processContent(options) {

options = Object.assign({}, DEFAULTS, options);

console.log(options);

// ...

}

上面代碼中,DEFAULTS對象是默認值背捌,options對象是用戶提供的參數(shù)毙籽。Object.assign()方法將DEFAULTS和options合并成一個新對象,如果兩者有同名屬性毡庆,則options的屬性值會覆蓋DEFAULTS的屬性值坑赡。

注意,由于存在淺拷貝的問題么抗,DEFAULTS對象和options對象的所有屬性的值毅否,最好都是簡單類型,不要指向另一個對象乖坠。否則搀突,DEFAULTS對象的該屬性很可能不起作用。

3.object.getOwnPropertyDescriptOrs()

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

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

4.? _ _ proto? _ _ 屬性 ,object.setPrototypeOf(),object.setPrototypeOf()

__proto__屬性(前后各兩個下劃線)顽分,用來讀取或設(shè)置當(dāng)前對象的原型對象

// es5 的寫法

const obj = {

method: function() { ... }

};

obj.__proto__ = someOtherObj;

// es6 的寫法

var obj = Object.create(someOtherObj);

obj.method = function() { ... };

該屬性沒有寫入 ES6 的正文,而是寫入了附錄施蜜,原因是__proto__前后的雙下劃線卒蘸,說明它本質(zhì)上是一個內(nèi)部屬性,而不是一個正式的對外的 API翻默,只是由于瀏覽器廣泛支持缸沃,才被加入了? ES6。標準明確規(guī)定修械,只有瀏覽器必須部署這個屬性趾牧,其他運行環(huán)境不一定需要部署,而且新的代碼最好認為這個屬性是不存在的肯污。因此翘单,無論從語義的角度,還是從兼容性的角度蹦渣,都不要使用這個屬性哄芜,而是使用下面的Object.setPrototypeOf()(寫操作)、Object.getPrototypeOf()(讀操作)柬唯、Object.create()(生成操作)代替认臊。

Object.setPrototypeOf()

Object.setPrototypeOf方法的作用與__proto__相同,用來設(shè)置一個對象的原型對象(prototype)锄奢,返回參數(shù)對象本身失晴。它是 ES6 正式推薦的設(shè)置原型對象的方法剧腻。

// 格式

Object.setPrototypeOf(object, prototype)

// 用法

const o = Object.setPrototypeOf({}, null);

Object.getPrototypeOf()

該方法與Object.setPrototypeOf方法配套,用于讀取一個對象的原型對象师坎。

Object.getPrototypeOf(obj);

function Rectangle() {

// ...

}

const rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangle.prototype

// true

Object.setPrototypeOf(rec, Object.prototype);

Object.getPrototypeOf(rec) === Rectangle.prototype

// false

如果參數(shù)不是對象恕酸,會被自動轉(zhuǎn)為對象

// 等同于 Object.getPrototypeOf(Number(1))

Object.getPrototypeOf(1)

// Number {[[PrimitiveValue]]: 0}

// 等同于 Object.getPrototypeOf(String('foo'))

Object.getPrototypeOf('foo')

// String {length: 0, [[PrimitiveValue]]: ""}

// 等同于 Object.getPrototypeOf(Boolean(true))

Object.getPrototypeOf(true)

// Boolean {[[PrimitiveValue]]: false}

Object.getPrototypeOf(1) === Number.prototype // true

Object.getPrototypeOf('foo') === String.prototype // true

Object.getPrototypeOf(true) === Boolean.prototype // true

5.object.keys(),object.values() object.entries()

Object.keys()

ES5 引入了Object.keys方法,返回一個數(shù)組胯陋,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名蕊温。

varobj={foo:'bar',baz:42};

Object.keys(obj)

// ["foo", "baz"]

Object.values()

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

constobj={foo:'bar',baz:42};

Object.values(obj)

// ["bar", 42]

Object.entries()

Object.entries()方法返回一個數(shù)組义矛,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對數(shù)組。

constobj={foo:'bar',baz:42};

Object.entries(obj)

// [ ["foo", "bar"], ["baz", 42] ]

6.object.fromEntries()

Object.fromEntries()方法是Object.entries()的逆操作盟萨,用于將一個鍵值對數(shù)組轉(zhuǎn)為對象凉翻。

Object.fromEntries([

['foo','bar'],

['baz',42]

])

// { foo: "bar", baz: 42 }

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

// 例一

constentries=newMap([

['foo','bar'],

['baz',42]

]);

Object.fromEntries(entries)

// { foo: "bar", baz: 42 }

// 例二

constmap=newMap().set('foo',true).set('bar',false);

Object.fromEntries(map)

// { foo: true, bar: false }

該方法的一個用處是配合URLSearchParams對象,將查詢字符串轉(zhuǎn)為對象胞谭。

Object.fromEntries(newURLSearchParams('foo=bar&baz=qux'))

// { foo: "bar", baz: "qux" }

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末垃杖,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子丈屹,更是在濱河造成了極大的恐慌调俘,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件旺垒,死亡現(xiàn)場離奇詭異彩库,居然都是意外死亡,警方通過查閱死者的電腦和手機先蒋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門骇钦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鞭达,你說我怎么就攤上這事司忱。” “怎么了畴蹭?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵坦仍,是天一觀的道長。 經(jīng)常有香客問我叨襟,道長繁扎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮梳玫,結(jié)果婚禮上爹梁,老公的妹妹穿的比我還像新娘。我一直安慰自己提澎,他們只是感情好姚垃,可當(dāng)我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盼忌,像睡著了一般积糯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谦纱,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天看成,我揣著相機與錄音,去河邊找鬼跨嘉。 笑死川慌,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的祠乃。 我是一名探鬼主播梦重,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼亮瓷!你這毒婦竟也來了忍饰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤寺庄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后力崇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斗塘,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年亮靴,在試婚紗的時候發(fā)現(xiàn)自己被綠了馍盟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡茧吊,死狀恐怖贞岭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情搓侄,我是刑警寧澤瞄桨,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站讶踪,受9級特大地震影響芯侥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一柱查、第九天 我趴在偏房一處隱蔽的房頂上張望廓俭。 院中可真熱鬧,春花似錦唉工、人聲如沸研乒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽雹熬。三九已至,卻和暖如春奖地,著一層夾襖步出監(jiān)牢的瞬間橄唬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工参歹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留仰楚,地道東北人。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓犬庇,卻偏偏與公主長得像僧界,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子臭挽,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,440評論 2 359

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