ES6之對象的擴展(上)

狹義的對象字面量形式是JavaScript中我最喜歡的一種結構,由於其靈活。今天準備介紹ES6中對象的擴展相關的知識點,因爲煲劇晚了,先寫一半,剩下的下次再介紹。函數


主要知識點:性能

  • 對象屬性的簡寫
  • 動態 · 屬性名
  • Object.is(value1,value2)方法
  • Object.assign(target,source1,source2...)

1.對象屬性的簡寫 -- 設置對象屬性時可省略冒號 ':', 直接用一個變量代替

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

2.動態 · 屬性名 --意思就是說使用字面量方式定義對象時,對象屬性能夠是動態的

let key = 'user';
let obj = {
    [key]:'babe'  // [key] -- 這種方式確實很驚豔,對吧!
};
obj // {user: "babe"}


//這個也不只限於屬性名,對象中的方法名也是可使用[變量名]的形式的
let obj = {
    username:'babe'
    ['get'+'username'](){
        return this.username;
    }
}
obj.getusername(); // babe

3.Object.is()

用於比較兩個對象是否相等: 此方法是爲了配合其他的擴展接口而設定的,應該說是元比較接口。如: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

4.Object.assign(target,source1,source2...)

此方法用於將源對象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

相關文章
相關標籤/搜索