ES6 学习笔记之对象的拓展

1.属性的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样书写更加简洁。

   const foo = 'bar';

   const baz = {foo};

   baz    //{foo: "bar"}

   //等同于

   const baz  = { foo: foo};

   baz    //{foo: "bar"}

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名，属性值为变量的值。下面是另一个例子。

        function f(x, y){

            return {x, y};

        }

        //等同于

        function f(x, y){

            return {x:x, y:y};

        }

        f(1, 2);  //{x: 1, y: 2}

除了属性简写，方法也可以简写。

        const o = {

            method (){

                return "hello!";

            }

        };

        //等同于

        const o = {

            method : function() {

                return "hello!";

            }

        };

下面还有一个例子。

let brith = '2000/01/01';

        const Person = {

            name = 'lisi',

            //等同于 birth: birth

            birth,

            hell() {

                //等同于 hello: function ()...

                console.log('My name is', this.name);

            }

        };

这种写法用于函数的返回值，将会非常方便。

        function getPoint() {

            const x = 1;

            const y = 2;

            return {x, y};

        }

        getPoint()  //{x: 1, y: 2}

2.属性名表达式

Javascript 定义对象的属性，有两种方法。

//方法一:直接用标识符作为属性名

obj.name = 'lisi';

//方法二：用表达式作为属性名，将表达式放在方括号内

obj['a' + 'bc'] = 123;

但是，如果使用字面量方式定义对象（使用大括号），在ES5 中只能使用方法一定义属性。ES6 允许字面量定义对象时，用方法二作为对象的属性名，即把表达式放在方括号内。

let propKey = 'foo';

let obj = {

    [propKey]:true,

    ['a' + 'bc']: 123

};

表达式还可以用于定义方法名。注意，属性名表达式与简洁表示法不能同时使用，会报错。

//报错

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]: "valueB"}

上面代码中，[keyA] 和 [keyB] 得到的都是 [object, object]，所以 [keyB] 会把 [keyA] 覆盖掉，而 myObject 最后只有一个 [object, object] 属性。

3. 方法的 name 属性

函数的name属性，返回函数名。对象方法也是函数，因此也有 name 属性。

const person = {

    sayName() {

        console.log('hello!');

    },

};

person.sayName.name //"sayName"

上面代码中，方法的 name 属性返回函数名（即方法名）

如果对象的方法使用了取值函数（getter）和存值函数（setter），则 name 属性不是在该方法上面，而是该方法的属性的描述对象的 get 和 set 属性上面，返回值是方法名前加上get 和 set。

const person = {

    sayName() {

        console.log('hello!');

    },

};

person.sayName.name //"sayName"

const obj = {

    get foo() {},

    set foo(x) {}

};

//obj.foo.name  TypeError: Cannot read property 'name' of undefined

const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name   //"get foo"

descriptor.set.name   //"set foo"

有两种特殊情况：bind 方法创造的函数， name 属性返回 bound 加上原函数的名字；Function 构造函数创造的函数，name 属性返回 anonymous。

(new Function ()).name  //"anonymous"

var doSomething = function (){};

doSomething.bind().name //"bound doSomething"

如果对象的方法是一个 Symbol 值，那么 name属性返回的是这个 Symbol 值的描述。

const key1 = Symbol('description');

const key2 = Symbol();

let obj = {

    [key1]() {},

    [key2]() {},

};

obj[key1].name  //"[description]"

obj[key2].name  //""

上面代码中，key1 对应的Symbol 值有描述，key2 没有。

4.属性的可枚举和遍历

可枚举性

对象的每个属性都有一个描述对象（Descriptior）,用来控制该属性的行为。Object.getOwnPropertyDescriptor 方法可以获取该属性的对象。

let obj = { foo:123 };

Object.getOwnPropertyDescriptor(obj, 'foo')

/* {

    value: 123,

    writable: true,

    enumerable: true,

    configurable: true

} */

描述对象的 enumerable 属性，称为“可枚举性”，如果该属性为 false，表示某些操作会忽略当前属性。

目前，有四个操作会忽略 enumerable 为 false 的属性。

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

另外，ES6 规定，所有 Class 的原型的方法都是不可枚举的。

总的来说，操作中引入继承的属性会让问题复杂化，大多时候。我们只关心对象自身的属性。所以尽量不要用 for...in 循环，而用Object.keys() 代替。

属性的遍历

ES6 中一共有 5 种方法可以遍历对象的属性。

for in：循环遍历对象自身的和可继承的可枚举属性（不包括 Symbol 属性）
Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不包括 Symbol 属性）的键名
Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性（不包括 Symbol 属性，但是包括不可枚举属性）的键名
Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有 Symbol 属性的键名
Reflect.ownKeys(obj)：返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

以上的5种方法遍历对象的键名，都同样遵循属性遍历的次序规则。

首先遍历所有数值键，按照数值升序排列。
其次遍历所有字符串键，按照加入时间升序排列
最后遍历所有的 Symbol 键，按照加入时间升序排列

Reflect.ownKeys({ [Symbol()]:0, b:0,10:0, 2:0,a:0})

// ["2", "10", "b", "a", Symbol()]

上面代码中，Reflect.ownKeys 方法返回一个数组，包含了参数对象的所有属性。

5. super 关键字

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

const proto = {

    foo: 'hello'

};

const obj = {

    foo: 'world',

    find() {

        return super.foo;

    }

};

Object.setPrototypeOf(obj, proto);

obj.find(); //"hello"

上面代码中，对象 obj.find() 方法中，通过 super.foo 引用了原型对象 proto 的 foo 属性。

注意，super 关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错

//报错

const obj = {

    foo: super.foo

}

const obj = {

    foo: () => super.foo

}

const obi = {

    foo: function (){

        return super.foo

    }

}

上面三种 super 的用法都会报错，因为对于 Javascript 引擎来说，这里的 super 都没有用在对象的方法之中。第一种写法是 super 用在属性里面，第二种和第三种写法是 super 用在一个函数里面，然后赋值给 foo 属性。目前，只有对象方法的简写法可以让javascript引擎确认，定义的是对象的方法。

巴特西

ES6 学习笔记之对象的拓展

1.属性的简洁表示法

2.属性名表达式

3. 方法的 name 属性

4.属性的可枚举和遍历

可枚举性

5. super 关键字

6. 对象的拓展运算符

解构赋值

拓展运算符

最新文章

热门文章