成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6之對(duì)象的擴(kuò)展(上)

sarva / 3113人閱讀

摘要：狹義的對(duì)象字面量形式是中我最喜歡的一種結(jié)構(gòu)，因?yàn)槠潇`活。今天準(zhǔn)備介紹中對(duì)象的擴(kuò)展相關(guān)的知識(shí)點(diǎn)，由于煲劇晚了，先寫一半，剩下的下次再介紹。

狹義的對(duì)象字面量形式是JavaScript中我最喜歡的一種結(jié)構(gòu)，因?yàn)槠潇`活。今天準(zhǔn)備介紹ES6中對(duì)象的擴(kuò)展相關(guān)的知識(shí)點(diǎn)，由于煲劇晚了，先寫一半，剩下的下次再介紹。

主要知識(shí)點(diǎn):

對(duì)象屬性的簡(jiǎn)寫

動(dòng)態(tài) · 屬性名

Object.is(value1,value2)方法

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

1.對(duì)象屬性的簡(jiǎn)寫 -- 設(shè)置對(duì)象屬性時(shí)可省略冒號(hào) ":", 直接用一個(gè)變量代替 
let user = "babe";
let obj = {user};
obj // {user: "babe"}  
//-- 一開(kāi)始用的時(shí)候覺(jué)得特別驚奇 轉(zhuǎn)化成:{變量名:變量值} 記住變量名是靜態(tài)(死)的(string)，值是動(dòng)態(tài)(活)的

//想到應(yīng)該怎么用了么?沒(méi)錯(cuò)函數(shù)返回值的時(shí)候，返回多個(gè)數(shù)據(jù)時(shí)
//此時(shí)需要注意的是變量命名的時(shí)候要契合返回的屬性名
function parseData(data){

    //假裝有這么個(gè)函數(shù) 用于解析一個(gè)復(fù)雜的data 
    //最終解析出列數(shù)據(jù)、行數(shù)據(jù)、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}
}

//另外一個(gè)集中導(dǎo)出的時(shí)候，也就是變量名與屬性名完全一致的情況下可以簡(jiǎn)寫
//一個(gè)公共包，都是一些處理方法，對(duì)方法進(jìn)行導(dǎo)出
//util.ts
function toThousands(){}
function toTenThousandUnit(){}
function parseXml(){}
...

//在文件最后統(tǒng)一進(jìn)行導(dǎo)出
export {
    toThousands,
    toTenThousandUnit,            
    parseXml
}
//阮老師的書上說(shuō)了，方法也可以簡(jiǎn)寫，這個(gè)沒(méi)有什么特別的感覺(jué)
//直觀感受就是增加了一種代碼書寫方式
let user = {
    name:"babe",
    hello(){
        console.log(this.name);
    }
}
//等價(jià)于:
let user = {
    name:"babe",
    hello:function(){
        console.log(this.name);
    }
}
2.動(dòng)態(tài) · 屬性名 --意思就是說(shuō)使用字面量方式定義對(duì)象時(shí)，對(duì)象屬性可以是動(dòng)態(tài)的 
let key = "user";
let obj = {
    [key]:"babe"  // [key] -- 這種方式確實(shí)很驚艷，對(duì)吧!
};
obj // {user: "babe"}


//這個(gè)也不僅限于屬性名，對(duì)象中的方法名也是可以使用[變量名]的形式的
let obj = {
    username:"babe"
    ["get"+"username"](){
        return this.username;
    }
}
obj.getusername(); // babe
3.Object.is()

用于比較兩個(gè)對(duì)象是否相等： 此方法是為了配合其余的擴(kuò)展接口而設(shè)定的，應(yīng)該說(shuō)是元比較接口。如:Array.prototype.find()/findIndex()
(規(guī)則:NaN與NaN相等、+0與-0不相等、其余跟js的===操作符處理結(jié)果一致)

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

此方法用于將源對(duì)象source1、source2、...合并到target對(duì)象中，順序?yàn)閺挠彝?，屬性不同的時(shí)候合并，相同時(shí)覆蓋，從右往左依次覆蓋與合并

//定義三個(gè)源數(shù)據(jù)
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的時(shí)候，result的b的age也會(huì)被改掉，也就是說(shuō)值為引用類型的屬性合并過(guò)來(lái)的只是引用地址。需要特別注意哦
source2.b.age = 26;
result // {a: 2, b: {age:26}, c: 2}

