Shulou(Shulou.com)06/03 Report--

JavaScript optimization conditional expression related to the idea of reconstruction, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

JavaScript is an easy-to-learn programming language, and it's easy to write programs that run and perform certain operations. However, it is difficult to write a clean piece of JavaScript code.

Decomposition conditional expression

We can decompose long conditional expressions into named short conditional expressions, which is good for reading. For example, we might write code like this:

Let ieIEMac = navigator.userAgent.toLowerCase () .includes ("mac") & & navigator.userAgent.toLowerCase () .includes ("ie")

The above code is too verbose to be easy to read, so we can break it down into several short, named conditional expressions, as follows:

Let userAgent = navigator.userAgent.toLowerCase (); let isMac = userAgent.includes ("mac"); let isIE = userAgent.toLowerCase () .includes ("ie"); let isMacIE = isMac & & isIE

Merge conditional expression

On the contrary, if you have multiple short conditional expressions, you can merge them into one. For example, we might write code like this:

Const x = 5; const bigEnough = x > 5; const smallEnough = x

< 6; const inRange = bigEnough && smallEnough; 我们可以这样合并： const x = 5; const inRange = x >

5 & & x

< 6; 因为表达式很短，即使把它们组合在一起也不会使表达式变长，所以我们可以这样做。 合并重复的条件片段 如果我们在条件块中有重复的表达式或语句，则可以将它们移出。例如我们可能会写这样的代码： if (price >

100) {/ /. Complete ();} else {/ /... Complete ();}

We can move the repetition outside the conditional expression, as follows:

If (price > 100) {/ /...} else {/ /...} complete ()

In this way, we don't have to repeat unnecessary calls to the complete function.

Delete control flag

If we used control flags in the loop, the code would look like this:

Let done = false; while (! done) {if (condition) {done = true;} / /.}

In the above code, done is the control flag, and when condition is true, set done to true to stop the while loop.

Relative to the above, we can use break to stop the loop, as shown below:

Let done = false; while (! done) {if (condition) {break;} / /.}

Replace the nesting condition with guard sentence

Wei sentence is to split a complex conditional expression into multiple conditional expressions, such as a very complex expression, nested several layers of if-then-else statements, converted into multiple if statements to achieve its logic, these multiple if statements are defender sentences.

Nested conditional statements are difficult to read, so we can use "guard statements" instead of them. For example, we might write code like this:

Const fn = () = > {if (foo) {if (bar) {if (baz) {/ /...}

We can optimize it like this:

If (! foo) {return;} if (! bar) {return;} if (baz) {/ /...}

In the above code, the guard statement is:

If (! foo) {return;}

And

If (! bar) {return;}

If these conditions are false, they return the function ahead of time so that we don't need to be nested.

Replace conditions with polymorphisms

Instead of using the switch statement to perform the same operation on different types of data, and then using different methods for the type of object, we can use the switch statement to create the same subclass for different kinds of data.

For example, we might write code like this:

Class Animal {constructor (type) {this.type = type;} getBaseSpeed () {return 100 } getSpeed () {switch (this.type) {case ('cat'): {return getBaseSpeed () * 1.5} case (' dog'): {return getBaseSpeed () * 2} default: {return getBaseSpeed ()}

We can ReFactor it like this:

Class Animal {constructor (type) {this.type = type;} getBaseSpeed () {return 100;}} class Cat extends Animal {getSpeed () {return super.getBaseSpeed () * 1.5;}} class Dog extends Animal {getSpeed () {return super.getBaseSpeed () * 2;}}

When switch statements are long, you should customize case blocks for different types of objects.

Adopt empty object

If we double-check null or undefined, we can define a subclass that represents the null or undefined version of the class, and then use it.

For example, we might write code like this:

Class Person {/ /...}

We can ReFactor it like this:

Class Person {/ /...} class NullPerson extends Person {/ /...}

Then, we set Person to the object property of null or undefined instead of setting it to the NullPerson instance.

This eliminates the need to use conditions to check these values.

After reading the above, have you mastered the method of refactoring related to optimizing conditional expressions in JavaScript? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.