Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the practical ES6 features". In daily operation, I believe many people have doubts about what practical ES6 features they have. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "what practical ES6 features are there?" Next, please follow the editor to study!

1. Unfold operator

As the name implies, it is used for the expansion operator before an object or array (.) To expand a structure into a list

Show me:

Let firstHalf = [one, two]; let secondHalf = [three, four,... firstHalf]

Isn't this elegant and concise? If you do not need the unfold operator

We have to write this:

Let firstHalf = [one, two]; let secondHalf = [three, four]; for (var iTun0, I acc + curr, 0);}

As mentioned earlier,... Remaining collects the remaining parameters and provides us with the naming of these parameters, making it clear that we intend to process the remaining parameters. I remember that ES5 already has arguments at the latest, but few people know about it.

3. String interpolation

Have you ever seen a sentence like this?

Class Product {constructor (name, description, price) {this.name = name; this.description = description; this.price = price;} getDescription () {return "Full description" + "name:" + this.name + "description:" + this.description}}

Of course, I'm referring to the poor readability of the multi-long statement in the getDescription () method. A similar phenomenon exists in most programming languages. Fortunately, JavaScript is one of the languages that provide string interpolation.

Let's rewrite the getDescription () method:

GetDescription () {return `Full description: name: ${this.name} description ${this.description} `;}

You can use ${} interpolation in a pair of wrapped strings. It looks much more comfortable now.

4. Abbreviated attribute

This must be written in ES5:

Function createCoord (x, y) {return {x: X, y: y}}

ES6 can use abbreviated properties later:

Function createCoord (x, y) {return {x, y}}

Doesn't it look fresher?

5. Method attribute

A method property is a property that defines a property pointing to a method in an object.

Consider the following ES5 code as an example:

Const math = {add: function (arecom b) {return a + b;}, sub: function (areco b) {return a-b;}, multiply: function (ameme b) {return a * b;}}

After ES6, all you have to do is write:

Const math = {return a + b;}, sub (add a-b) {return a-b;}, multiply (a dint b) {return a * b;}}

6. Deconstruction assignment

Deconstructing assignment is beneficial to the mental health of developers.

Consider the following code:

Function handle (req, res) {const name = req.body.name; const description = req.body.description; const url = req.url; log (url endpoint, url); / / A large amount of code logic dbService.createPerson (name, description)}

From any point of view, the above code is not perfect, but it does reflect an application scenario in which we want to get data from different levels of objects. You might ask, what's the problem here? Well, I can save some keystrokes without declaring so many variables.

Function handle (req, res) {const {body: {name, description}, url} = req; log (url endpoint, url); / / A large number of code logic dbService.createPerson (name, description)

Look, the code above compresses three lines into one.

Deconstructing assignment is not limited to objects. It also applies to arrays.

Consider the following code:

Const array = [1, const 2, 3, 4, 5, 5, 6]; const a = array [0]; const c = array [2]

The above code can be rewritten in a more elegant way:

Const array = [1, 2, 3, 4, 5, 6]; const [a, c,... remaining] = arr; / / remaining = [4, 5, 5, 6]

We can use the pattern above to match the values of the decomposed array. We use to skip some values. The remaining parameters mentioned above can also be used here, where we capture the remaining array members with the remaining parameters.

Deconstructing assignments can also be used for functions and parameters. When a function has more than 2-3 parameters, it is the de facto standard of JavaScript to use an object to collect all parameters.

For example, the following function:

Function doSomething (config) {if (config.a) {.} if (config.b) {.} if (config.c) {.}}

There is a better way to write:

Function doSomething ({a, b, c}) {if (a) {...} if (b) {...} if (c) {...}}

7. Array method

ES6 introduces many useful array methods, such as:

Find (). Find the member in the list. Return null to indicate that it is not found.

FindIndex () to find the index of a list member

Some () to check whether an assertion is true on at least one member of the list

Includes, whether the list contains an item

The following code helps you understand their usage:

Const array = [{id: 1, checked: true}, {id: 2}]; arr.find (item = > item.id = 2) / / {id: 2} arr.findIndex (item = > item.id = 2) / / 1 arr.some (item = > item.checked) / / true const numberArray = [1, 2, 3, 4]; numberArray.includes (2) / / true Promises + Async/Await

8. Asynchronous scheme

If you have been in this circle for some years, you may remember that there was a time when we only had a pullback.

It's like this:

Function doSomething (cb) {setTimeout (() = > {cb (done)}, 3000)} doSomething ((arg) = > {console.log (done here, arg);})

We use callbacks because some operations are asynchronous and take time to complete. Then we had the promise library, and people started using it. Then JavaScript gradually added native support for promise.

Function doSomething () {return new Promise ((resolve, reject) = > {setTimeout () = > {resolve (done)}, 3000)} doSomething () .then (arg = > {console.log (done here, arg);})

We can even string the promise together like this:

GetUser () .then (getOrderByUser) .then (getOrderItemsByOrder) .then (orderItems = > {/ / process sorted members})

And then life was better, and we had async/await.

The above code can be written as follows:

Async function getItems () {try {const user = await getUser (); const order = await getOrderByUser (user); const items = await getOrderItemsByOrder (order); return items;} catch (err) {/ / handles errors here. It is recommended to return a value or re-throw the error}} getItems (). Then (items = > {/ / handle sorted members}

9. Module

Almost any programming language supports the concept of modules, which divides the code into multiple files, each of which is a self-contained unit (module).

Consider the following code:

/ / math.js export function add (return a + b) {return a + b;} export function sub (areco b) {return a-b;} export default mult (areco b) = > a * b; / / main.js import mult, {add, sub} from. / math; mult (2, 4) / / 8 add (1) / / 2 sub (1) /-1

We noted above with the export keyword that the add and sub structures are publicly visible to any module that introduces the module. The export default keyword indicates the structure you get when you only import the module. In main.js, we named the imported default mult and indicated that we introduced two methods, add () and sub (). Arrow function and dictionary scope this.

At this point, the study on "what are the practical ES6 features" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.