This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

The reason is that ES5 writing method is still used in many parts of the code review. It does not mean that ES5 writing method is not good, and there will be bugs, but the code quantity will increase and the readability will become worse.

As it happens, the leader has a code cleanliness obsession. In the face of members with 3-5 years of experience, he still writes this level of code. He is extremely dissatisfied and constantly makes fun of the code. However, FOR his ridicule, I feel that I still have a lot of harvest, so I will record the leader’s ridicule and share it with digg friends. If you think there is harvest, give a thumbs up, if there is wrong or better writing method, very welcome to leave a message in the comments.

Ps: ES5 after the JS syntax collectively ES6!!

First, about the value of ridicule

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

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

Fun:

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;
Copy the code

or

const f = obj.a + obj.d;
const g = obj.c + obj.e;
Copy the code

Teasing: “Won’t you use ES6 deconstruction assignment? Wouldn’t it be nice to have five lines of code and one line of code? I’m just going to use the name of the object plus the name of the property, but what if the name of the object is short, it’s long? It’s all over the code.”

Improvement:

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

counter

It’s not that I don’t use ES6’s deconstructive assignment, but that I don’t want the property name in the data object returned by the server, so I don’t have to recreate the traversal assignment.

teasing

It seems that your understanding of ES6’s deconstruction assignment is still not thorough enough. If the variable name you want to create is not the same as the attribute name of the object, you can write:

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

supplement

ES6’s deconstruction assignment is useful though. Note that the object to be deconstructed cannot be undefined or NULL. Otherwise an error will be reported, so give the deconstructed object a default value.

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

Second, the ridicule about merging data

Like merging two arrays, merging two objects.

Const a = [1, 2, 3]; Const b = [6] 1; const c = a.concat(b); //[1,2,3,1,5,6] const obj1 = {a:1,} const obj1 = {b:1,} const obj = object.assgin ({}, obj1, obj2); //{a:1,b:1}Copy the code

teasing

ES6 extension operators forget, and array merge does not take into account deduplication?

To improve the

Const a = [1, 2, 3]; Const b = [6] 1; const c = [...new Set([...a,...b])]; / /,2,3,5,6 [1] const obj1 = {a: 1,} const obj2 = {b: 1,} const obj = {... obj1,... obj2}; //{a:1,b:1}Copy the code

Three, about the concatenation string ridicule

Const name = 'xiaoming '; const score = 59; const result = ''; If (score > 60){result = 'name'; }else{result = 'name'; }Copy the code

teasing

Instead of using the ES6 string template as you do, you have no idea what you can do with ${}. You can put any JavaScript expression in ${}, perform operations, and reference object properties.

To improve the

Const name = 'xiaoming '; const score = 59; const result = `${name}${score > 60? 'pass ':' fail '}';Copy the code

4. Teasing about the judgment condition in IF

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}
Copy the code

teasing

Does ES6 include the array instance method?

To improve the

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

Five, about the ridicule of list search

In the project, the search function of some unpaginated lists is realized by the front end, and the search is generally divided into precise search and fuzzy search. Search should also be called filtering, generally with filter to achieve.

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

teasing

Wouldn’t you use FIND in ES6 if you were searching precisely? Performance optimization. If we find an item that matches the criteria, we don’t iterate through the array.

To improve the

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

Six, about the flat array ridicule

In a department JSON data, the attribute name is the department ID, and the attribute value is an array of department member ids. Now we want to extract all the member ids that have departments into an array collection.

Const deps = {' purchasing department: [1, 2, 3], 'personnel: Sherwin [5],' administration ':,14,79 [5],' the department of transportation:,64,105 [3],} let member = []; for (let item in deps){ const value = deps[item]; if(Array.isArray(value)){ member = [...member,...value] } } member = [...new Set(member)]Copy the code

teasing

Do I need to iterate to get all the property values of the object? Have you forgotten object.values? The depth of the array is only 2 dimensions, and the depth of the array is 4 or 5 dimensions. Is it necessary to loop the nested loop to flatten the array?

To improve the

Const deps = {' purchasing department: [1, 2, 3], 'personnel: Sherwin [5],' administration ':,14,79 [5],' the department of transportation:,64,105 [3]. } let member = Object.values(deps).flat(Infinity);Copy the code

Where Infinity is used as the parameter of flat, making it unnecessary to know the dimensions of the flattened array.

supplement

The Flat method does not support Internet Explorer.

7. Teasing about obtaining object attribute values

const name = obj && obj.name;
Copy the code

teasing

Will the optional chain operator be used in ES6?

To improve the

const name = obj? .name;Copy the code

Teasing about adding object attributes

What to do if the property name changes dynamically when adding attributes to an object?

let obj = {}; let index = 1; let key = `topic${index}`; Obj [key] = 'key ';Copy the code

teasing

Why create an extra variable. Do not know ES6 object attribute names can use expressions?

To improve the

let obj = {}; let index = 1; Obj [' topic${index} '] = ";Copy the code

Nine, on the input box is not empty judgment

When processing services related to input boxes, the scenario in which no value is entered in the input box is often judged.

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

teasing

Are you familiar with the new null value merge operator in ES6, and write that many conditions?

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

10. Teasing about asynchronous functions

Asynchronous functions are common, often implemented with promises.

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) }) }) }Copy the code

teasing

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

To improve the

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

supplement

But for concurrent requests, promise.all () is still used.

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

Use promise.race () if a concurrent request returns a result as soon as one of the asynchronous functions completes processing.

Xi. Follow-up

Welcome to refute the ridicule of the leader in the above ten points. If your refutation is reasonable, I will refute it for you in the next code review meeting.

In addition, the above sorting out the content of the wrong place, welcome to correct in the comments, thank you very much.

If there’s anything else you’d like to make fun of, feel free to leave it in the comments.

Read help, might as well pay attention to it, click a like to support it.