Home > Web Front-end > JS Tutorial > Skills you need to master in JavaScript

Skills you need to master in JavaScript

零下一度
Release: 2017-07-19 17:42:27
Original
1064 people have browsed it

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template