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的===操作符處置懲罰結果一致)

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…)

此要領用於將源對象source1、source2、…兼并到target對象中,遞次為從右往左,屬性差別的時刻兼并,相同時掩蓋,從右往左順次掩蓋與兼并

//定義三個源數據
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♪(・ω・)ノ!

    原文作者:babe
    原文地址: https://segmentfault.com/a/1190000014817971
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