es5 to es6 code

1. Tucao about the value

Taking values ​​is very common in programs, such as objtaking values ​​from objects.

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 destructuring assignment to get the value? Isn't it good to use 5 lines of code to get it done with 1 line of code? Just use the object name plus attribute name to get the value. It's okay if the object name is short, but it's long? This object name is everywhere in the code."

Improvement :

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;
复制代码

refute

It’s not that ES6’s destructuring assignment is not used, but the attribute name in the data object returned by the server is not what I want. If I want to get the value like this, I have to create a new traversal assignment.

Make complaints

It seems that you still don't have a thorough grasp of ES6's destructuring assignment. If the variable name you want to create is inconsistent with the property name of the object, you can write this:

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

Replenish

ES6's destructuring assignment is easy to use. But it should be noted that the destructured object cannot be undefined, null. Otherwise, an error will be reported, so a default value should be given to the destructured object.

const {a,b,c,d,e} = obj || {};
复制代码

2. Tucao about merging data

For example, merge two arrays and merge 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}
复制代码

Make complaints

Has the spread operator of ES6 been forgotten, and the merging of arrays does not consider deduplication?

Improve

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 = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}
复制代码

Make complaints

It's better not to use ES6 string templates like you, because you don't know ${}what operations you can do in it. ${}Arbitrary JavaScript expressions can be placed in it, operations can be performed, and object properties can be referenced .

Improve

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;
复制代码

4. Tucao about the judgment condition in if

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}
复制代码

Make complaints

includesWill array instance methods be used in ES6 ?

Improve

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

if( condition.includes(type) ){
   //...
}
复制代码

5. Tucao about list search

In the project, the search function of some non-paged lists is implemented by the front end, and the search is generally divided into precise search and fuzzy search. Search is also called filtering, which is generally filterused to implement.

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

Make complaints

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

Improve

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

6. Tucao about flattened arrays

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

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[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)]

Make complaints

Do you still need to traverse to get all the attribute values ​​of the object? Object.valuesForgot? It also involves the flattening of arrays. Why not use flatthe method provided by ES6? Fortunately, the depth of the array this time is only up to 2 dimensions. If you encounter arrays with 4-dimensional or 5-dimensional depths, do you have to loop? Nested loops to flatten?

Improve

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
let members = [...new Set(member)]

where using Infinityas flatparameter makes it unnecessary to know the dimensions of the array being flattened.

Replenish

flatMethod does not support IE browser.

7. Tucao about getting object attribute values

const name = obj && obj.name;
复制代码

Make complaints

Will the optional chaining operator in ES6 be used?

Improve

const name = obj?.name;
复制代码

8. Tucao about adding object properties

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

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';
复制代码

Make complaints

Why create an extra variable. Don’t know that object property names in ES6 can use expressions?

Improve

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';
复制代码

9. Judgment on whether the input box is not empty

When dealing with business related to the input box, it is often judged that the input box does not enter a value.

if(value !== null && value !== undefined && value !== ''){
    //...
}
复制代码

Make complaints

Have you understood the new null value coalescing operator in ES6, do you have to write so many conditions?

if((value??'') !== ''){
  //...
}
复制代码

10. Tucao about asynchronous functions

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

Make complaints

If you call an asynchronous function like this, you are not afraid of forming a hell callback!

Improve

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

Replenish

But it still needs to be used when making concurrent requests 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 processed, the result will be returned and used Promise.race().