1. Concise representation of attributes

ES6 allows you to write variables and functions directly as properties and methods of an object. This writing is more concise.

var foo = 'bar'; var baz = {foo}; Var baz = {foo: foo};Copy the code

The above code shows that ES6 allows you to write only the property name, but not the property value, in an object. At this point, the property value is equal to the variable represented by the property name. Here’s another example.

function f(x, y) {

return {x, y};

}
Copy the code

/ / is equivalent to

function f(x, y) {

return {x: x, y: y};

}

f(1, 2) // Object {x: 1, y: 2}
Copy the code

In addition to property shorthand, methods can also be abbreviated.

var o = { method() { return "Hello!" ; }}; Var o = {method: function() {return "Hello!" ; }};Copy the code

Here’s a practical example.

var birth = '2000/01/01'; Var Person = {name: 'name ', // = hello: function ()... Hello () {console.log(' my name is ', this.name); }};Copy the code

This will be handy for the return value of a function.

function getPoint() { var x = 1; var y = 10; return {x, y}; } getPoint() // {x:1, y:10}Copy the code

The CommonJS module outputs variables, which are very suitable for this terse writing.

var 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 }; Exports = {getItem: getItem, setItem: setItem, clear: clear};Copy the code

The setters and getters for properties are actually written this way.

var cart = { _wheels: 4, get wheels () { return this._wheels; }, set wheels (value) {if (value < this._wheels) {throw new Error(' the value is too small! '); } this._wheels = value; }}Copy the code

Note that the attribute name is always a string in the terse way, which leads to some strange-looking results.

var obj = { class () {} }; Var obj = {'class': function() {}};Copy the code

In the above code, class is a string, so there is no parsing error because it belongs to a keyword.

If the value of a method is a Generator function, it needs to be preceded by an asterisk.

var obj = {* m(){ yield 'hello world'; }};Copy the code

2. Attribute name expression

The JavaScript language defines the properties of an object in two ways.

Foo = true; Obj ['a' + 'BC '] = 123;Copy the code

The first method is to use an identifier as the property name, and the second method is to use an expression as the property name, in which case the expression should be placed within square brackets.

However, if you define objects in a literal way (with braces), you can only define properties in ES5 using method one (identifier).

var obj = {

foo: true,

abc: 123

};
Copy the code

When ES6 allows literals to define objects, use method two (expression) as the property name of the object, that is, put the expression inside square brackets.

let propKey = 'foo'; let obj = { [propKey]: true, ['a' + 'bc']: 123 }; Here's another example. var lastWord = 'last word'; var a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world"Copy the code

Expressions can also be used to define method names.

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

Note that the attribute name expression and the terse notation cannot be used together, and an error will be reported.

Var foo = 'bar'; var bar = 'abc'; var baz = { [foo] }; Var foo = 'bar'; var baz = { [foo]: 'abc'};Copy the code