An explanation of common techniques for simplifying javascript code-JS Tutorial-php.cn

An explanation of common techniques for simplifying javascript code

巴扎黑

Release： 2017-08-12 16:22:56

Original

1354 people have browsed it

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 !== &#39;&#39;){
 let variable2 = variable1;
}

Copy after login

We can use a more concise version

let variable2 = variable1 || &#39;&#39;;

Copy after login

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 || &#39;&#39;;
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || &#39;&#39;;
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || &#39;&#39;;
console.log(variable2);
//输出: 'hi there'

Copy after login

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";

Copy after login

Optimized code:

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

Copy after login

3. Optimization of if true .. else

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

Copy after login

After simplification:

let big = x > 10 ? true : false;

Copy after login

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}"

Copy after login

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;

Copy after login

After optimization:

let x, y, z=3;

Copy after login

5. Simplification of assignment statements

Before simplification:

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

Copy after login

After simplification:

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

Copy after login

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

Copy after login

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"

Copy after login

After simplification:

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

Copy after login

7. If condition optimization
Before simplification:

if (likeJavaScript === true)

Copy after login

After simplification:

if (likeJavaScript)

Copy after login

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

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

Copy after login

After simplification:

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

Copy after login

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 );

Copy after login

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 );

Copy after login

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);

Copy after login

Simplified:

"myString"[0];//返回&#39;m&#39;

Copy after login

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(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

Copy after login

Simplified:

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

Copy after login

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++) {

Copy after login

After simplification:

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

Copy after login

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!