ES6入门之对象的扩展

时间 2019-12-10

原文原文链接

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
}

表达式还能够用来定义方法名(注意：属性名表达式不能和简洁表示法同时使用)segmentfault

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 加上原有函数的名字post

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

特殊状况 Function构造函数创造的函数，name 返回 anonymousthis

(new Function()).name // anonymous

若是对象的方法是一个Symbol 那么name 返回这个 Symbol的描述spa

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就表示某些操做会忽略当前操做code

有四个操做会忽略 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 引擎确认，定义的是对象的方法。