es6 javascript对象属性的简洁表示法

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

 

1. var foo = 'bar';

2. var baz = {foo};

3. baz // {foo: "bar"}

4. // 等同于

5. var baz = {foo: foo};

上面代码表明， ES6 允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。下面是另一个例子。

 

 

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. var o = {

2. method() {

3. return "Hello!";

4. }

5. };

6. // 等同于

7. var o = {

8. method: function() {

9. return "Hello!";

10. }

11. };

下面是一个实际的例子。

 

 

1. var birth = '2000/01/01';

2. var Person = {

3. name: ' 张三 ',

4. // 等同于 birth: birth

5. birth,

6. // 等同于 hello: function ()...

7. hello() { console.log(' 我的名字是 ', this.name); }

8. };

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

 

 

1. function getPoint() {

2. var x = 1;

3. var y = 10;

4. return {x, y};

5. }

6. getPoint()

7. // {x:1, y:10}

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

 

 

1. var 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. var 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. var obj = {

2. class () {}

3. };// 等同于

4. var obj = {

5. 'class': function() {}

6. };

上面代码中，class是字符串，所以不会因为它属于关键字，而导致语法解析报错。
如果某个方法的值是一个 Generator 函数，前面需要加上星号。

1. var obj = {

2. * m(){

3. yield 'hello world';

4. }

5. };