ES6入门之对象的扩展

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 // undefinedconst 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...infor...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基础教程