狹義的對象字面量形式是JavaScript中我最喜歡的一種結構,由於其靈活。今天準備介紹ES6中對象的擴展相關的知識點,因爲煲劇晚了,先寫一半,剩下的下次再介紹。函數
主要知識點:性能
let user = 'babe'; let obj = {user}; obj // {user: "babe"} //-- 一開始用的時候以爲特別驚奇 轉化成:{變量名:變量值} 記住變量名是靜態(死)的(string),值是動態(活)的 //想到應該怎麼用了麼?沒錯函數返回值的時候,返回多個數據時 //此時須要注意的是變量命名的時候要契合返回的屬性名 function parseData(data){ //僞裝有這麼個函數 用於解析一個複雜的data //最終解析出列數據、行數據、settings等 let columns = fn(data); let rows = fn2(data); let settings = fn3(data); return {columns,rows,settings}; // {columns,rows,settings} <-徹底等同-> {columns:columns,rows:rows,settings:settings} } //另一個集中導出的時候,也就是變量名與屬性名徹底一致的狀況下能夠簡寫 //一個公共包,都是一些處理方法,對方法進行導出 //util.ts function toThousands(){} function toTenThousandUnit(){} function parseXml(){} ... //在文件最後統一進行導出 export { toThousands, toTenThousandUnit, parseXml }
//阮老師的書上說了,方法也能夠簡寫,這個沒有什麼特別的感受 //直觀感覺就是增長了一種代碼書寫方式 let user = { name:'babe', hello(){ console.log(this.name); } } //等價於: let user = { name:'babe', hello:function(){ console.log(this.name); } }
let key = 'user'; let obj = { [key]:'babe' // [key] -- 這種方式確實很驚豔,對吧! }; obj // {user: "babe"} //這個也不只限於屬性名,對象中的方法名也是可使用[變量名]的形式的 let obj = { username:'babe' ['get'+'username'](){ return this.username; } } obj.getusername(); // babe
用於比較兩個對象是否相等: 此方法是爲了配合其他的擴展接口而設定的,應該說是元比較接口。如:Array.prototype.find()/findIndex()
(規則:NaN與NaN相等、+0與-0不相等、其他跟js的===操做符處理結果一致)this
Object.is('babe','babe'); // true Object.is(NaN,NaN); // true Object.is({a:1},{a:1}); // false [19,NaN,23].findIndex(x => Object.is(NaN,x)); // 1
此方法用於將源對象source一、source二、...合併到target對象中,順序爲從右往左,屬性不一樣的時候合併,相同時覆蓋,從右往左依次覆蓋與合併prototype
//定義三個源數據 let source1 = {a:1}; let source2 = {a:2,b:{age:27}}; let source3 = {c:2}; let result = Object.assign({},source1,source2,source3); result // {a: 2, b: {age:27}, c: 2} //然而,咱們修改source2的b屬性的age的時候,result的b的age也會被改掉,也就是說值爲引用類型的屬性合併過來的只是引用地址。須要特別注意哦 source2.b.age = 26; result // {a: 2, b: {age:26}, c: 2}
//Object.assign() 只傳一個參數進去的時候,基本類型會轉成對應的包裝類型,引用類型原樣返回 //null 和undefined就會報錯(他倆難兄難弟,走哪都報錯) Object.assign('babe') // String {"babe"} Object.assign(10) // Number {10} Object.assign(true) // Boolean {true} Object.assign({}) // {} Object.assign([]) // [] Object.assign(undefined) // Uncaught TypeError: Cannot convert undefined or null to object
用途: i.通常用來拷貝對象,以防污染源數據 -- 這個很經常使用,由於大多時候數據就是一維的,淺拷貝也不礙事了 let temp = Object.assign({},source); ii.合併多個對象,這個場景比較少 let combineObj = Object.assign(source1,source2,...); //其實一個知識點有多少種用法都是假的,其實就是這個知識點的使用規則是什麼,寫邏輯的時候能想到這樣寫就能夠了(不只要考慮代碼的簡潔性、還要考慮性能哈)
對象的擴展前半段先寫到這裏了,若是bug請指正Thanks♪(・ω・)ノ!code