属性的简洁表示法

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

  1. const foo = 'bar';
  2. const baz = {foo};
  3. baz // {foo: "bar"}
  4. // 等同于
  5. const baz = {foo: foo};

上面代码中,变量foo直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。下面是另一个例子。

  1. function f(x, y) {
  2. return {x, y};
  3. }
  4. // 等同于
  5. function f(x, y) {
  6. return {x: x, y: y};
  7. }
  8. f(1, 2) // Object {x: 1, y: 2}

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

  1. const o = {
  2. method() {
  3. return "Hello!";
  4. }
  5. };
  6. // 等同于
  7. const o = {
  8. method: function() {
  9. return "Hello!";
  10. }
  11. };

下面是一个实际的例子。

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

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

  1. function getPoint() {
  2. const x = 1;
  3. const y = 10;
  4. return {x, y};
  5. }
  6. getPoint()
  7. // {x:1, y:10}

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

  1. let ms = {};
  2. function getItem (key) {
  3. return key in ms ? ms[key] : null;
  4. }
  5. function setItem (key, value) {
  6. ms[key] = value;
  7. }
  8. function clear () {
  9. ms = {};
  10. }
  11. module.exports = { getItem, setItem, clear };
  12. // 等同于
  13. module.exports = {
  14. getItem: getItem,
  15. setItem: setItem,
  16. clear: clear
  17. };

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

  1. const cart = {
  2. _wheels: 4,
  3. get wheels () {
  4. return this._wheels;
  5. },
  6. set wheels (value) {
  7. if (value < this._wheels) {
  8. throw new Error('数值太小了!');
  9. }
  10. this._wheels = value;
  11. }
  12. }

简洁写法在打印对象时也很有用。

  1. let user = {
  2. name: 'test'
  3. };
  4. let foo = {
  5. bar: 'baz'
  6. };
  7. console.log(user, foo)
  8. // {name: "test"} {bar: "baz"}
  9. console.log({user, foo})
  10. // {user: {name: "test"}, foo: {bar: "baz"}}

上面代码中,console.log直接输出userfoo两个对象时,就是两组键值对,可能会混淆。把它们放在大括号里面输出,就变成了对象的简洁表示法,每组键值对前面会打印对象名,这样就比较清晰了。

注意,简写的对象方法不能用作构造函数,会报错。

  1. const obj = {
  2. f() {
  3. this.foo = 'bar';
  4. }
  5. };
  6. new obj.f() // 报错

上面代码中,f是一个简写的对象方法,所以obj.f不能当作构造函数使用。