ES6入門之對象的擴展

AWang 發布于2019-08-26 13:53 / 1940人閱讀

摘要：屬性的簡潔表示法在中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。

1. 屬性的簡潔表示法

在ES6中 允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。

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

等同于
const b = {f: f}

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

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]

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

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

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

3. 方法的 name 屬性

函數的name 屬性，返回函數名，對象方法也是函數，因此也由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創造的函數 name 屬性返回 bound 加上原有函數的名字

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

特殊情況 Function構造函數創造的函數，name 返回 anonymous

(new Function()).name // anonymous

如果對象的方法是一個Symbol 那么name 返回這個 Symbol的描述

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 引擎確認，定義的是對象的方法。

歡迎關注公眾號【小夭同學】

ES6入門系列

ES6入門之let、cont

ES6入門之變量的解構賦值

ES6入門之字符串的擴展

ES6入門之正則的擴展

ES6入門之數值的擴展

ES6入門之函數的擴展

ES6入門之對象的新增方法

Git教程

前端Git基礎教程

GPU云服務器云服務器 es6字符串擴展對象的擴展 ES6入門機器學習入門之

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

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

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://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用來解決在ES5中兩種相等運算符的缺點。用來比較兩個值是否嚴格相等，行為和（===）基本一致。在ES5中判斷兩個值是否相等，只能用（==）相等運算符和（===）嚴格相等運算符，但是這兩貨都有缺點，前者兩邊的值都會轉換數據類型，...

zhou_you 2019-05-22 19:25 評論0 收藏0
ES6入門之函數的擴展

摘要：如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

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

摘要：如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

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