Skills you need to master in JavaScript

If you are new to JavaScript or have only recently encountered it in your development work, you may be feeling frustrated. All languages ​​have their quirks - but developers moving from a server-side language based on strong typing can be confused. I was like that, a few years ago, when I was thrust into becoming a full-time JavaScript developer, and there were a lot of things I wish I'd known at the beginning. In this article, I'm going to share some of my quirks and hopefully I can share with you some of the experiences that have given me a lot of headaches. This isn't a complete list - just a partial list - but hopefully it opens your eyes to the power of this language, and things you may have once considered a hindrance.

1. Null (null, undefined) verification

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

If you write it directly, it would look 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, try it in the console of the Google Chrome developer panel !

//Example of null value

let variable1 =

null;

let variable2 = variable1 ||

'';

console.log(variable2);

//Output: ''

//Example of undefined value

let variable1 =

undefined;

let variable2 = variable1 ||

'';

console.log( variable2);

//Output: ''

//Normal situation

let variable1 =

'hi there';

let variable2 = variable1 ||

'';

console.log(variable2);

//Output: 'hi there'

2. Array

This seems to be relatively simple!

Non-optimized code:

let a =

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

##Optimization code:

let a = [

"myString1",

"myString2", "myString3"];

3. Optimization of if true .. else

let big;After simplification:

if (x >

10) {

big = true;

}

else {

big = false;

}

##let big = x > 10 ?

true :

false;

Greatly simplifies the amount of code!

Although JavaScript will automatically hoist variables, using this method allows all variables to be placed in a single line at the head of the function.

##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

Before optimization:

##let x;

let y;

let z =

3;

##After optimization ：

##let x, y, z=

3;

##5. Simplification of assignment statement

Before simplification:

x=x+

1;

minusCount = minusCount - 1;##x++;

y=y*

10;

Simplified:

minusCount -- ;

y*=

10;

##Assumption

x=10, y=5

, then basic arithmetic operations can use the following abbreviation:

x += y

// x=15x -= 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"),

var result = /d+(.)+d+/igm.exec(

result = re.exec("padding 01234 text text 56789 padding");console.log(result) ; //"01234 text text 56789"

##After simplification:

"padding 01234 text text 56789 padding");

console.log(result); //"01234 text text 56789"

7. If condition optimizationAlthough it is very simple, it is still worth mentioning. Before simplification:

##if (likeJavaScript ===

true)

if (likeJavaScript)

Simplified:

Let’s give 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

I personally 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() {

/* Comment part

console.log( arguments.length ); // Return 5

for ( i = 0; i < arguments. length; i++ ) {

console.log( typeof arguments[i] ); // Return string, number, object, object, boolean

}

*/

}

myFunction(

"String", 1, [], {}, true );

Translator’s Note: There are comments 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 when using the first method. , you should be careful with the second one.

10. Alternatives to charAt()

Before simplification:

"myString".charAt( 0);

After simplification:

"myString"[0]; // Return '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 You said 四不四 is short?

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 ignored it.

1e7

means 10000000.

Before simplification:

##for (let i = 0; i <

10000 ; i++) {

#After simplified:

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

The above is the detailed content of Skills you need to master in JavaScript. For more information, please follow other related articles on the PHP Chinese website!