ES6 之 對象屬性的可枚舉性和遍歷

1.Object.getOwnPropertyDescriptor()

解釋：獲取對對象屬性的描述對象。

let obj = { foo: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))

顯示結果：

{
    configurable: true
    enumerable: true
    value: 123
    writable: true
    __proto__: Object
}

enumerable屬性，稱爲可枚舉性，若是爲 false 時，就表示某些操做會忽略當前屬性。

目前，有四個操做會忽略enumerable爲 false 的屬性。

• for...in循環：只遍歷對象自身的和繼承的可枚舉的屬性。
• Object.keys()：返回對象自身的全部可枚舉的屬性的鍵名。使用這個遍歷對象！
• JSON.stringify()：只串行化對象自身的可枚舉的屬性。
• Object.assign()： 忽略enumerable爲false的屬性，只拷貝對象自身的可枚舉的屬性

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable // false 
 
Object.getOwnPropertyDescriptor([], 'length').enumerable // false

// toString和length屬性的enumerable都是false，所以for...in不會遍歷到這兩個繼承自原型的屬性。

2. Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors 方法，返回指定對象全部自身屬性（非繼承屬性）的描述對象。

const obj = {   foo: 123,   get bar() { return 'abc' } }; 
 
Object.getOwnPropertyDescriptors(obj) 

// { foo: 
//    { value: 123, 
//      writable: true, 
//      enumerable: true, 
//      configurable: true }, 
//   bar: 
//    { get: [Function: bar],
//      set: undefined, 
//      enumerable: true, 
//      configurable: true } }

上面代碼中，Object.getOwnPropertyDescriptors(obj)方法返回一個對象，全部原對象的屬性名都是該對象的屬性名，對應的屬性值就是該屬性的描述對象。

 

3. Object.setPrototypeOf()

用於設置一個對象的原型對象。

// 格式 
Object.setPrototypeOf(object, prototype) 
 
// 用法 
const o = Object.setPrototypeOf({}, null); 

// 該方法等同於下面的函數。
function (obj, proto) {   
    obj.__proto__ = proto;   
    return obj; 
}

例子：

let proto = {}; 
let obj = { x: 10 }; 
Object.setPrototypeOf(obj, proto); 
 
proto.y = 20;
proto.z = 40; 
 
obj.x // 10 
obj.y // 20 
obj.z // 40

注意：

1. 若是第一個參數不是對象，會自動轉爲對象。可是因爲返回的仍是第一個參數，因此這個操做不會產生任何效果。

2. 因爲undefined和null沒法轉爲對象，因此若是第一個參數是undefined或null，就會報錯。

4. Object.getPrototypeOf()

該方法與Object.setPrototypeOf方法配套，用於讀取一個對象的原型對象。

Object.getPrototypeOf(obj); 

1. 若是參數不是對象，會被自動轉爲對象。

2. 若是參數是undefined或null，它們沒法轉爲對象，因此會報錯。

5. super關鍵字

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

const proto = {   foo: 'hello' }; 
 
const obj = {   
    find() {     
        return super.foo;   
    } 
}; 

Object.setPrototypeOf(obj, proto);
obj.find() // "hello" 
// 上面代碼中，對象obj的find方法之中，經過super.foo引用了原型對象proto的foo屬性。

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

JavaScript 引擎內部，super.foo等同於Object.getPrototypeOf(this).foo（屬性）或Object.getPrototypeOf(this).foo.call(this)（方法）。

例題：

const proto = {   
    x: 'hello',   
    foo() {     
        console.log(this.x);   
    }, 
}; 
 
const obj = {   
    x: 'world',   
    foo() {    
        super.foo();   
    } 
} 
 
Object.setPrototypeOf(obj, proto); 
 
obj.foo() // "world" 

// 上面代碼中，super.foo指向原型對象proto的foo方法，可是綁定的this卻仍是當前對象obj，所以輸出的就是world。

 

6. Object.keys()，Object.values()，Object.entries()

Object.keys方法，返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵名。

var obj = { foo: 'bar', baz: 42 }; 
Object.keys(obj) // ["foo", "baz"] 

 

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，做爲遍歷一個對象的補充手段，供for...of循環使用

Object.values方法返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值。

const obj = { 100: 'a', 2: 'b', 7: 'c' }; 
Object.values(obj) // ["b", "c", "a"] 

上面代碼中，屬性名爲數值的屬性，是按照數值大小，從小到大遍歷的，所以返回的順序是b、c、a。

Object.values只返回對象自身的可遍歷屬性。

 

Object.entries方法返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值對數組。

const obj = { foo: 'bar', baz: 42 }; 
Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]

除了返回值不同，該方法的行爲與Object.values基本一致。