ES6 in Action: Enhanced Object Literals

ES6 Object Literal Enhancement: Simplify JavaScript Object Operations

The enhanced object literal characteristics introduced by ES6 significantly simplify object processing in JavaScript, mainly reflected in abbreviated attribute names, abbreviated method names, and computed attribute names.

Abbreviated attribute names make attribute definitions more concise; abbreviated method names simplify method definition syntax; while computed attribute names allow dynamic creation of attribute names based on variable values.

Enhanced object literals can be used in conjunction with other ES6 features such as arrow functions, template literals, and deconstructed assignments to write more concise and easy to read.

It should be noted that enhanced object literals are not compatible with all older browsers, but you can use a translator such as Babel to convert ES6 code to ES5 code to solve compatibility issues.

This article explores the possibilities of JavaScript object literals, especially the improvements brought by recent ECMAScript updates. Creating JavaScript objects using literal notation is very powerful. New features introduced in ES2015 (ES6) make object processing more convenient in all modern browsers (except IE) and Node.js. In some languages, if a class must be declared before an object is created, it increases the cost of development time and processing power. And in JavaScript, objects can be created dynamically easily. For example:

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1 + ' ' + this.prop2);
  }
};

myObject.output(); // hello world

In many cases, one-time objects will be used, such as configuration settings, module definitions, method parameters, function return values, etc. ES2015 (ES6) adds a range of features to enhance object literals.

Initialize object from variable

The properties of the

object are usually created by variables with the same name. For example:

// ES5 代码
var a = 1, b = 2, c = 3;
var obj = {
  a: a,
  b: b,
  c: c
};

// obj.a = 1, obj.b = 2, obj.c = 3

No repetition is required in ES6!

// ES6 代码
const a = 1, b = 2, c = 3;
const obj = { a, b, c };

// obj.a = 1, obj.b = 2, obj.c = 3

This is useful when returning objects using Revealing Module Pattern (effectively namespaces for code to avoid naming conflicts). For example:

// ES6 代码
const lib = (() => {
  function sum(a, b) { return a + b; }
  function mult(a, b) { return a * b; }
  return { sum, mult };
})();

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

You may have seen similar usages in the ES6 module:

// lib.js
function sum(a, b) { return a + b; }
function mult(a, b) { return a * b; }
export { sum, mult };

Abbreviation of Object Method Definition

Object methods in ES5 require function declarations. For example:

// ES5 代码
var lib = {
  sum: function(a, b) { return a + b; },
  mult: function(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

No longer required in ES6, the following abbreviation syntax can be used:

// ES6 代码
const lib = {
  sum(a, b) { return a + b; },
  mult(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

The ES6 arrow function => syntax cannot be used here because the method requires a name. That is, if you name each method directly (similar to ES5), you can use the arrow function. For example:

// ES6 代码
const lib = {
  sum: (a, b) => a + b,
  mult: (a, b) => a * b
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

Dynamic attribute key

In ES5, variables cannot be used as key names, although it can be added after the object is created by . For example:

In

// ES5 代码
var key1 = 'one';
var obj = { two: 2, three: 3 };
obj[key1] = 1;

// obj.one = 1, obj.two = 2, obj.three = 3

ES6, you can dynamically assign object keys by placing the expression in

square brackets [. For example: ]

// ES6 代码
const key1 = 'one';
const obj = { [key1]: 1, two: 2, three: 3 };

// obj.one = 1, obj.two = 2, obj.three = 3

Any expression can be used to create a key. For example:

// ES6 代码
const i = 1;
const obj = { ['i' + i]: i };
console.log(obj.i1); // 1

Dynamic keys can be used for methods and properties. For example:

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1 + ' ' + this.prop2);
  }
};

myObject.output(); // hello world

Whether dynamic properties and methods should be created is another question. The code can be difficult to read, it is best to create an object factory or class.

(The following content will be briefly summarized due to space limitations, and the core points will be retained)

Deconstruction (get variables from object properties)

ES6 Deconstruction simplifies the process of extracting attribute values ​​from objects to variables.

Default function parameters

ES6 default parameters and deconstruction combine to simplify function parameter processing, especially when processing optional parameters.

ES2018 (ES9) rest/spread attribute

ES2018's rest/spread operator extends to objects, allowing for more flexibility in handling object properties.

Summary: ES6 enhanced object literals do not change the core way JavaScript works, but it saves the effort to write code and makes the code clearer and more concise.

(Some of FAQs content has been omitted due to space limitations. If necessary, you can ask questions for specific questions.)

The above is the detailed content of ES6 in Action: Enhanced Object Literals. For more information, please follow other related articles on the PHP Chinese website!