zoukankan      html  css  js  c++  java
  • ES6对象的扩展及新增方法

    1.属性的简洁表示法

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

    
    const foo = 'bar';
    const baz = {foo};
    baz//{foo:'bar'}
    
    //等同于
    const baz = {foo:foo}
    

    上面代码表明,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 'Hellow';
        }
    }
    

    下面是一个实际的例子。

    
    let birth = '2000/01/01';
    const Person ={
        name:'张三',
        //等同于birth:birth
        birth,
        //等同于hello :function()....
        hello(){
            console.log('我的名字是',this.name) 
        }
    }
    

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

    
    function getPoint(){
        const x =1;
        const y = 10;
        return {x,y}
    }
    getPoint()//{x:1,y:10}
    

    CommonJS模块输出一组变量,就非常合适使用简洁写法。

    
    let ms = {};
    function getItem(key){
        return key in ms ?ms[key]:null;
    }
    function setItem(key,value){
        ms[key] = value;
    }
    function clear(){
        ms={}
    } 
    module.exports = {getItem,setItem,clear};
    //等同于
    module.exports = {
        getItem:getItem,
        setItem:setItem,
        clearLclear
    }
    

    属性的赋值器(setter)和取值器(getter),事实上也是采用这种写法。

    
    const cart = {
        _wheels:4,
        get wheels(){
            return this._wheels;
        },
        set wheels (value){
            if(value<this._wheels){
                throw new Error('数值太小了!');
            }
            this._whells = value;
        }
    }
    

    2.属性名表达式

    JavaScript定义对象的属性,有两种方法。

    
    //方法一
    obj.foo = true;
    //方法二
    obj['a'+'bc'] = 123;
    

    上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时将表达式放在方括号之内。
    但是,如果使用字面量定义对象(使用大括号),在ES5中只能使用方法一(标识符)定义属性。

    
    var obj ={
        foo:true,
        abc:123
    }
    

    ES6允许字面量定义对象时,用方法二作为对象的属性名,即把表达式放在括号内。

    
    let propKey = 'foo';
    let obj ={
        [propKey]:true,
        ['a'+'bc']:123
    }
    

    下面是另一个例子:

    
    let lastWord = 'last word';
    const a = {
        'first word':'hello',
        [lastWord]:'world'
    };
    a['first word']//hello
    a[lastWord]//world
    a['last word']//world
    

    表达式还可以用于定义方法名。

    
    let obj = {
        ['h'+'ello'](){
            return 'hi'
        }
    }
    obj.hello()//hi;
    

    注意:

    
    属性名表达式与简洁表示法,不能同时使用,会报错。
    属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object object],这一点要特别小心。
    
    
    const keyA = {a:1};
    const keyB = {b:2};
    const myObject = {
        [keyA]:'valueA',
        [keyB]:'valueB'
    };
    myObject;// Object {[object Object]: "valueB"}
    

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

    方法的name属性

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

    
    const person = {
      sayName() {
        console.log('hello!');
      },
    };
    
    person.sayName.name   // "sayName"
    

    属性的可枚举型和遍历

    对象的每个属性都有一个描述对象,用来控制改属性的行为。Object.getOwnPropertyDescriptor(obj,'foo')方法可以获取该属性的描述对象。
    描述对象的enumerable属性,称为可枚举性,如果该属性为false,就表示某些操作会忽略当前的属性。
    目前,有四个操作会忽略enumerable为false的属性。

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

    ES6一共有5种方法可以遍历对象的属性。
    (1)for...in

    
    for...in循环遍历对象自身的和继承的可枚举属性(不包含Symbol属性)。
    

    (2)Object.keys(obj)

    
    object.keys返回一个数组,包含对象自身的(不含继承的)所有可枚举属性(不包含Symbol属性)的键名。
    

    (3)Object.getOwnPropertyNames(obj)

    
    返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)的键名。
    

    (4)Object.getOwnPropertySymbols(obj)

    
    返回一个数组,包含对象自身的所有Symbol属性的键名。
    

    (5)Reflect.ownKeys(obj)

    
    Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是Symbol或字符串,也不管是否可枚举。
    
    

    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关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。目前,只有对象方法的简写法可以让Javascript引擎确认,定义的是对象的方法。
    JavaScript引擎内部,super.foo等同于Object.getPrototypeOf(this).foo或Object.getPrototypeOf(this).foo.call(this)。

    对象的扩展运算符

    解构赋值
    对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。ES6 Promise对象

    
    let{x,y,...z} = {x:1,y:2,a:3,b;4};
    x//1,
    y//2,
    z//{a:3,b:4}
    

    上面代码中,变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(a和b),将它们连同值一起拷贝过来。

    来源:https://segmentfault.com/a/1190000017847121

  • 相关阅读:
    poj 1789 每个字符串不同的字母数代表两个结点间的权值 (MST)
    poj 1251 poj 1258 hdu 1863 poj 1287 poj 2421 hdu 1233 最小生成树模板题
    poj 1631 最多能有多少条不交叉的线 最大非降子序列 (LIS)
    hdu 5256 最少修改多少个数 能使原数列严格递增 (LIS)
    hdu 1025 上面n个点与下面n个点对应连线 求最多能连有多少条不相交的线 (LIS)
    Gym 100512F Funny Game (博弈+数论)
    UVa 12714 Two Points Revisited (水题,计算几何)
    UVa 12717 Fiasco (BFS模拟)
    UVa 12718 Dromicpalin Substrings (暴力)
    UVa 12716 && UVaLive 6657 GCD XOR (数论)
  • 原文地址:https://www.cnblogs.com/lalalagq/p/10254782.html
Copyright © 2011-2022 走看看