ES6之對象的擴展(上)

sarva 發布于2019-08-22 17:08 / 3106人閱讀

摘要：狹義的對象字面量形式是中我最喜歡的一種結構，因為其靈活。今天準備介紹中對象的擴展相關的知識點，由于煲劇晚了，先寫一半，剩下的下次再介紹。

狹義的對象字面量形式是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?(?ω?)?!

云服務器 GPU云服務器 es6字符串擴展對象的擴展對象擴展動態擴展對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94898.html

ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
ES6入門之對象的擴展

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

RiverLi 2019-05-23 11:58 評論0 收藏0
ES6入門之對象的擴展

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

AWang 2019-08-26 13:53 評論0 收藏0
ES6入門之數值的擴展

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

tyheist 2019-08-02 16:15 評論0 收藏0
ES6入門之數值的擴展

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

xi4oh4o 2019-08-23 17:10 評論0 收藏0