Object對象常用操作

1椅棺、Object.assign(target,source1,source2,...)

主要用于對象的合并听隐,將源對象source的所有可枚舉屬性合并到目標(biāo)對象target上

  • 只拷貝源對象的自身屬性碾牌,不拷貝繼承(原型上)的屬性,同名屬性會替換袱耽。
  • 實(shí)行的是淺拷貝扶踊,而不是深拷貝。也就是說实胸,如果源對象某個屬性的值是對象他嫡,那么目標(biāo)對象拷貝得到的是這個對象的引用番官。
  • 進(jìn)行值的復(fù)制,如果要復(fù)制的值是一個取值函數(shù)钢属,那么將求值后再復(fù)制徘熔。
  • 可以用來處理數(shù)組,但是會把數(shù)組視為對象
const target = {
    x : 0,
    y : 1
};
const source = {
    x : 1,
    z : 2 ,
    fn : {
        number : 1
    }
};
Object.assign(target, source);  
// target  {x : 1, y : 1, z : 2, fn : {number : 1}}    // 同名屬性會被覆蓋
// source  {x : 1, z : 2, fn : {number : 1}}
target.fn.number = 2;                                  // 拷貝為對象引用
// source  {x : 1, z : 2, fn : {number : 2}}
 
function Person(){
    this.name = 1
};
Person.prototype.country = 'china';
let student = new Person();
student.age = 29 ;
const young = {insterst : 'sport'};
Object.assign(young,student);
// young {instest : 'sport' , age : 29, name: 1}               // 只能拷貝自身的屬性淆党,不能拷貝prototype
 
Object.assign([1, 2, 3], [4, 5])                      // 把數(shù)組當(dāng)作對象來處理
// [4, 5, 3]
2酷师、Object.create(proto[, propertiesObject])

該方法創(chuàng)建一個新對象,使用現(xiàn)有的對象來提供新創(chuàng)建的對象的proto

  • proto:必須宁否。新創(chuàng)建對象的原型對象窒升,即通過 Object.create()生成的對象的原型 指向 proto(可以是 null、對象慕匠、函數(shù)的 prototype 屬性),設(shè)置原型對象的屬性和方法域醇。
    (注:創(chuàng)建空原型的對象時需傳 null , 否則會拋出 TypeError 異常)台谊。
  • propertiesObjec:可選。 添加到新創(chuàng)建對象的可枚舉屬性(即其自身的屬性譬挚,而不是原型鏈上的枚舉屬性)對象的屬性描述符以及相應(yīng)的屬性名稱锅铅。這些屬性對應(yīng) Object.defineProperties()的第二個參數(shù)。
  • 返回值:一個新對象减宣,帶著指定的原型對象和屬性盐须。
var parent = {
    x : 1,
    y : 1
}
var child = Object.create(parent,{
    z : {  
        writable:true,
        configurable:true,
        value: "newAdd"
    }
});
console.log(child)
console.log(Object.getPrototypeOf(child)) // {x: 1, y: 1}
image.png

new Object() 和 Object.create()比較

1、對象創(chuàng)建方式

  • new Object(obj) :通過構(gòu)造函數(shù)的對象, 對象添加的屬性 obj 是在自身實(shí)例下
const org = {
   type: 'human'
}
var Obj = new Object(org)
console.log(Obj) // { type: 'human' }
console.log(Obj.__proto__) // {} -> built-in
console.log(Obj.type) // human
  • Object.create(proto[, propertiesObject]) :創(chuàng)建的新對象繼承一個對象漆腌。 添加的屬性 proto 是在原型下贼邓,添加的屬性 propertiesObject 才在自身實(shí)例下
var ObjCre = Object.create(org, { name: { value: "JyLie" } })
console.log(ObjCre) // {name: 'JyLie'}
console.log(ObjCre.__proto__) // { type: 'human' }
console.log(ObjCre.type) // human

2、創(chuàng)建空對象時闷尿,是否有原型屬性

  • Object.create(null)創(chuàng)建空對象塑径,新對象是沒有原型屬性的
Object.create(null) // {} 沒有原型對象的空對象。純空對象填具。
  • 構(gòu)造函數(shù)或?qū)ο笞置媪糠椒▌?chuàng)建空對象時统舀,新對象有原型屬性(built-in)
new Object() // {} 擁有built-in

