May 30, 2021 Article blog
1. 1, NUll, Undefined, '' check
2. 2, null value check and give the default value
3. 3, undefined value check and give the default value
4. 4, empty value merge operator (?? )
6. 6, if multi-condition judgment
7. 7、if... A shorthand for else
9. 9, arithmetic operation shorthand optimization
10.. 10, effective value judgment
11.. 11, multi-condition judgment
12.. 12, more than one comparison return
13.. 13, an abbreviation for Switch
14.. 14, for loop abbreviation
17.. 17, number combination and clone
20.. 20, an array to find a specific value
21.. if(arr.indexOf(item) > -1) // 优化if(~arr.indexOf(item))// 或if(arr.includes(item))
This article organizes 30 common JavaScript code optimization scenarios in everyday development.
When we create a new variable to give an existing variable value, we don't want to give
null
or
undefined
we can use a simple assignment.
if(test !== null || test !== undefined || test !== ''){
let a1 = test;
}
// 优化后
let a1 = test || ''
let test = null;
let a1 = test || '';
let test = undefined;
let a1 = test || '';
Empty value merge operator (?)
Is a logical operator that returns the number of operations to its right when the number of operations on the left is
null
or
undefined
otherwise the number of operations on the left is returned.
const test= null ?? 'default string';
console.log(test);
console.log(test); // expected output: "default string"
const test = 0 ?? 42;
console.log(test); // expected output: 0
When we want to declare variables of multiple common types or values, we can do so in shorthand.
let test1;
let test2 = 0;
// 优化后
let test1, test2 = 0;
When we make multiple conditional judgments, we can implement shorthand in the form of array
includes
if(test === '1' || test === '2' || test === '3' || test === '4'){
// 逻辑
}
// 优化后
if(['1','2','3','4'].includes(test)){
// 逻辑处理
}
When there are one or two layers
if...else
When else is nested, we can use the ternary operator to shorthand.
let test = null;
if(a > 10) {
test = true;
} else {
test = false;
}
// 优化后
let test = a > 10 ? true : false;
// 或者
let test = a > 10;
When we want to assign different values to multiple variables, we can use a concise shorthand scheme.
let a = 1;
let b = 2;
let c = 3;
// 优化
let [a, b, c] = [1, 2, 3];
When we often use abacus operators in our development, we can optimize and shorthand them in one way or another.
let a = 1;
a = a + 1;
a = a - 1;
a = a * 2;
// 优化
a++;
a--;
a *= 2;
We often use it in development, and it's easy to sort it out.
if (test1 === true)
if (test1 !== "")
if (test1 !== null)
// 优化
if (test1)
We usually encounter conditional judgments in our project followed by function execution, and we can use shorthand.
if (test) {
foo();
}
//优化
test && foo();
Using comparisons in
return
statements, you can abbreviated them as follows.
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return foo('test');
}
}
// 优化
function checkReturn() {
return test || foo('test');
}
When we encounter
switch
statement in the form of a key value pair, we can store its conditions and expressions as key-value pairs.
switch (type) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// ......
}
// 优化
var obj = {
1: test1,
2: test2,
3: test
};
obj[type] && obj[type]();
for (let i = 0; i < arr.length; i++)
// 优化
for (let i in arr) or for (let i of arr)
function add() {
return a + b;
}
// 优化
const add = (a, b) => a + b;
const data1 = [1, 2, 3];
const data2 = [4 ,5 , 6].concat(data1);
// 优化
const data2 = [4 ,5 , 6, ...data1];
const data1 = [1, 2, 3];
const data2 = [4 ,5 , 6].concat(data1);
// 优化
const data2 = [4 ,5 , 6, ...data1];
Array clones:
const data1 = [1, 2, 3];
const data2 = test1.slice()
// 优化
const data1 = [1, 2, 3];
const data2 = [...data1];
const test = 'hello ' + text1 + '.'
// 优化
const test = `hello ${text}.`
const a1 = this.data.a1;
const a2 = this.data.a2;
const a3 = this.data.a3;
// 优化
const { a1, a2, a3 } = this.data;
Arrays look for specific values by index, and we can use the logical bit operator
~
of judgment.
“~”
operator (bit non) is used to reverse a binary operand bit by bit
if(arr.indexOf(item) > -1)
// 优化
if(~arr.indexOf(item))
// 或
if(arr.includes(item))
const data = { a1: 'abc', a2: 'cde', a3: 'efg' };
Object.entries(data);
/** 输出:
[ [ 'a1', 'abc' ],
[ 'a2', 'cde' ],
[ 'a3', 'efg' ]
]
**/
We can convert the contents of an object into an array through
Object.values()
as follows:
const data = { a1: 'abc', a2: 'cde' };
Object.values(data);
/** 输出:
[ 'abc', 'cde']
**/
Math.pow(2,3);
// 优化
2**3;
for (var i = 0; i < 10000; i++)
// 优化
for (var i = 0; i < 1e4; i++) {
let key1 = '1';
let key2 = 'b';
let obj = {key1: key1, key2: key2};
// 简写
let obj = {
key1,
key2
};
let a1 = parseInt('100');
let a2 = parseFloat('10.1');
// 简写
let a1 = +'100';
let a2 = +'10.1';
Recommended micro-lessons: JavaScript micro-lessons, JavaScript basic hands-on, JavaScript object-oriented programming