JS daily development tips (continuous update)

Preface

        Some problems in daily development are summarized JS Tips , It simplifies the code , Make the code look more concise .

One 、 Array weight removal

        There are many methods of array de duplication , such as ：for loop 、 double for Cycle, etc , The idea is to generate a new array , Then go through the original array , Judge whether the new array has the value of the original array , If there is one, just skip , Add... If not , But it's a lot of code to write , It's not simple enough , And it's too much trouble , Here is a simple array de duplication method .

var arr = [0,1,2,3,4,5,6,7,8,9,0,1,5,7,84,,5,6,8,4,7,4]
//new Set( ) Generate a class array object with element uniqueness 
console.log(new Set(arr));//{ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 84, undefined }
//... The expand operator expands the class array object into the array 
console.log([...new Set(arr)]);//[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 84, undefined ]

Two 、 Array intersection

        Array intersection , It is also a common requirement , The general idea is to judge whether there is this value in the array , If not, skip , Take it out if you have one . The idea is right , But the code may be troublesome , Here is a simple method to get the intersection of arrays .

const arr1 = [1, 2, 3, 4]
const arr2 = [2, 3, 4, 5]
//filter The filter returns qualified values to generate a new array 
//includes Array methods , Determine whether there is this value in the array , If so, return to true Otherwise return to false
let arr3 = arr1.filter(item => arr2.includes(item))
console.log(arr3);//[2,3,4]

3、 ... and 、 Array Union

        Generally, it can also be solved through circulation , But it's too much trouble , Now I share a simple method of array union .

const arr1 = [1, 2, 3, 4]
const arr2 = [2, 3, 4, 5]
//filter The filter returns qualified values to generate a new array 
//includes Array methods , Determine whether there is this value in the array , If so, return to true Otherwise return to false
//concat Array methods , Used to merge arrays 
let arr3 = arr1.concat(arr2.filter(item => !arr1.includes(item)))
console.log(arr3);//[2,3,4]

Four 、 If there is one in the array, delete , Add if not

        How to write by yourself , It can be used directly , But the feeling is not the simplest , Optimization under later research . You can recommend some simple methods .

const arr1=[1,2,3,4]
const processing = (num)=>{
  if(arr1.includes(num)){
    arr1.splice(arr1.indexOf(num),1)
  }else{
    arr1.push(num)
  }
  console.log(arr1);
}
processing(3)

5、 ... and 、 use ?? Instead of || More rigorous

        ?? Also known as null Judgment operator , Only when the left is undefined or null when , Just take the value on the right , Otherwise, take the value on the left . And || The difference is || Words ,|| On the left for 0 and false when , Will take the value on the right .

const num = 0 || 1
console.log(num);//1
const num1 = 0 ?? 1
console.log(num1);//0

6、 ... and 、 use ?. replace && And the trinary operator

        ?. It is called a chained operator , Only when the left is null or undefined When , Will take the value on the right .

   ?. Judge directly in the chain call , Judge whether the object on the left is null or undefined, If yes, , It's not going to go down , return undefined, If not , Returns the value on the right

const obj={
  name:' Brave Xiao Chen '
}
console.log(obj&&obj.name);// Brave Xiao Chen 
console.log(obj?obj:obj.name);//{ name: ' Brave Xiao Chen ' }
console.log(obj?.obj.name);

7、 ... and 、 simplify if Judge

        complex if Judgment doesn't just look disgusting , It's even more disgusting for people who are obsessed with code cleanliness , I don't want to write so much if ah , But there's no way , In fact, there are ways , I would like to recommend simplification if The way to judge . Through the optimized method , Can be more concise and easy to understand , And it is easier to maintain later .

// Code common if Judge 
let title=''
if(num===1){
  title=' Completed '
}
if(num===2){
  title=' Hang in the air '
}
if(num===3){
  title=' Have in hand '
}

// Optimized code 
let obj={
  1:' Completed ',
  2:' Hang in the air ',
  3:' Have in hand '
}
const handle=(num)=>{
  return obj[num]
}
console.log(handle(1));

8、 ... and 、 Simplified by Sanmu if...else...

        For some if...else The judgment of the , We can further simplify it through Miki

// Before simplification 
let title=''
let identification=false
if(identification){
  title=' Completed '
}else{
  title=' Hang in the air '
}
// Simplify through the trinocular operator 
title=identification?' Completed ':' Hang in the air '

2022.06.30