ES6学习笔记--对象的扩展

376 阅读3分钟

1.属性的简洁表示法

允许在对象中直接写入变量和函数,作为对象的属性和方法.

    const a = {foo}
    // 等同于
    const a = {foo: foo}

变量直接写在大括号内,属性名就是变量名,属性值就是变量值 例子:

    function f(x, y) {
        return {x,y}
    }
    // 这个函数返回一个对象,这个对象有;两个属性x,y,属性x的值就是:传入参数x 的值,属性y的值就是:传入参数y 的值,
    //等同于
    function f(x, y) {
        return {x, y}
    } 
    
    f(1,2) // {1, 2}

除了属性可以简写外,方法也可以简写

    const a = {
        getName() {
            
        }
    }
    
    // 等同于
    const a = {
        getName: function() {
            
        }
    }

2 属性名表达式

JS定义对象的属性名,有两种方法

    // 方法一
    const  a = {}
    a.foo = true
    
    // 方法二
    const a = {}
    a['foo'] =  true

但是如果使用对象字面量的方式,只能使用方法一(对象标识符)。 现在ES6 允许在使用对象字面量方式的时候, 使用表达式作为队形的属性名,就是 [表达式]作为属性名。也有人把这种形式叫做对象属性名的计算表达式。

    let propKey = 'foo'
    
    let a = {
        [propKey]: 'name',
        ['a' + 'b']: 'age'
    }
    a // {foo: "name", ab: "age"}

这种表达式同样可以作用与对象的方法名上,

    let obj = {
        ['a'+ 'b'] () {
            console.log('ab')
        }
    }
    obj.ab() // ab

注意,属性名表达式与简洁表示法,不能同时使用,会报错。

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};
// 很好奇为什么会出现这种情况?暂时无法解决疑问。
myObject // Object {[object Object]: "valueB"}

3.方法的 name 属性

返回方法的函数名

    const person = {
        sayName() {
            console.log('hello!');
        }
    };

person.sayName.name // "sayName"

4 属性的可枚举型和遍历

我们知道对象的每个属性都有一个描述对象(Descriptor),用来控制属性的行为。 Object.getOwnPropertyDescriptor() 这个方法可以获取属性的描述对象

    let obj = { foo: 123 }
    Object.getOwnPropertyDescriptor(obj, 'foo')
    // 返回对象obj属性foo的描述对象。
    //  {
    //    value: 123,
    //    writable: true,
    //    enumerable: true,
    //    configurable: true
    //  }

描述对象的enumerable 规定了这个属性是否可被枚举,如果这个值为false,就表示在 操作时 会忽略这个属性,意为在对这个对象进行遍历时,foo 属性是 不能被遍历的。 但是,有些操作会忽略 描述对象的 enumerable 为false的情况,意为,即使为false ,这个属性依然会被遍历。这些操作包含:

for...in循环:只遍历对象自身的和继承的可枚举的属性。
Object.keys():返回对象自身的所有可枚举的属性的键名。
JSON.stringify():只串行化对象自身的可枚举的属性。
Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。

遍历对象属性的方法

  • for...in
  • Object.keys(obj)
  • Object.getOwnPropertyNames(obj)
  • Object.getOwnPropertySymbols(obj)
  • Reflect.ownKeys(obj)

5.super关键字

this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto); // 用来更改对象的原型对象
obj.find() // "hello"

super关键字只能用在对象的方法上,用在其他地方会报错。

6.对象结构赋值

解构赋值是浅拷贝