You said you can use ES6, then use it quickly!

How to quickly get started with VUE3.0: Get started with learning

"If you know how to use ES6, then use it!": This is the "roar" a leader made to the team members during a code review because he discovered many places during the code review. It’s better to use the ES5 writing method. It doesn’t mean that writing in ES5 won’t work and there will be bugs. It just causes an increase in the amount of code and poor readability.

It just so happened that this leader had a code fetish. He was extremely dissatisfied with members who had 3 to 5 years of experience writing code at this level and kept complaining about the code. However, I feel that I still gained a lot from his complaints, so I recorded the leader’s complaints and shared them with fellow diggers. If you think they are useful, give them a thumbs up. If there are errors or better ways of writing, you are very welcome to comment. Leave a message.

ps: JS syntax after ES5 is collectively called ES6! ! !

1. Tucao about value collection

Value is very common in programs, such as obtaining value from object obj .

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

Tucao :

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;

Tucao: "Can't you use ES6's destructuring assignment to get the value? Isn't it nice to use 5 lines of code in 1 line of code? Just use the object name plus the attribute name to get the value. If It’s okay if the object name is short, but if it’s very long, the object name will be everywhere in the code. "

Improvement :

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

The counterargument

is not that I don’t use ES6’s destructuring assignment, but that the attribute names in the data object returned by the server are not what I want. To get the value this way, I have to recreate a traversal assignment.

It

seems that your understanding of ES6's destructuring and assignment is not thorough enough. If the name of the variable you want to create is inconsistent with the property name of the object, you can write:

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

Supplementary

ES6 destructuring assignment is easy to use. But please note that the destructured object cannot be undefined or null . Otherwise, an error will be reported, so the destructured object must be given a default value.

const {a,b,c,d,e} = obj || {};

2. Complaints about merging data

, such as merging two arrays and merging two objects.

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

complained about

whether the extension operator of ES6 was forgotten, and did the merging of arrays not consider deduplication?

Improved

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

3. Tucao about splicing strings

const name = 'Xiao Ming';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}’s exam score is passing`; 
}else{
  result = `${name} failed the exam`; 
}

Complaining about

using ES6 string templates like you do, it is better not to use them. You have no idea what operations can be done in ${} . In ${} you can put any JavaScript expression, perform operations, and reference object properties.

Improved

const name = 'Xiao Ming';
const score = 59;
const result = `${name}${score > 60?''s test score passed':''s test score failed'}`;

4. Comments on the judgment conditions in if

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

Complaining about

whether the array instance method includes will be used in ES6?

Improved

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

5. Complaints about list search

In the project, the search function of some non-paginated lists is implemented by the front end. Search is generally divided into precise search and fuzzy search. Search is also called filtering, and is generally implemented using filter .

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

to complain

about exact search, won’t you use find in ES6? Do you understand performance optimization? If an item that meets the conditions is found in the find method, it will not continue to traverse the array.

Improved

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

6. Complaints about flattened arrays

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

const deps = {
'Purchasing Department':[1,2,3],
'Personnel Department':[5,8,12],
'Administrative Department':[5,14,79],
'Ministry of Transport':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

Is it necessary to traverse to obtain all attribute values ​​​​of an object

?

Object.values ​​forgotten? There is also the flattening process involving arrays. Why not use the flat method provided by ES6? Fortunately, the depth of the array this time is only up to 2 dimensions. If you encounter arrays with 4 or 5 dimensional depths, is it necessary? Loop nested loop to flatten?

Improve

const deps = {
    'Purchasing Department':[1,2,3],
    'Personnel Department':[5,8,12],
    'Administrative Department':[5,14,79],
    'Ministry of Transport':[3,64,105],
}
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.

Supplemented that

the flat method does not support IE browser.

7. Tucao about getting the object attribute value

const

name = obj && obj.name;

Will the optional chain operator in ES6 be used?

Improved

const name = obj?.name;

8. Comments on adding object attributes

When adding attributes to an object, what should be done if the attribute name changes dynamically.

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

Tucao

why we need to create an additional variable. I wonder if expressions can be used for object property names in ES6?

Improve

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

9. Judgment about whether the input box is not empty

When processing input box-related business, it is often judged that the input box has no input value.

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

Have you heard about the new null value merging operator in ES6? Do you need to write so many conditions

?

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

10. Complaints about asynchronous functions

Asynchronous functions are very common and are often implemented using 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)
      })
   })
}

you call

an asynchronous function like this, you won’t be afraid of a hellish callback!

Improve

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

Supplement

: When making concurrent requests, you still need to use Promise.all() .

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

If there are concurrent requests, as long as one of the asynchronous functions is completed, the result will be returned, and Promise.race() must be used.

11.

You are welcome to refute the above ten points of leader’s complaints. If your refutation is reasonable, I will refute it for you at the next code review meeting.

In addition, if there are any errors in the above organized content, please feel free to correct them in the comments. Thank you very much.

This article is reproduced from: https://juejin.cn/post/7016520448204603423

Author: Hongchen Lianxin

[Related video tutorial recommendation: web front-end]

The above is what you said you can use ES6, then use it quickly! For more details, please pay attention to other related articles on the php Chinese website!