Have you ever used this with ES6?

I'm currently working on a refactoring project. Looking at the old code, my scalp is numb and I can't stop complaining. I have recorded many summary techniques and share them with everyone. If you find them useful, please give them a thumbs up. If there are any mistakes or better ways of writing, you are very welcome to leave messages in the comments.

1.About value

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

If the name of the variable you want to create is inconsistent with the property name of the object, you can write like this:

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

ES6’s destructuring assignment is easy to use. However, it should be noted 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. About merging data

For example, merge two arrays and merge two objects.

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. About splicing strings

In ${}, you can put any JavaScript expression, perform operations, and reference object properties.

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

4. Regarding the judgment conditions in if

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

// 新代码
const condition = [1,2,3,4];

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

5. 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 filters.

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

But a better method, find, can find items that meet the conditions without continuing to traverse the array.

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

6. About array dimensionality reduction (flattening)

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[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. But the flat method does not support IE browser.

7. About getting object properties

Optional chaining operator in ES6

const name = obj?.name;

8. About adding object properties

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

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

9. Regarding whether the input box is not empty

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

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

//重构代码
if((value??'') !== ''){
  //...
}

10. About asynchronous functions

async await

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

But 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 processed, the result will be returned, and Promise.race() must be used.

In addition, if there are any errors in the above organized content, please feel free to share them in the comment area.

If the article is helpful to you, ❤️Follow + Like❤️encourage it ! The blogger will continue to update. . . .

My blog original text: Have you ever used ES6 like this?

Have you ever used this with ES6?

Guess you like