3、對象屬性描述符

  • 通過 Object.create 第二個參數(shù)創(chuàng)建非空對象的屬性描述符默認(rèn)是為 false 的劳景,不可寫,不可枚舉,不可配置
3誉简、Object.entries() 和 Object.fromEntries()

Object.entries()返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組,其排列與使用 for…in 循環(huán)遍歷該對象時返回的順序一致(區(qū)別在于 for-in 循環(huán)還會枚舉原型鏈中的屬性)
Object.fromEntries() 方法把鍵值對列表轉(zhuǎn)換為一個對象盟广。

const object1 = {
    a: 'somestring',
    b: 42,
    c: {
        d: true,
        e: 22
    }
};
let attr = Object.entries(object1)
console.log(attr);//[['a': 'somestring'],['b': 42],['c',{d: true, e: 22}]]
for (let [key, value] of attr) {
    console.log(`${key}: ${value}`);
    // a: somestring
    // b: 42
    // c: [object Object]
}
let obj = Object.fromEntries(attr) 
console.log(obj) // {a: "somestring", b: 42, c: {{d: true, e: 22}}}
4闷串、Object.defineProperty()

會直接在一個對象上定義一個新屬性,或者修改一個對象的現(xiàn)有屬性并指定該屬性的配置衡蚂,并返回此對象窿克。
Object.defineProperty(obj, prop, descriptor)

  • obj 要定義屬性的對象
  • prop 要定義或修改的屬性的名稱或 Symbol
  • descriptor 要定義或修改的屬性描述符,如果不設(shè)置屬性的特性骏庸,那么configurable、enumerable年叮、writable這些值都為默認(rèn)的false
  • 屬性描述符

數(shù)據(jù)描述符和存取描述符不能同時是兩者,如果一個描述符同時擁有 value 或 writable 和 get 或 set 鍵具被,則會產(chǎn)生一個異常。(因?yàn)間et和set設(shè)置的時候js會忽略value和writable的特性)


公用
configurable 默認(rèn)為 false只损。
是否可以刪除目標(biāo)屬性或是否可以再次修改屬性的特性( writable, configurable, enumerable)一姿。設(shè)置為true可以被刪除或可以重新設(shè)置特性;設(shè)置為false跃惫,不能被可以被刪除或不可以重新設(shè)置特性叮叹。

var o = {}; // 創(chuàng)建一個新對象
Object.defineProperty(o, 'a', {
    configurable:false,
    value:1
});
console.log(o.a); // 1
    delete o.a ;
    console.log(o.a); // 1

Object.defineProperty(o, 'b', {
    configurable:true,
    value:1
});
console.log(o.b); // 1
delete o.b ;
console.log(o.b); // undefined

enumerable 默認(rèn)為 false
此屬性是否可以被枚舉(使用for...in或Object.keys())。設(shè)置為true可以被枚舉爆存;設(shè)置為false蛉顽,不能被枚舉。默認(rèn)為false先较。

var o = {}; 
Object.defineProperty(o, 'a', {
      value: 1,
      enumerable:true,
      configurable:true
 });
Object.defineProperty(o, 'b', {
      value: 2,
      enumerable:true
});
Object.defineProperty(o, 'c', {
      value: 3 
      //默認(rèn)enumerable為false
});
o.d = 4; // 如果使用直接賦值的方式創(chuàng)建對象的屬性携冤,則 enumerable 為 true
for (const key in o) {
      console.log('1',key); // a b d
 }


數(shù)據(jù)描述符
value 默認(rèn) undefined
該屬性對應(yīng)的值。
writable 默認(rèn)為 false
屬性的值value是否可以被重寫闲勺。設(shè)置為true可以被重寫曾棕;設(shè)置為false,不能被重寫菜循。

var o = {}; // 創(chuàng)建一個新對象
// 在對象中添加一個屬性與數(shù)據(jù)描述符的示例
Object.defineProperty(o, 'a', {
  value : 30,
  writable : true,
  enumerable : true,
  configurable : true
});
console.log(o.a) // 30
Object.defineProperty(o, 'a', {
      value: 30,
      writable: false
});
o.a = 40;
console.log(o.a); // 30 無法修改

