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引擎确认，定义的是对象的方法。

6. 对象的拓展运算符

解构赋值

拓展运算符

posted @ 2019-06-19 17:56 糖小圆阅读(127) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部