//Object.assign() 只傳一個(gè)參數(shù)進(jìn)去的時(shí)候，基本類型會(huì)轉(zhuǎn)成對(duì)應(yīng)的包裝類型，引用類型原樣返回
//null 和undefined就會(huì)報(bào)錯(cuò)(他倆難兄難弟，走哪都報(bào)錯(cuò))
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.一般用來(lái)拷貝對(duì)象，以防污染源數(shù)據(jù) -- 這個(gè)很常用，因?yàn)榇蠖鄷r(shí)候數(shù)據(jù)就是一維的，淺拷貝也不礙事了
        let temp = Object.assign({},source);

    ii.合并多個(gè)對(duì)象，這個(gè)場(chǎng)景比較少
        let combineObj = Object.assign(source1,source2,...);

    //其實(shí)一個(gè)知識(shí)點(diǎn)有多少種用法都是假的，其實(shí)就是這個(gè)知識(shí)點(diǎn)的使用規(guī)則是什么，寫邏輯的時(shí)候能想到這樣寫就可以了(不僅要考慮代碼的簡(jiǎn)潔性、還要考慮性能哈)

對(duì)象的擴(kuò)展前半段先寫到這里了，如果bug請(qǐng)指正Thanks?(?ω?)?!

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94898.html

相關(guān)文章

  • ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

    摘要：它是一個(gè)通用標(biāo)準(zhǔn)，奠定了的基本語(yǔ)法。年月發(fā)布了的第一個(gè)版本，正式名稱就是標(biāo)準(zhǔn)簡(jiǎn)稱。結(jié)語(yǔ)的基本擴(kuò)展還有一些沒(méi)有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒(méi)有完全走進(jìn)我們的日常開(kāi)發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手，逐步展開(kāi)對(duì)ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

    tommego 評(píng)論0 收藏0

  • ES6入門之對(duì)象的擴(kuò)展

    摘要：循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性不含屬性。返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性的鍵名。目前，只有對(duì)象方法的簡(jiǎn)寫法可以讓引擎確認(rèn)，定義的是對(duì)象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡(jiǎn)潔表示法 在ES6中 允許直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法，使得代碼的書寫更為簡(jiǎn)潔。...

    RiverLi 評(píng)論0 收藏0

  • ES6入門之對(duì)象的擴(kuò)展

    摘要：屬性的簡(jiǎn)潔表示法在中允許直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法，使得代碼的書寫更為簡(jiǎn)潔。循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性不含屬性。返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡(jiǎn)潔表示法 在ES6中 允許直接寫入變量...

    AWang 評(píng)論0 收藏0

  • ES6入門之數(shù)值的擴(kuò)展

    摘要：用來(lái)表示與大于的最小浮點(diǎn)數(shù)之間的差，實(shí)際上就是能夠表示的最小精度。對(duì)象的擴(kuò)展在對(duì)象上新增了個(gè)與數(shù)學(xué)相關(guān)的方法。用于去除一個(gè)數(shù)的小樹(shù)部分，返回整數(shù)部分。對(duì)于非數(shù)值，則用方法將其轉(zhuǎn)換為數(shù)值，對(duì)于空值和無(wú)法截取整數(shù)的值，返回。返回以為底的的對(duì)數(shù)。 showImg(https://segmentfault.com/img/bVbrTG6?w=1080&h=1080); 1. 二進(jìn)制和八進(jìn)制表示...

    tyheist 評(píng)論0 收藏0

  • ES6入門之數(shù)值的擴(kuò)展

    摘要：用來(lái)表示與大于的最小浮點(diǎn)數(shù)之間的差，實(shí)際上就是能夠表示的最小精度。對(duì)象的擴(kuò)展在對(duì)象上新增了個(gè)與數(shù)學(xué)相關(guān)的方法。用于去除一個(gè)數(shù)的小樹(shù)部分，返回整數(shù)部分。對(duì)于非數(shù)值，則用方法將其轉(zhuǎn)換為數(shù)值，對(duì)于空值和無(wú)法截取整數(shù)的值，返回。返回以為底的的對(duì)數(shù)。 showImg(https://segmentfault.com/img/bVbrTG6?w=1080&h=1080); 1. 二進(jìn)制和八進(jìn)制表示...

    xi4oh4o 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

sarva

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<