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

This article will explain in detail what the five JavaScript skills you should know are, and the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

JavaScript is one of the most popular programming languages at present. Like any other programming language, it has a lot of tricks that people can learn right away.

Each technique can do what most developers need to do every day. Based on experience, readers may already know some of them, but they will still be surprised by other techniques.

1. Object deconstruction

Once developers have learned about object deconstruction, they may use it every day.

But what is deconstruction?

Deconstructing is an JavaScript expression that allows data from arrays, objects, maps, and collections to be extracted into its own variables. It allows you to extract attributes from one or more objects at a time.

Let's take a look at the following example, which has a user object. If you want to store the user name (name) in a variable, you must assign it to the variable on the new line. If you want to store gender in a variable, you must repeat this.

Const user = {name: 'Frank', age: 23, gender:' masked, member: false} const name = user.name const gender = user.gender

Using deconstruction, you can get the variables of object properties directly through the following syntax:

Const {name, age, gender, member} = user;console.log (name) / / Frank console.log (age) / / 23 console.log (gender) / / M console.log (member) / / false

two。 Use device performance for better debugging

As a developer, the most important thing to do is debugging. But debugging is more than just using console.log to print out a bunch of log information on the console.

Did you know that console objects have a good way to analyze code snippet performance? Most developers only know how to debug code using standard console.log methods.

The console object has many useful functions. It has a time and timeEnd functions to help analyze performance. Its working principle is very simple.

Call the console.time function before the code being tested. This function takes an argument that accepts a string that describes what is being parsed. At the end of the code under test, the console.timeEnd function is called. Give this function the same string as the first argument. The time it takes to run the code is then displayed in the console.

Console.time ('loop') for (let I = 0; I

< 10000; i++) { // Do stuff here } console.timeEnd('loop') 3. Every和 some函数 Every和some函数并不是为所有开发人员熟知。然而，它们在某些情况下非常有用。先来讲讲every函数。如果想要知道数组中的所有元素是否都通过了某个测试，那就可以应用此函数。本质上，这是在遍历数组中的每个元素，并且检查它们是否属性都为真。 这听起来可能有些抽象，所以请看以下示例。并没有那么复杂。 const random_numbers = [ 13, 2, 37,18, 5 ] const more_random_numbers = [ 0, -1, 30, 22 ]const isPositive = (number) =>

{return number > 0} random_numbers.every (isPositive); / / returns true more_random_numbers.every (isPositive); / / returns false

The Every function returns a Boolean value. Returns "true" if all elements in the array pass the test. Returns "false" if an element in the array fails the test.

You can also use an anonymous function as a test function:

Random_numbers.every ((number) = > {return number > 0})

The some function works almost exactly the same as the every function. There is only one major difference between the two functions: the some function tests whether at least one element in the array passes the test.

Looking back at the above example, if you use the some function instead of the every function, both arrays will return "true" because both arrays contain a positive number.

Const random_numbers = [13,2,377,18,5] const more_random_numbers = [0,-1,30,22] const isPositive = (number) = > {return number > 0} random_numbers.some (isPositive); / / returns true more_random_numbers.some (isPositive); / / returns true

4. Conditionally set a variable

It's easy to set a variable conditionally, and it makes the code more beautiful. You don't need to write if statements to apply this technique-- this is one of my favorite JavaScript techniques.

So how do you conditionally set a variable?

Const timezone = user.preferred_timezone | | 'America/New_York'

The above example is to check whether the user has a preferred time zone. If the user has a preferred time zone, that time zone is used. If the user does not have a preferred time zone, the default time zone, "United States / New York" ('America/New_York'), is used.

This code looks much cleaner than using an if statement.

Let timezone = 'America/New_York'if (user.preferred_timezone) {timezone = user.preferred_timezone}

It's more concise, isn't it?

Source: Pexels

5. Convert values to an array of strings

Sometimes you need to convert all values to an array of strings. For example, this may occur when you use the Triple equal (=) operator to check whether a number exists in an array.

The author recently encountered a problem that includes a multi-select control. It makes sense that the HTML value of the Select option is a string rather than an integer, and the array of selected values is as follows:

Let selected_values = ['1mm,' 5pm, 8']

The problem is that it failed to check whether an integer exists in the array of the selected values. The author uses an Intersect function that uses the triple equals (= =) operator. And because'5'! = = 5, a solution must be found.

From the author's point of view, the most beautiful solution is to convert all values in the array to integers. When the author tried, I accidentally found an extremely simple but beautiful solution.

Selected_valuesselected_values = selected_values.map (Number) / / [1,5,8]

Instead of converting all values to integers, you can convert values in an array to Boolean values by simply changing the parameters of the map function.

Selected_valuesselected_values = selected_values.map (Boolean) on the five JavaScript skills you should know which are shared here, I hope the above content can be helpful to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.