天天看點

ES6 深拷貝_你别自以為是:ES6誤區 之 Object.assign()、const

ES6 深拷貝_你别自以為是:ES6誤區 之 Object.assign()、const

文/北媽

閱讀本文需要 2.3分鐘

很久沒發技術文,今天北媽在新開一個技術系列:“别自以為是,1分鐘走出JS常見誤區“,裡面我會每期挑選幾個常見基礎屬性,講一講裡面最容易被人忽略和認知錯誤的誤區。

幫助大家更好的掌握基礎,這樣在面試和實際項目中可以避免很多低級錯誤和節省時間,歡迎拍磚甚至投稿。

今天說一下關于ES6 就引入的最常用的關于操作對象的新屬性:

Object.assign()、const

1、大家知道 

Object.assign()

 方法用于将所有可枚舉屬性的值從一個或多個源對象複制到目标對象。它将傳回目标對象。

MDN官方文檔的例子就已經說明一切 

const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }console.log(returnedTarget);// expected output: Object { a: 1, b: 4, c: 5 }

這個屬性在ES6才引入,是一個不錯的操作js對象格式的新屬性。裡面還涉及到深拷貝和淺拷貝,替換對象等衆多概念。

Object.assign

 方法隻會拷貝源對象自身的并且可枚舉的屬性到目标對象。

這個屬性在ES6才引入,是一個不錯的操作js對象格式的新屬性。裡面還涉及到深拷貝和淺拷貝,替換對象等衆多概念。

在ES5裡面要實作和Object.assign 相關的功能要用到  Object.defineProperty很複雜的去實作。

而Object.assign 最常用的功能是将新的對象或者json屬性 複制和追加到老的對象,然後生成一個新的整合對象。

項目裡,很常用的就是請求傳參時,追加各種篩選條件了,這個大家應該深有體會。

重要描述:如果目标對象中的屬性具有相同的鍵,則屬性将被源對象中的屬性覆寫。後面的源對象的屬性将類似地覆寫前面的源對象的屬性。

意思是如果原對象利用有j= {a: 1} ,新對象也有{a:2}那麼 就會直接覆寫,相當于是 j.a =2.這個在用的過程中是沒什麼疑問的,正常覆寫就好。

但一定要注意這個誤區:比如:json1 = {a:1, b:null } ,那麼 直接  

Object.assign(json1, {a:2,b:3} );  會發生什麼?

大部分人不看文檔 會說:直接覆寫被 最後是{a:2,b:3},但結果事與願違,因為如果是NULL 這個罪魁禍首,assign 屬性是不會生效的,這個value 不會生效,因為官方有一句:

注意,Object.assign 不會跳過那些值為 null 或 undefined 的源對象。

是以一定要注意,檢查後端返給你的json資料裡,有沒有屬性值為 null 或者 undefined,這個相當重要,不然會引來很多麻煩和bug。

這也是為啥一直強調,null 和undefined 是絕對禁止出現在正常的資料格式中的。這個大家一定要注意,因為前一段我們後端居然就傳回了null ,,無語!!!

2、大家知道 const 是類型聲明,大家再熟悉不過,也是es6才有的新屬性,之前都是萬惡的var,随意改變作用于和值。有個const,相當于給變量加了一個鎖,但是

const

聲明建立一個值的隻讀引用。但這并不意味着它所持有的值是不可變的,隻是變量辨別符不能重新配置設定。例如,在引用内容是對象的情況下,這意味着可以改變對象的内容(例如,其參數)。

 比如:

const  num = 1000;

num = 2000;

//  會報錯 ,因為在同一作用于,num的值已經固定,不可改變。

ES6 深拷貝_你别自以為是:ES6誤區 之 Object.assign()、const

但是:

const  num = {a:1000};

num.a = 2000 ;

//  這個不會報錯 ,因為在其屬性值是可以被改變的,也就是文檔裡說的改變對象内容,但你不能改變他在記憶體中的表示和位置。

ES6 深拷貝_你别自以為是:ES6誤區 之 Object.assign()、const

-----

這個其實看似很簡單,有很多人并不了解,以為看到const 就說明這個變量被鎖定了,該改變對象也不行,直接let 就行了,其實不對的,const照樣可以被改變,但記住,隻是改變他的值。

這些在面試題或者平時開發都會遇到,算是常識的自以為是誤區,大家注意,也歡迎大家對平時積累的累死誤區,告訴我,我更多的公布出來。

每日金句:“世界上沒有恒久不變的東西,包括愛情和承諾。唯一不變的就是這個世界永遠在變”

熱門閱讀

空閑時間不要接私活,要提升自己

月薪5k的國企, 和月薪2萬的私企,我選國企...

低學曆者生存困難 程式員尤其明顯

每天隻想聽你們說:小北最帥!

ES6 深拷貝_你别自以為是:ES6誤區 之 Object.assign()、const

長按掃碼關注我

一個不一樣的帥碼農

每天有驚喜

我覺得 「在看」與「轉發」

也是對我的認可 

ES6 深拷貝_你别自以為是:ES6誤區 之 Object.assign()、const