1. The single lineif else
statements
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.boolean
value
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. Number
conversionString
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.es2020
Optional 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.if
Judgment 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.true
State 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