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

What are the JavaScript development tips in the front end of Web? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

JavaScript is becoming more and more popular for Web development or cross-platform development. In the past, it was only thought of as a front-end scripting language, but now it is also increasingly popular as a back-end scripting language. Even Facebook's React Native is based on JavaScript. Therefore, it will undoubtedly be useful to understand some of the techniques in JavaScript that not only won't stop us from writing extra lines of code, but will also make our code clear and efficient. Let's take a look at it with the editor.

1. The array index considers an array [10, 9, 8, 7, 6]. If we want to assign the value of this array to any variable, our positioning method will be const a = array [0]. If we want to assign multiple variables, it will be tedious to continue to do so. Code 1: old code practices

Var array1 = [10,9,8,7,6]

Var x = array1 [0]

Var y = array1 [1]

Var z = array1 [2]

[xss_clean] ("x =" + x + "

")

[xss_clean] ("y =" + y + "

")

[xss_clean] ("z =" + z + "

")

Output:

X = 10

Y = 9

Z = 8

Code 2: a smarter way

Var array2 = [10,9,8,7,6]

Var [x, y, z,... rest] = array2

[xss_clean] ("x =" + x + "

")

[xss_clean] ("y =" + y + "

")

[xss_clean] ("z =" + z + "

")

[xss_clean] ("rest =" + rest + "

")

Output:

X = 10

Y = 9

Z = 8

Rest = 7,6

Therefore, assigning multiple variables like this can save time and code. However, it should be noted that the rest is an array of collections of the rest, rather than being used separately for each project.

The idea of defining a function is to put some common or repetitive tasks together and create a function so that we can call the function without having to write the same code over and over again for different inputs. Everyone must have used similar functionality in JavaScript. Code 1: define the function in a regular form.

Usual function in JavaScript

Function myFunction (p1, p2) {

Return p1 * p2

}

Document.getElementById ("demo") [xss_clean]

= myFunction (4,3)

Output:

Usual function in JavaScript

twelve

Code 2: there is another way to treat a function as a variable, not a very useful technique, but it is still something new. Keep the function in the variable, which uses an arrow function like this.

Function treated as

Variable in _ JavaScript:

Var myFunction = (p1, p2) = > {

Return p1 * p2

}

Document.getElementById ("demo")

[xss_clean] = myFunction (4,3)

Output:

Function treated as variable in JavaScript

twelve

3. Define functions in one line

Now, this technique is really cool. If you know Python, you probably know the lambda function, which behaves the same as any function and is written on one line. Well, we don't use the lambda function in JavaScript, but we can still write one-line functions.

Suppose we want to calculate the product of two numbers an and b, which we can do in an one-line script. We don't have to write return statements specifically, because this definition already means that it will return output on its own.

Function treated as

Variable in JavaScript

Const productNum = (a, b) = > a * b

Document.getElementById ("demo")

[xss_clean] = myFunction (4,3)

Output:

Function treated as variable in JavaScript

twelve

4. Boolean value

Although each programming language has only two Boolean values True and False. JavaScript takes it a step further by introducing functionality that enables users to create bool.

Unlike True and False, they are often called "Truthy" and "Falsy", respectively. To avoid confusion, all values are Truthy by default, except 0LFOS, NaNPol null, "". This widespread use of Boolean helps us to check the situation effectively.

Const a =! 1

Const b =!! 0

Console.log (a)

Console.log (b)

Output:

False

True

5. Filter Boolean value

Sometimes we may want to filter out all Boolean values, such as saying "Falsy" Boolean from an array. This can be done by using a combination of map and filter functions. In this case, it uses the Boolean keyword to filter out the false value.

ArrayToFilter

.map (item = > {

/ / Item values

})

.filter (Boolean)

Input: [1,2,3,0, "Hi", False, True

] Output: [1,2,3, "Hi", True]

6. Create a completely empty object

If you are asked to create an empty object in JavaScript, our first go method will be used in curly braces and assigned to the variable. But this is not a blank object because it still has object properties of JavaScript, such as _ _ proto__ and other methods. Http://www.jzspfk.com/ of Ningbo Men's Hospital

There is a way to create an object without any object properties. To do this, we use a dictionary and define its _ _ proto__ as a null value.

/ * Using. Create () method to create

A completely empty object * /

Let dict = Object.create (null)

/ / dict.__proto__ = = "undefined"

Unless otherwise defined by the user, this object will have no default _ _ proto__ or other properties. 7. Truncated array

Let arrayToTruncate = [10,5,7,8,3,4,6,1,0]

/ * Specifying the length till where the

Array should be truncated * /

ArrayToTruncate.length = 6

Console.log (arrayToTruncate)

Output: as you can see, we must know the length of the array to be truncated in this way, or it will result in an error. The run time here is O (k), where k is the number of elements to be retained in the array.

[10 、 5 、 7 、 8 、 3 、 4]

8. Merge object scatter operator (…) Makes it easy for users to merge into one or more objects, which was previously achieved by creating a separate function.

Code 1:

Function mergeObjects (obj1, obj2) {

For (var key in obj2) {

If (obj2.hasOwnProperty (key)) obj1 [key] = obj2 [key]

}

Return obj1;}

Code 2: the above task can be easily accomplished by using the extension operator, and the code is clear.

Const obj1 = {}

/ / Items inside the object

Const obj2 = {}

/ / Items inside the object

Const obj3 = {... obj1,... obj2}

9. Conditional checking and traversing conditions are important components of each programming language. In JavaScript, we do this:

Code 1:

If (codition) {doSomething ();}

Code 2: however, the use of bitwise operators makes it easier to check conditions and makes the code only one line:

Condition & & doSomething ()

10. Replacing all characters with regular expressions often occurs one character or one substring at a time, but unfortunately the .replace () method replaces only one instance that appears. We can solve this problem by using regex with the. Replace () method.

Var string = "GeeksforGeeks"; / / Some string console.log (string.replace (/ eek/, "ool"))

Output:

"GoolsforGools"

This is the answer to the question about the JavaScript development tips in the front end of Web. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.