ES6入門之對象的擴展

時間 2019-11-07

原文原文鏈接

1. 屬性的簡潔表示法

在ES6中容許直接寫入變量和函數，做爲對象的屬性和方法，使得代碼的書寫更爲簡潔。前端

const f = 'a'
const b = {f}
b  // {f: 'a'}

等同於
const b = {f: f}
複製代碼

在ES6中容許在對象內直接寫變量，這時候屬性名爲變量名，屬性值就是變量值segmentfault

function u(x, y){
    return {x, y}
}

// ====

function u(x, y){
    return {x: x, y: y }
}

u(1, 2)   // {x:1, y: 2}


或者一下寫法：

function o() {
    const x = 1;
    const x = 2;
    return {x, y}
}
o() // {x:1, y:2}
複製代碼

2. 屬性名錶達式

在JavaScript中屬性名的表達式的方法有兩種，一種直接用標識符做爲屬性名，第二種用表達式做爲屬性名。第二種寫的時候表達式要放在方括號以內數組

//一
obj.foo = true

//二
obj['a' + 'bc'] = 123

//三
let t = 'm'

let obj = {
    [t]: true,
    ['a' + 'bc']: 123
}
複製代碼

表達式還能夠用來定義方法名(注意：屬性名錶達式不能和簡潔表示法同時使用)函數

let obj = {
    ['h' + 'ello']() {
        return 'hi'
    }
}

obj.hello() // hi
複製代碼

若是屬性名錶達式是一個對象，則默認狀況下會自動將對象轉爲字符串[object Object]post

const ka = {a: 1}
const kb = {b: 2}

const myObj = {
    [ka]: 'va',
    [kb]: 'vc'
}

myObj // Object {[object Object]: 'vc'}
複製代碼

3. 方法的 name 屬性

函數的name 屬性，返回函數名，對象方法也是函數，所以也由name 屬性this

const p = {
    n() {
        console.log('h')
    }
}

p.n.name // n
複製代碼

特殊狀況 getter 和 setter 屬性是在 get 和 set上面spa

const obj = {
    get foo() {},
    set fod() {}
}

obj.foo.name // undefined

const d = Object.getOwnPropertyDescriptor(obj, 'foo')

d.get.name // get foo
d.set.name // set fod
複製代碼

特殊狀況 bind創造的函數 name 屬性返回 bound 加上原有函數的名字3d

var do = function(){
    
}
do.bind().name // bound do
複製代碼

特殊狀況 Function構造函數創造的函數，name 返回 anonymouscode

(new Function()).name // anonymous
複製代碼

若是對象的方法是一個Symbol 那麼name 返回這個 Symbol的描述cdn

const k = Symbol('描述')
k.name // "[描述]"
複製代碼

4. 屬性的可枚舉性和遍歷

可枚舉性

對象的每一個屬性都有一個描述對象，用來控制該屬性的行爲，Object.getOwnPropertyDescriptor 方法能夠獲取該屬性的描述對象

let obj = {f: 234}
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 234,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }
複製代碼

描述對象的 enumerable 屬性，稱爲「可枚舉性」，若是該屬性爲true就表示某些操做會忽略當前操做

有四個操做會忽略 enumerate 爲 false 的屬性

- for...in循環： 只遍歷對象自身和繼承的可枚舉的屬性
- Object.keys()：返回對象自身的全部可枚舉的屬性的鍵名
- JSON.stringify(): 只串行化對象自身的可枚舉的屬性
- Object.assign(): 忽略enumerable爲false的屬性，只
拷貝對象自身的可枚舉的屬性
複製代碼

ES6中全部class 的原型的方法都是不可枚舉的

屬性的遍歷

ES6一共有5種方法能夠遍歷對象的屬性。

（1）for...in

for...in循環遍歷對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

（2）Object.keys(obj)

Object.keys返回一個數組，包括對象自身的（不含繼承的）全部可枚舉屬性（不含 Symbol 屬性）的鍵名。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數組，包含對象自身的全部屬性（不含 Symbol 屬性，可是包括不可枚舉屬性）的鍵名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個數組，包含對象自身的全部 Symbol 屬性的鍵名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數組，包含對象自身的全部鍵名，無論鍵名是 Symbol 或字符串，也無論是否可枚舉。 1）for..in


以上五種方法遍歷對象的鍵名，都遵循一樣的屬性遍歷的次序股則
    
    首先遍歷全部數值鍵，按照數值升序排列。
    其次遍歷全部字符串鍵，按照加入時間升序排列。
    最後遍歷全部 Symbol 鍵，按照加入時間升序排列。
複製代碼

5. super關鍵字

this的關鍵字老是指向函數所在的當前對象，ES6 又新增了另外一個相似的關鍵字 super，指向當前對象的原型對象

注意：super關鍵字表示原型對象時，只能用在對象的方法之中，用在其餘他地方都會報錯。

// 報錯
const obj = {
  foo: super.foo
}

// 報錯
const obj = {
  foo: () => super.foo
}

// 報錯
const obj = {
  foo: function () {
    return super.foo
  }
}
複製代碼

上面三種super的用法都會報錯，由於對於 JavaScript 引擎來講，這裏的super都沒有用在對象的方法之中。第一種寫法是super用在屬性裏面，第二種和第三種寫法是super用在一個函數裏面，而後賦值給foo屬性。目前，只有對象方法的簡寫法可讓 JavaScript 引擎確認，定義的是對象的方法。