ES6 之 新增對象設(shè)置

Object.assign方法用于對象的合并即纲,將源對象( source )的所有可枚舉屬性骂租,復(fù)制到目標(biāo)對象( target )走净。

var target = { a: 1 };

var source1 = { b: 2 };

var source2 = { c: 3 };

Object.assign(target, source1, source2);

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

Object.assign方法的第一個參數(shù)是目標(biāo)對象,后面的參數(shù)都是源對象多糠。

注意,如果目標(biāo)對象與源對象有同名屬性浩考,或多個源對象有同名屬性夹孔,則后面的屬性會覆蓋前面的屬性。

var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };

var source2 = { c: 3 };

Object.assign(target, source1, source2);

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

如果只有一個參數(shù)析孽,Object.assign會直接返回該參數(shù)搭伤。

var obj = {a: 1};

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

如果該參數(shù)不是對象,則會先轉(zhuǎn)成對象袜瞬,然后返回怜俐。

typeof Object.assign(2) // "object"

由于undefined和null無法轉(zhuǎn)成對象,所以如果它們作為參數(shù)邓尤,就會報錯拍鲤。

Object.assign(undefined) //? 報錯

Object.assign(null) //? 報錯

( 1 )為對象添加屬性

class Point {

????????constructor(x, y) {

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

????????}

}

上面方法通過Object.assign方法,將x屬性和y屬性添加到Point類的對象實例

function clone(origin) {

????????return Object.assign({}, origin);

}

上面代碼將原始對象拷貝到一個空對象汞扎,就得到了原始對象的克隆季稳。

不過,采用這種方法克隆澈魄,只能克隆原始對象自身的值景鼠,不能克隆它繼承的值。如果想要保持繼承鏈痹扇,可以采用下面的代碼铛漓。

function clone(origin) {

????????????let originProto = Object.getPrototypeOf(origin);

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

}

( 2 )合并多個對象

將多個對象合并到某個對象。

const merge =

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

如果希望合并后返回一個新對象帘营,可以改寫上面函數(shù)票渠,對一個空對象合并

( 3 )為屬性指定默認(rèn)值

const DEFAULTS = {

????????logLevel: 0,

????????outputFormat: 'html'

};

function processContent(options) {

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

}

上面代碼中,DEFAULTS對象是默認(rèn)值芬迄,options對象是用戶提供的參數(shù)问顷。Object.assign方法將DEFAULTS和options合并成一個新對象,如果兩者有同

名屬性禀梳,則option的屬性值會覆蓋DEFAULTS的屬性值杜窄。

注意,由于存在深拷貝的問題算途,DEFAULTS對象和options對象的所有屬性的值塞耕,都只能是簡單類型,而不能指向另一個對象嘴瓤。否則扫外,將導(dǎo)致DEFAULTS對

象的該屬性不起作用莉钙。



ES6 一共有 5 種方法可以遍歷對象的屬性。

( 1 ) for...in

for...in循環(huán)遍歷對象自身的和繼承的可枚舉屬性(不含 Symbol 屬性)筛谚。

( 2 ) Object.keys(obj)

Object.keys返回一個數(shù)組磁玉,包括對象自身的(不含繼承的)所有可枚舉屬性(不含 Symbol 屬性)。

( 3 ) Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數(shù)組驾讲,包含對象自身的所有屬性(不含 Symbol 屬性蚊伞,但是包括不可枚舉屬性)。

( 4 ) Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個數(shù)組吮铭,包含對象自身的所有 Symbol 屬性时迫。

( 5 ) Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數(shù)組,包含對象自身的所有屬性谓晌,不管是屬性名是 Symbol 或字符串掠拳,也不管是否可枚舉。



以上的 5 種方法遍歷對象的屬性扎谎,都遵守同樣的屬性遍歷的次序規(guī)則碳想。

首先遍歷所有屬性名為數(shù)值的屬性,按照數(shù)字排序毁靶。

其次遍歷所有屬性名為字符串的屬性胧奔,按照生成時間排序。

最后遍歷所有屬性名為 Symbol 值的屬性预吆,按照生成時間排序龙填。

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

// ['2', '10', 'b', 'a', Symbol()]

上面代碼中,Reflect.ownKeys方法返回一個數(shù)組拐叉,包含了參數(shù)對象的所有屬性岩遗。這個數(shù)組的屬性次序是這樣的,首先是數(shù)值屬性2和10凤瘦,其次是字符