存取描述符
get 默認(rèn)為 undefined
屬性的 getter 函數(shù)翘地,如果沒有 getter,則為 undefined癌幕。當(dāng)訪問該屬性時衙耕,會調(diào)用此函數(shù)。執(zhí)行時不傳入任何參數(shù)序芦,但是會傳入 this 對象(由于繼承關(guān)系臭杰,這里的this并不一定是定義該屬性的對象)。該函數(shù)的返回值會被用作屬性的值谚中。
set 默認(rèn)為 undefined
屬性的 setter 函數(shù)渴杆,如果沒有 setter丈冬,則為 undefined呆奕。當(dāng)屬性值被修改時,會調(diào)用此函數(shù)钢坦。該方法接受一個參數(shù)(也就是被賦予的新值)某筐,會傳入賦值時的 this 對象比搭。

var o = {}; // 創(chuàng)建一個新對象
var value;
Object.defineProperty(o, "a", {
  enumerable: true,
  configurable: true,
  get() {
    return value
  },
  set(newvalue) {
    console.log('newvalue',newvalue)
    value = newvalue;
  }
});
console.log(o.a) // undefined
o.a=1; // 觸發(fā)set特性 打印 newvalue 1
console.log(o.a) // 1

5、Object.defineProperties()

給對象添加多個屬性并分別指定它們的配置南誊。
Object.defineProperties(obj, props)

  • obj
    在其上定義或修改屬性的對象身诺。
  • props
    要定義其可枚舉屬性或修改的屬性描述符的對象蜜托。
var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: 30,
    writable: true
  },
  'property2': {
    value: 'xxx',
    writable: false
  }
});

6、Object.keys() 和 Object.values()

Object.keys():返回一個由給定對象的自身可枚舉屬性組成的數(shù)組霉赡,不包括原型鏈上的可枚舉屬性
Object.values():返回一個由給定對象的自身可枚舉屬性值組成的數(shù)組橄务,不包括原型鏈上的可枚舉屬性值
for...in 循環(huán)是 遍歷對象的每一個可枚舉屬性,包括原型鏈上面的可枚舉屬性,

const object1 = {
    a: 'somestring',
    b: 42
};
console.log(Object.keys(object1)) // ["a", "b"]
console.log(Object.values(object1)) // ["somestring", 42]
7、Object.getOwnPropertyNames(obj)

返回一個數(shù)組穴亏,包含對象自身的所有屬性(不含 Symbol 屬性蜂挪,不包括原型鏈上面的,但是包括不可枚舉屬性)的鍵名

8嗓化、Object.getOwnPropertySymbols(obj)

返回一個數(shù)組棠涮,包含對象自身的所有 Symbol 屬性的鍵名

9、Reflect.ownKeys(obj)

返回一個數(shù)組刺覆,包含對象自身的所有鍵名严肪,不管鍵名是 Symbol 或字符串,也不管是否可枚舉

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谦屑,一起剝皮案震驚了整個濱河市诬垂,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌伦仍,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件很洋,死亡現(xiàn)場離奇詭異充蓝,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)喉磁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進(jìn)店門谓苟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人协怒,你說我怎么就攤上這事涝焙。” “怎么了孕暇?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵仑撞,是天一觀的道長。 經(jīng)常有香客問我妖滔,道長隧哮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任座舍,我火速辦了婚禮沮翔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘曲秉。我一直安慰自己采蚀,他們只是感情好疲牵,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著榆鼠,像睡著了一般纲爸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上璧眠,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天缩焦,我揣著相機(jī)與錄音,去河邊找鬼责静。 笑死袁滥,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的灾螃。 我是一名探鬼主播题翻,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼腰鬼!你這毒婦竟也來了嵌赠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤熄赡,失蹤者是張志新(化名)和其女友劉穎姜挺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體彼硫,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡炊豪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了拧篮。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片词渤。...
    茶點(diǎn)故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖串绩,靈堂內(nèi)的尸體忽然破棺而出缺虐,到底是詐尸還是另有隱情,我是刑警寧澤礁凡,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布高氮,位于F島的核電站,受9級特大地震影響把篓,放射性物質(zhì)發(fā)生泄漏纫溃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一韧掩、第九天 我趴在偏房一處隱蔽的房頂上張望紊浩。 院中可真熱鬧,春花似錦、人聲如沸坊谁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽口芍。三九已至箍铲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鬓椭,已是汗流浹背颠猴。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留小染,地道東北人翘瓮。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像裤翩,于是被迫代替她去往敵國和親资盅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評論 2 359

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