摘要：循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性不含屬性。返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性的鍵名。目前，只有對(duì)象方法的簡(jiǎn)寫法可以讓引擎確認(rèn)，定義的是對(duì)象的方法。

1. 屬性的簡(jiǎn)潔表示法

在ES6中 允許直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法，使得代碼的書寫更為簡(jiǎn)潔。

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

等同于
const b = {f: f}

在ES6中允許在對(duì)象內(nèi)直接寫變量，這時(shí)候?qū)傩悦麨樽兞棵瑢傩灾稻褪亲兞恐?/p>

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}

在JavaScript中屬性名的表達(dá)式的方法有兩種，一種 直接用標(biāo)識(shí)符作為屬性名，第二種用表達(dá)式作為屬性名。第二種寫的時(shí)候表達(dá)式要放在方括號(hào)之內(nèi)

//一
obj.foo = true

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

//三
let t = "m"

let obj = {
    [t]: true,
    ["a" + "bc"]: 123
}

表達(dá)式還可以用來(lái)定義方法名(注意：屬性名表達(dá)式不能和簡(jiǎn)潔表示法同時(shí)使用)

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

obj.hello() // hi

如果屬性名表達(dá)式是一個(gè)對(duì)象，則默認(rèn)情況下會(huì)自動(dòng)將對(duì)象轉(zhuǎn)為字符串[object Object]

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

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

myObj // Object {[object Object]: "vc"}

函數(shù)的name 屬性，返回函數(shù)名，對(duì)象方法也是函數(shù)，因此也由name 屬性

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

p.n.name // n

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

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創(chuàng)造的函數(shù) name 屬性返回 bound 加上原有函數(shù)的名字

var do = function(){
    
}
do.bind().name // bound do

特殊情況 Function構(gòu)造函數(shù)創(chuàng)造的函數(shù)，name 返回 anonymous

(new Function()).name // anonymous

如果對(duì)象的方法是一個(gè)Symbol 那么name 返回這個(gè) Symbol的描述

const k = Symbol("描述")
k.name // "[描述]"

可枚舉性

對(duì)象的每個(gè)屬性都有一個(gè)描述對(duì)象，用來(lái)控制該屬性的行為，Object.getOwnPropertyDescriptor 方法可以獲取該屬性的描述對(duì)象

let obj = {f: 234}
Object.getOwnPropertyDescriptor(obj, "foo")
//  {
//    value: 234,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

描述對(duì)象的 enumerable 屬性，稱為 “可枚舉性”，如果該屬性為true就表示某些操作會(huì)忽略當(dāng)前操作

有四個(gè)操作會(huì)忽略 enumerate 為 false 的屬性

- for...in循環(huán)： 只遍歷對(duì)象自身和繼承的可枚舉的屬性
- Object.keys()：返回對(duì)象自身的所有可枚舉的屬性的鍵名
- JSON.stringify(): 只串行化對(duì)象自身的可枚舉的屬性
- Object.assign(): 忽略enumerable為false的屬性，只
拷貝對(duì)象自身的可枚舉的屬性

ES6中 所有class 的原型的方法都是不可枚舉的

屬性的遍歷

ES6一共有5種方法可以遍歷對(duì)象的屬性。

（1）for...in

for...in循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

（2）Object.keys(obj)

Object.keys返回一個(gè)數(shù)組，包括對(duì)象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）的鍵名。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性（不含 Symbol 屬性，但是包括不可枚舉屬性）的鍵名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個(gè)數(shù)組，包含對(duì)象自身的所有 Symbol 屬性的鍵名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一個(gè)數(shù)組，包含對(duì)象自身的所有鍵名，不管鍵名是 Symbol 或字符串，也不管是否可枚舉。 1）for..in


以上五種方法遍歷對(duì)象的鍵名，都遵循同樣的屬性遍歷的次序股則
    
    首先遍歷所有數(shù)值鍵，按照數(shù)值升序排列。
    其次遍歷所有字符串鍵，按照加入時(shí)間升序排列。
    最后遍歷所有 Symbol 鍵，按照加入時(shí)間升序排列。

this的關(guān)鍵字總是指向函數(shù)所在的當(dāng)前對(duì)象，ES6 又新增了另一個(gè)類似的關(guān)鍵字 super，指向當(dāng)前對(duì)象的原型對(duì)象

注意：super關(guān)鍵字表示原型對(duì)象時(shí)，只能用在對(duì)象的方法之中，用在其他他地方都會(huì)報(bào)錯(cuò)。

// 報(bào)錯(cuò)
const obj = {
  foo: super.foo
}

// 報(bào)錯(cuò)
const obj = {
  foo: () => super.foo
}

// 報(bào)錯(cuò)
const obj = {
  foo: function () {
    return super.foo
  }
}

上面三種super的用法都會(huì)報(bào)錯(cuò)，因?yàn)閷?duì)于 JavaScript 引擎來(lái)說(shuō)，這里的super都沒(méi)有用在對(duì)象的方法之中。第一種寫法是super用在屬性里面，第二種和第三種寫法是super用在一個(gè)函數(shù)里面，然后賦值給foo屬性。目前，只有對(duì)象方法的簡(jiǎn)寫法可以讓 JavaScript 引擎確認(rèn)，定義的是對(duì)象的方法。

歡迎關(guān)注 公眾號(hào)【小夭同學(xué)】

ES6入門系列

ES6入門之let、cont

ES6入門之變量的解構(gòu)賦值

ES6入門之字符串的擴(kuò)展

ES6入門之正則的擴(kuò)展

ES6入門之?dāng)?shù)值的擴(kuò)展

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

ES6入門之?dāng)?shù)組的擴(kuò)展

Git教程

前端Git基礎(chǔ)教程