The 10 best ES6 features not unknown in front-end development, and the es6 features cannot be included in the front-end development.

The 10 best ES6 features not unknown in front-end development, and the es6 features cannot be included in the front-end development.

To ensure readability, this article uses free translation instead of literal translation, and implements a lot of modifications to the source code. In addition, this article is copyrighted by the original author, and translation is only used for learning.

ES6, the official name is ECMAScript2015, but ES6 is more concise. ES6 is no longer the latest JavaScript standard, but it is widely used in programming practice. If you haven't used ES6 before, it's not too late...

The following are the best features of 10 ES6, ranking in no particular order:

• Default Value of function parameters
• Template string
• Multiline string
• Deconstruct assignment
• Abbreviated object property name
• Arrow Function
• Promise
• Let and Const
• Class
• Modular
• Default Value of function parameters
• Do not use ES6

Set the default value for the function parameters:

function foo(height, color){ var height = height || 50; var color = color || 'red'; //...}

In this case, the write is normal. However, when the Boolean value of the parameter is false, something will happen! For example, we call the foo function as follows:

foo(0, "", "")

Because the Boolean value of 0 is false, the value of height is 50. Similarly, the value of color is 'red '.

Use ES6

function foo(height = 50, color = 'red'){ // ...}

Template string

Do not use ES6

Concatenate the variable into a string using the plus sign:

var name = 'Your name is ' + first + ' ' + last + '.'

Use ES6

Put the variables in braces:

var name = `Your name is ${first} ${last}.`

ES6 is more concise and intuitive.

Multiline string

Do not use ES6

Concatenate multiple strings using \ n \ t:

var roadPoem = 'Then took the other, as just as fair,\n\t' + 'And having perhaps the better claim\n\t' + 'Because it was grassy and wanted wear,\n\t' + 'Though as for that the passing there\n\t' + 'Had worn them really about the same,\n\t'

Use ES6

Put multiple lines of strings between the backquotes:

var roadPoem = `Then took the other, as just as fair, And having perhaps the better claim Because it was grassy and wanted wear, Though as for that the passing there Had worn them really about the same,`

Deconstruct assignment

Do not use ES6

To obtain the attribute values of an object, you must obtain the values separately:

Var data = $ ('body'). data (); // data has the house and mouse attributes var house = data. house; var mouse = data. mouse;

Use ES6

Obtain the sub-attributes of an object at a time:

var { house, mouse} = $('body').data()

The same is true for Arrays:

var [col1, col2] = $('.column')；

Abbreviated object property name

Do not use ES6

The object must contain attributes and values, which are redundant:

var bar = 'bar';var foo = function (){ // ...}var baz = { bar: bar, foo: foo};

Use ES6

Directly write variables in the object, which is very simple:

var bar = 'bar';var foo = function (){ // ...}var baz = { bar, foo };

Arrow Function

Do not use ES6

This in the body of a common function points to the object in the call.

Function foo () {console. log (this. id);} var id = 1; foo (); // output 1foo. call ({id: 2}); // output 2

Use ES6

This in the arrow function is the object in the definition, rather than the object in the call.

Var foo = () => {console. log (this. id);} var id = 1; foo (); // output 1foo. call ({id: 2}); // output 1

Promise

Do not use ES6

Nest two setTimeout callback functions:

SetTimeout (function () {console. log ('hello'); // output "Hello" setTimeout (function () {console. log ('fundebug'); // output "Fundebug"}, 1000) in 2 seconds;}, 1000 );

Use ES6

Using two then is asynchronous programming serialized, avoiding callback hell:

Var wait1000 = new Promise (function (resolve, reject) {setTimeout (resolve, 1000) ;}); wait1000. then (function () {console. log ("Hello"); // output "Hello" return wait1000;}) in 1 second ;}). then (function () {console. log ("Fundebug"); // output "Fundebug"} 2 seconds later "});

Let and Const

Use Var

The variables defined by var have no function-level scope:

{Var a = 10;} console. log (a); // output 10

Use let and const

The variables defined by let are block-level scopes, so an error is returned: (if you want to monitor JavaScript Application errors in real time, you are welcome to use Fundebug for free)

{Let a = 10;} console. log (a); // error "ReferenceError: a is not defined"

Like let, const is also a block-level scope.

Class

Do not use ES6

Create an object using the constructor:

Function Point (x, y) {this. x = x; this. y = y; this. add = function () {return this. x + this. y ;};} var p = new Point (1, 2); console. log (p. add (); // output 3

Use ES6

Use Class to define the Class, which is more standardized and can be inherited:

Class Point {constructor (x, y) {this. x = x; this. y = y;} add () {return this. x + this. y ;}} var p = new Point (1, 2); console. log (p. add (); // output 3

Modular

JavaScript has never had an official modular solution. Developers mainly adopt CommonJS and AMD specifications in practice. ES6 develops the Module function.

Do not use ES6

Node. js adopts the CommenJS specification to implement modularization, and the front-end can also be used, but it only needs to be packaged using tools such as Browserify during deployment. Here we will introduce the CommenJS specification.

In module. js, use module. exports to export the port variable and the getAccounts function:

module.exports = { port: 3000, getAccounts: function() { ... }}

Use require in main. js to import module. js:

Var service = require ('module. js') console. log (service. port) // output 3000

Use ES6

In ES6, the export and import keywords are used to implement modularity.

Use export in module. js to export port variables and getAccounts functions:

export var port = 3000export function getAccounts(url) { ...}

Use import to import module. js in main. js to specify the variables to be imported:

Import {port, getAccounts} from 'module' console. log (port) // output 3000

You can also import all the variables:

import * as service from 'module'console.log(service.port) // 3000

Summary

The above is the 10 best ES6 features introduced by the editor for front-end development. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!