ES 6 中对象属性的简洁表示法

  • A+
所属分类:Java

ES6 允许在对象中直接写入变量和函数,作为对象的属性和方法。此种方式简化了对象的定义。

一.属性的简洁表示法

1.基本定义

  • 属性和方法的简洁表示
    //一 属性的简洁表示
    const foo = 'bar';
    const baz = {foo};
    baz // {foo: "bar"}
    // 等同于
    const baz = {foo: foo};
    
    //二 方法的简洁表示
    const o = {
      method() {
        return "Hello!";
      }
    };
    // 等同于
    const o = {
      method: function() {
        return "Hello!";
      }
    };
    

2.对象属性和方法简写使用范例

  • ① 对象属性简写使用范例
    function f(x, y) {
      return {x, y};
    }
    
    // 等同于
    
    function f(x, y) {
      return {x: x, y: y};
    }
    
    f(1, 2) // Object {x: 1, y: 2}
    
  • ② 对象属性和方法简写使用范例
    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(key),
      setItem: setItem(key,value),
      clear: clear()
    };
    
  • ⑤ 属性的赋值器(setter)和取值器(getter),也使用简写的方式
    const cart = {
      _wheels: 4,
    
      get wheels () {
        return this._wheels;
      },
    
      set wheels (value) {
        if (value < this._wheels) {
          throw new Error('数值太小了!');
        }
        this._wheels = value;
      }
    }
    
  • ⑥ 使用简写的方式打印对象
    let user = {
      name: 'test'
    };
    
    let foo = {
      bar: 'baz'
    };
    
    console.log(user, foo)
    // {name: "test"} {bar: "baz"}
    console.log({user, foo})
    // {user: {name: "test"}, foo: {bar: "baz"}}
    
zhangfeng

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: