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 codeFun:
const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;
Copy the codeor
const f = obj.a + obj.d;
const g = obj.c + obj.e;
Copy the codeTeasing: “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 codecounter
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 codesupplement
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 codeSecond, 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 codeteasing
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 codeThree, about the concatenation string ridicule
Const name = 'xiaoming '; const score = 59; const result = ''; If (score > 60){result = 'name'; }else{result = 'name'; }Copy the codeteasing
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 code4. Teasing about the judgment condition in IF
if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
//...
}
Copy the codeteasing
Does ES6 include the array instance method?
To improve the
Const condition = [1, 2, 3, 4]; if( condition.includes(type) ){ //... }Copy the codeFive, 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 codeteasing
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 codeSix, 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 codeteasing
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 codeWhere 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 codeteasing
Will the optional chain operator be used in ES6?
To improve the
const name = obj? .name;Copy the codeTeasing 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 codeteasing
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 codeNine, 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 codeteasing
Are you familiar with the new null value merge operator in ES6, and write that many conditions?
if(value?? ' '! = = ' ') {/ /... }Copy the code10. 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 codeteasing
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 codesupplement
But for concurrent requests, promise.all () is still used.
const fn = () =>{ Promise.all([fn1(),fn2()]).then(res =>{ console.log(res); / / [1, 2]})}Copy the codeUse 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.