串屬性b和a宿礁,最后是 Symbol 屬性

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

var obj = { foo: "bar", baz: 42 };

Object.keys(obj)

// ["foo", "baz"]

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

var obj = { foo: "bar", baz: 42 };

Object.values(obj)

// ["bar", 42]

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

var obj = { foo: 'bar', baz: 42 };

Object.entries(obj)

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

除了返回值不一樣乎婿,該方法的行為與Object.values基本一致测僵。

Object.entries的基本用途是遍歷對象的屬性。

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方法的一個用處是谢翎,將對象轉(zhuǎn)為真正的Map結(jié)構(gòu)捍靠。

var obj = { foo: 'bar', baz: 42 };

var map = new Map(Object.entries(obj));

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

? __proto__ 屬性沐旨, Object.setPrototypeOf()設(shè)置屬性 , Object.getPrototypeOf()獲取屬性

( 1 ) )__proto__ 屬性

__proto__屬性(前后各兩個下劃線)剂公,用來讀取或設(shè)置當(dāng)前對象的prototype對象希俩。目前,所有瀏覽器(包括 IE11 )都部署了這個屬性纲辽。

// es6 的寫法

var obj = {

method: function() { ... }

};

obj.__proto__ = someOtherObj;

// es5 的寫法

var obj = Object.create(someOtherObj);

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

該屬性沒有寫入 ES6 的正文,而是寫入了附錄璃搜,原因是__proto__前后的雙下劃線拖吼,說明它本質(zhì)上是一個內(nèi)部屬性,而不是一個正式的對外的 API 这吻,只

是由于瀏覽器廣泛支持吊档,才被加入了 ES6 。標(biāo)準(zhǔn)明確規(guī)定唾糯,只有瀏覽器必須部署這個屬性怠硼,其他運(yùn)行環(huán)境不一定需要部署,而且新的代碼最好認(rèn)為這個

屬性是不存在的移怯。因此香璃,無論從語義的角度,還是從兼容性的角度舟误,都不要使用這個屬性葡秒,而是使用下面的Object.setPrototypeOf()(寫操

作)、Object.getPrototypeOf()(讀操作)嵌溢、Object.create()(生成操作)代替眯牧。

Object.setPrototypeOf方法的作用與__proto__相同,用來設(shè)置一個對象的prototype對象赖草。它是 ES6 正式推薦的設(shè)置原型對象的方法学少。

//? 格式

Object.setPrototypeOf(object, prototype)

//? 用法

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市秧骑,隨后出現(xiàn)的幾起案子版确,更是在濱河造成了極大的恐慌,老刑警劉巖腿堤,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阀坏,死亡現(xiàn)場離奇詭異,居然都是意外死亡笆檀,警方通過查閱死者的電腦和手機(jī)忌堂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來酗洒,“玉大人士修,你說我怎么就攤上這事枷遂。” “怎么了棋嘲?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵酒唉,是天一觀的道長。 經(jīng)常有香客問我沸移,道長痪伦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任雹锣,我火速辦了婚禮网沾,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蕊爵。我一直安慰自己辉哥,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布攒射。 她就那樣靜靜地躺著醋旦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪会放。 梳的紋絲不亂的頭發(fā)上饲齐,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天,我揣著相機(jī)與錄音鸦概,去河邊找鬼箩张。 笑死,一個胖子當(dāng)著我的面吹牛窗市,可吹牛的內(nèi)容都是我干的先慷。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼咨察,長吁一口氣:“原來是場噩夢啊……” “哼论熙!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起摄狱,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤脓诡,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后媒役,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體祝谚,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年酣衷,在試婚紗的時候發(fā)現(xiàn)自己被綠了交惯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖席爽,靈堂內(nèi)的尸體忽然破棺而出意荤,到底是詐尸還是另有隱情,我是刑警寧澤只锻,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布玖像,位于F島的核電站,受9級特大地震影響齐饮,放射性物質(zhì)發(fā)生泄漏捐寥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一祖驱、第九天 我趴在偏房一處隱蔽的房頂上張望上真。 院中可真熱鬧,春花似錦羹膳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至寇壳,卻和暖如春醒颖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背壳炎。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工泞歉, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人匿辩。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓腰耙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親铲球。 傳聞我的和親對象是個殘疾皇子挺庞,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,440評論 2 348

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