1. The single lineif elsestatements

Common if else statements

cosnt flag = true
if(flag){
    console.log(`${flag} is true`)}else{
    console.log(`${flag} is false`)}Copy the code

Using the ternary operator is much cleaner

cosnt flag = trueFlag?console.log (" True ") :consoleThe log (" False ")Copy the code

2. Merge arrays

Using extension operators (…) Extends the elements of an array into another array

    
    const list = [10.20.30.40];
    const newList = [...list, 50.60.70.80];
    consele.log(newList)    // Print [10, 20, 30, 40, 50, 60, 70, 80]

Copy the code

3. Delete duplicates from the array

    cosnt list = [1.1.2.3.4.4.5]
    const newList = [...new Set(list)]
    console.log(newList)    / / print [1, 2, 3, 4, 5]
Copy the code

Transformation of 4.booleanvalue

In addition to true and false, JavaScript treats other types as true or false.

  • 0, “”, null, undefined, NaN, and false are always false.
  • Everything else is true.

Use the unary operator (!) Invert.

    console.log(!undefined)    // true
    console.log(!null)         // true
    console.log(!NaN)          // true
    console.log(!' ')           // true
    console.log(!0)            // true
    console.log(!false)        // true
    console.log(!true)        // flase
    console.log(!'0')        // false
Copy the code

5. Exchange values of two variables without using a third variable

    let x = 1;
    let y = 2;
    [x, y] = [y, x];
    console.log(x, y);      / / 2, 1

Copy the code

6. NumberconversionString

const num = 1+ ";"console.log (typeofNum);// string
console.log (num);/ / 1

Copy the code

7. Convert strings to numbers


const numStr = "1";
const num = +numStr;
console.log(typeof num);     // number
console.log(num);            / / 1
Copy the code

8. Use template strings

Const age = 14; const info = 'I'm' + age + 'years old'; Console. log(info) // Prints I'm 14 years old const info = 'I'm ${age} years old'; console.log(info); // Print I'm 14 years oldCopy the code

9. Use extension operators (…) Split strings into arrays

Const STR = "string" is the console. The log (STR) / / print/' s', 't', 'r', 'I', 'n', 'g']Copy the code

Use 10.es2020Optional chain

Suppose you have a data object with the following code

const data = {
    info: {
        age: 11,
    }
}
Copy the code

We need to determine if info exists before we get age. Our code will report an error if info does not exist. Because you can’t read undefined. So we have some code:

// Const data = {info: {age: 1}} if (data && data.info) {console.log (data.info.age); // Const data = {info: {age: 1}} if (data && data.info) {console.log (data.info.age); Const value = data? .info?.age; console.log(value) // 11Copy the code

Tips: Since this is the latest ES proposal standard, many browsers do not currently support optional links. .). Operators. But we can configure it by installing Balel.

More than 11.ifJudgment of conditions

// The original code
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
 // do something
 }
 
 // Optimize the code
 if (['abc'.'def'.'ghi'.'jkl'].includes(x)) {
    // do something
 }
Copy the code

12. Declare multiple variables at the same time

// The original code
 let test1;
 let test2 = 1;
 
 // Optimize the code
 let test1, test2 = 1;
 
 // Declare and assign the original code
 let a = 1
 let b = 2
 
 // Optimize code to use destruct assignment
 let [a,b] = [1.2]
Copy the code

13. Null value merge operator


const foo = null ?? 'default string';
console.log(foo);     // Prints default String

const value = undefined ?? 'string'
console.log(value).   / / print string

const age = 0 ?? 12
console.log(age)    / / print 0

Copy the code

14.trueState callback function

// The original code
if (test1) {
   callMethod(); 
} 

// Optimize the code
test1 && callMethod();

Copy the code

15. Short function call statements

function test1() {
    console.log('test1');
};

 function test2() {
     console.log('test2');
 };
 
 var test3 = 1;
 
 if (test3 == 1) {
   test1();
 } else {
   test2();
 }
 
 // Optimize the code
 test3 === 1? test1():test2();
 or
 (test3 === 1? test1:test2)();
Copy the code