An explanation of common techniques for simplifying javascript code

This article mainly shares with you 12 commonly used techniques for javascript abbreviation. Through these 12 techniques, you can greatly reduce the amount of your js code. Understanding one is a beginner, and knowing everything is a master. How many can you know? Woolen cloth? Friends who need it, please follow the editor to learn together.

Preface

This article mainly shares with you 12 commonly used techniques for javascript abbreviation. Whether you are a beginner or a veteran, it is worth it Give it a read! Not much to say below, let’s take a look at the detailed introduction:

1. Empty (null, undefined) verification

When we create a new variable, we usually verify whether the value of the variable is null or undefined. This is a verification that often needs to be considered for JavaScript programming.

If you write it directly, like this:

if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
 let variable2 = variable1;
}

We can use a more concise version

let variable2 = variable1 || '';

If you don’t believe it, you can try it in the console in Google Chrome developer mode!

//值为null的例子
let variable1 = null;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || '';
console.log(variable2);
//输出: 'hi there'

What should be noted here is that after debugging a set of codes, you need to refresh the page or define different variables, otherwise an error will be reported:

2. Array

This seems to be relatively simple!

Non-optimized code:

let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";

Optimized code:

let a = ["myString1", "myString2", "myString3"];

3. Optimization of if true .. else

##

let big;
if (x > 10) {
big = true;
}
else {
big = false;
}

After simplification:

let big = x > 10 ? true : false;

This is ternary arithmetic, which can be used when there is only one judgment condition and result.

Greatly simplifies the amount of code!

let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"

4. Variable declaration

Although JavaScript will automatically raise the variable ( hoist), using this method, all variables can be placed in one line at the head of the function.

Optimization money:

let x;
let y;
let z = 3;

After optimization:

let x, y, z=3;

5. Simplification of assignment statements

Before simplification:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

After simplification:

x++;
minusCount --;
y*=10;

Assume x=10, y=5, then the basic arithmetic operations can use the following abbreviation:

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0

6. Avoid using RegExp objects

Before simplification:

##

var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"

After simplification:

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

7. If condition optimization
Before simplification:

if (likeJavaScript === true)

After simplification:

if (likeJavaScript)

Let’s take another example of judging what is not true:

let c;
if ( c!= true ) {
// do something...
}

After simplification:

let c;
if ( !c ) {
// do something...
}

9. Function parameter optimization
My personal I tend to use the method of obtaining object elements to access function parameters. Of course, this is a matter of opinion!

Usually used version:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );

My favorite version:

function myFunction() {
/* 注释部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );

Translator's Note: There is a comment below the original article stating that it is not recommended to use the original poster's method. The order of function parameters can be changed using the first method, but you should be careful with the second method.

10. Alternatives to charAt()
Before simplification:

"myString".charAt(0);

Simplified:

"myString"[0];//返回'm'

Translator’s Note: I believe there are not many people using the first method!

11. Function calls can be shorter##Before simplification:

function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

Simplified:

function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();

12. How to express large numbers elegantly

In JavaScript, there is a way to abbreviate numbers, maybe you have overlooked it. 1e7 means 10000000.

Before simplification:

for (let i = 0; i < 10000; i++) {

After simplification:

##

for (let i = 0; i < 1e7; i++) {

The above is the detailed content of An explanation of common techniques for simplifying javascript code. For more information, please follow other related articles on the PHP Chinese website!