Home > Article > Web Front-end > 12 common techniques for reducing the amount of code in JavaScript
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.
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
let x; let y; let z = 3;After optimization:
let x, y, z=3;
5. Simplification of assignment statements
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
##
var re = new RegExp("\d+(.)+\d+","igm"), result = re.exrc("padding 01234 text text 56789 padding"); console.log(result);//"01234 text text 56789"
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)
if (likeJavaScript)
let c; if ( c!= true ) { // do something... }
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 );
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 );
10. Alternatives to charAt()
Before simplification:
"myString".charAt(0);
"myString"[0];//返回'm'
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)();
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 12 common techniques for reducing the amount of code in JavaScript. For more information, please follow other related articles on the PHP Chinese website!