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 food.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基础教程