Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use ES6". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use ES6.

The JS syntax after ps:ES5 is collectively referred to as ES6 grammar!

First, complaints about the value

Values are very common in programs, such as taking values from the object obj.

Const obj = {avell 1, bvul 2, CRAV 3, dRO 4, eRO 5,}

Complain:

Const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e

Or

Const f = obj.a + obj.d;const g = obj.c + obj.e

Complain: "won't you use the deconstruction assignment of ES6 to get a value? isn't it good to have five lines of code with one line of code? just use the object name plus the property name to get the value. What if the object name is short and long? the code is full of this object name."

Improvements:

Const {a recollection bpm cpene e} = obj;const f = a + d tinct Const g = c + e

Refute

It is not that the deconstruction assignment of ES6 is not used, but that the property name in the data object returned by the server is not what I want, so it is not necessary to recreate a traversal assignment.

Make a sarcastic comment

It seems that you do not have a thorough grasp of the deconstruction assignment of ES6. If the variable name you want to create does not match the property name of the object, you can write:

Const {a:a1} = obj;console.log (A1); / / 1

Supplement

The deconstruction assignment of ES6 is easy to use. However, it should be noted that the deconstructed object cannot be undefined or null. Otherwise, an error will be reported, so give the deconstructed object a default value.

Const {a _ const _

II. Complaints about merging data

For example, merge two arrays, merge two objects.

Const a = [1je 2jue 3]; const b = [1pje 5je 6]; const c = a.concat (b); / / [1je 2je 3je 5je 6] const obj1 = {const obj2 1,} const obj2 = {bvav 1,} const obj = Object.assign ({}, obj1, obj2); / / {ajil 1re bjor1}

Make a sarcastic comment

Have you forgotten the extension operator of ES6 and the merging of arrays without considering de-duplication?

Improve

Const a = [1je 2jue 3]; const b = [1pje 5je 6]; const c = [... new Set ([... areco... b])]; / / [1Met 2pr 3lce6] const obj1 = {ares1,} const obj2 = {bjor1,} const obj = {... obj1,...obj2}; / / {a1lav rect bjor1}

Third, complaints about concatenating strings

Const name = 'Xiaoming'; const score = 59 name result =''; if (score > 60) {result = `${name} passed the exam;} else {result =` ${name} failed `;}

Make a sarcastic comment

If you use the ES6 string template like this, you might as well not use it. You have no idea what you can do in ${}. You can put any JavaScript expression in ${}, perform operations, and reference object properties.

Improve

Const name = 'Xiao Ming'; const score = 59th Const result = `$ {name} ${score > 60 years' Passed the examination results': failed the examination results'}'

Fourth, complaints about the judgment conditions in if

If (type = = 1 | | type = = 2 | | type = = 3 | | type = = 4 |) {/ /.}

Make a sarcastic comment

Will the array instance method includes be used in ES6?

Improve

Const condition = [1, 2, 3, 4]; if (condition.includes (type)) {/ /...}

Complaints about list search

In the project, the search function of some unpaged lists is realized by the front end, and the search is generally divided into precise search and fuzzy search. Search is also called filtering, which is generally implemented with filter.

Const a = [1, return item 2, 3, 4, 5]; const result = a.filter (item = > {return item = 3})

Make a sarcastic comment

If it's a precise search, won't you use find in ES6? Performance optimization, you know, if you find a qualified item in the find method, you will not continue to traverse the array.

Improve

Const a = [1, return item 2, 3, 4, 5]; const result = a.find (item = > {return item = 3})

VI. Complaints about flattened arrays

In a department JSON data, the attribute name is the department id, and the attribute value is a collection of id array of department members. Now we want to extract all the members of the department id into an array set.

Const deps = {'Purchasing Department': [1jue 2jue 3], 'personnel Department': [5meme 8jue 12], 'Administration Department': [5meme 14meme 79], 'Department of Transport': [3mem64105],} let member = []; for (let item in deps) {const value = deps [item]; if (Array.isArray (value)) {member = [. Member,...value]} member = [. New Set (member)]

Make a sarcastic comment

Do you want to traverse to get all the property values of the object? Did Object.values forget? And when it comes to flattening arrays, why not use the flat method provided by ES6? fortunately, this time the depth of the array is only 2-dimensional at most, and the array with 4-dimensional and 5-dimensional depth has to be flattened by loops and nesting loops.

Improve

Const deps = {'Purchasing Department': [1jue 2jue 3], 'personnel Department': [5meme 8meme12], 'Administration Department': [5meme14pence79], 'Department of Transport': [3pc64105],} let member = Object.values (deps) .flat (Infinity)

Infinity is used as the parameter of flat so that there is no need to know the dimensions of the flattened array.

Supplement

The flat method does not support IE browsers.

Complaints about getting the attribute value of an object

Const name = obj & & obj.name

Make a sarcastic comment

Will the optional chain operators in ES6 be used?

Improve

Const name = obj?.name

Complaints about adding object attributes

What to do if the property name changes dynamically when adding properties to an object.

Let obj = {}; let index = 1bot let key = `topic$ {index} `; obj [key] = 'topic content'

Make a sarcastic comment

Why create an extra variable. Do not know that object attribute names in ES6 can be used with expressions?

Improve

Let obj = {}; let index = 1bot OBJ [`topic$ {index} `] = 'topic content'

IX. Judgment on whether the input box is empty or not

When dealing with the business related to the input box, it is often used to judge the scenario in which the input box does not enter a value.

If (value! = = null & & value! = = undefined & & value! =') {/ /.}

Make a sarcastic comment

Do you know about the new null merge operator in ES6? do you have to write so many conditions?

If ((value??'')! = =') {/ /.}

Complaints about asynchronous functions

Asynchronous functions are common and are often implemented in Promise.

Const fn1 = () = > {return new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (1);}}, 300);});} const fn2 = () = > {return new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (2);}}, 600);});} const fn = () = > {fn1 (). Then (res1 = > {console.log (res1)) / / 1 fn2 () .then (res2 = > {console.log (res2)})}

Make a sarcastic comment

If you call asynchronous functions in this way, you are not afraid to form a hell callback!

Improve

Const fn = async () = > {const res1 = await fn1 (); const res2 = await fn2 (); console.log (res1); / / 1 console.log (res2); / / 2}

Supplement

However, when you want to make concurrent requests, you still use Promise.all ().

Const fn = () = > {Promise.all ([fn1 (), fn2 ()]) .then (res = > {console.log (res); / / [1m 2]})}

If a concurrent request occurs, as long as one of the asynchronous functions completes processing, the result is returned, using Promise.race ().

At this point, I believe you have a deeper understanding of "how to use ES6", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.