zoukankan      html  css  js  c++  java
  • 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 种方法可以遍历对象的属性。

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

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

    1. 首先遍历所有数值键,按照数值升序排列。
    2. 其次遍历所有字符串键,按照加入时间升序排列
    3. 最后遍历所有的 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. 对象的拓展运算符

    解构赋值

    拓展运算符

  • 相关阅读:
    正则表达式在NLP中应用
    spring boot中 异常:Error resolving template "xxx", template might not exist or might not be accessible...解决办法
    毕业设计6
    毕业设计5
    毕业设计4
    毕业设计3
    毕业设计2
    毕业设计1
    支付宝架构
    Javaee应用架构
  • 原文地址:https://www.cnblogs.com/ly2019/p/11050447.html
Copyright © 2011-2022 走看看