es6對象的擴展

對象（object）是 JavaScript 最重要的數據結構之一。

object 在es6中新增了不少便利的方法

在es6中容許直接寫入變量和方法的名稱直接做爲對象的屬性

let x =1 ,y=2

        const obj ={x,y}

        console.log(obj)
        //{x: 1, y: 2}
            

這種寫法等同於

let x = 1,y = 2

        const obj = {
            'x':x,
            'y':y
        }

 

方法同理

        const obj2 = {
            methods() {
                return {
                    x,
                    y
                }
            }
        }
        const obj3 = {
         methods:function() {
                return {
                    x,
                    y
                }
            }
        }


        console.log(obj2.methods())
        //{x: 1, y: 2}
        console.log(obj3.methods())
        //{x: 1, y: 2}

這種簡潔寫法在vue中用到的地方不少 好比導出和建立實例時等等

另外就是es6中容許對象的屬性用表達式

        const item="item"
        const obj4 ={
            "item":"hello"
        }

        console.log(obj4.item)
        // hello
        console.log(obj4[item])
        // hello

 

可是屬性名錶達式和簡潔表達法不能同時使用

會報錯Uncaught SyntaxError: Unexpected token }或者乾脆直接給你提示

 

若是你的key值傳進去的是一個對象的話那麼他的key會默認轉換成一個字符串  「[object Object]」

        const item2 = {
           a: 1
        };
        const item3 = {
            b: 2
        };

        const obj5 = {
            [item2]: 'value',
            [item3]: 'value'
        };

        console.log(obj5) 
        // {[object Object]: "value"}    

 

對象的方法裏邊有一個name屬性能夠點出來  用上邊的例子說明

const obj5 = {
            [item2]: 'value',
            [item3]: 'value',
            con(){}
        };

        console.log(obj5) 
        // {[object Object]: "value"}
        console.log(obj5.con.name)
        //con

 

返回的name是一個字符串

這個在con聲明的時候也是聲明的一個字符串 ：function（）{ XXX}這樣

阮一峯老師的博客裏邊講到  對象的每一個屬性都有一個描述對象（Descriptor）

用來控制該屬性的行爲。Object.getOwnPropertyDescriptor方法能夠獲取該屬性的描述對象。

 

他在博客裏邊講了enumerable這個特性  是指可枚舉性  若是這個爲false的話   該對象就不可以被遍歷

 

那麼另外的三個屬性都是什麼意思呢

value這個確定都知道就不說了

這個writable  這個特性是指屬性的是否只讀   若是這個屬性被更改成false的時候這個屬性的值  是指能被讀取而不能被修改的

另一個configurable這個特性是指屬性的基礎操做   若是這個屬性爲false的時候  他會告訴js引擎  不能夠刪除delete這個屬性和修改update這個屬性

 

Object.keys(obj)

這個方法能夠返回全部的可枚舉的屬性的key值，比較實用

 

super關鍵字  

這個關鍵字只能夠在對象的方法裏邊使用  他會指向對象的原型對象的屬性，若是不是用在對象的方法裏邊就會報錯

 

對象的擴展運算符   ...(三個點)

這個運算符和數組的的差很少  不一樣的是 他的右邊賦值對象必須是一個對象 不能是undefind或者null  不然就會報錯  

let { x, y, ...z } = null; // 運行時錯誤
let { x, y, ...z } = undefined; // 運行時錯誤

可是他能夠直接  ...undefind

{...undefined} // {}

會返回一個空對象

另外 對象的擴展運算符不必定要放在最後，能夠放在前邊，可是同名屬性會被覆蓋掉

這個在平時項目中的賦值裏邊應該會很遍歷 不用再很冗餘的寫一大堆的賦值

最後  擴展運算符裏邊也是支持三元運算符的   粘貼一個例子

const obj = {
  ...(x > 1 ? {a: 1} : {}),
  b: 2,
};

 

 

以上是對es6對象的擴展的理解  若有不足之處但願批評指正