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

This article introduces the relevant knowledge of "what little-known skills are there in JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Void operator

JavaScript has a unary void operator. You may have seen it used as void (0) or void 0. It has only one goal in its life-- to return * * undefined** in the right place in the expression. Using "0" is just a convention. You don't have to use "0", it can be any valid expression void and still returns * * undefined. **

Why did you create a special keyword to return undefined instead of directly returning undefined?

Sounds like a little redundant, right?

Anecdotes

Well, it turns out that before ES5, you could actually assign a new value to the original undefined in most browsers, such as undefined = "abc".

Define undefined!

So at that time, using void was one way to ensure that you always returned the original undefined.

The parentheses after the constructor are optional

Yes, when calling the constructor, the parentheses we add after the class name are completely optional!? (provided that you do not need to pass any arguments to the constructor)

The following two code styles are considered valid JS syntax, and the results are the same!

Parentheses of the IIFE function can be omitted

For me, the syntax of IIFE (calling functional expressions immediately) is always a little strange.

How on earth should I use those parentheses?

As it turns out, these extra parentheses are just to tell the JavaScript parser that the code to be released is a function expression, not a function. As you can imagine, knowing this, there are many ways to skip the extra parentheses and still produce a valid IIFE.

The void operator tells the parser that the code is a function expression. Therefore, we can skip the parentheses of the function definition. You know what? We can use any unary operator to make it work!

This is so cool!

However, if you are a keen observer, you may think

Does the unary operator affect any results returned by IIFE?

Well, it will affect the outcome. The good news, however, is that if you care about the result and say you want to store it in a variable, you don't need extra parentheses in the first place.

That's true!

We add these parentheses only to improve human readability.

For more information about IIFE checkout, check out Chandra Gundamaraju's cool article

With statement

Did you know that JavaScript has a block of with statements? It's actually a keyword in JS. The syntax for writing with blocks is as follows:

With (object) statement / / for multiple statements add a block with (object) {statement statement.}

With adds all attributes of the incoming object to the current scope chain:

Anecdotes

With sounds pretty cool, right? It is even better than object deconstruction.

Okay, that's not true.

The with statement is generally not recommended because it has been deprecated. This is completely prohibited in strict mode. It turns out that using blocks can increase the performance and security problems of the language!

Translator's note:

With is not recommended because the with statement adds members of the object to the current scope, making it impossible to say what the variables within the block actually refer to. Because it is difficult to debug and read these types of features, many people think this is a bad practice, and you can refer to the following information for more information:

Https://eslint.org/docs/rules...

Https://eslint.org/docs/rules...

Function constructor

Function declarations are not the only way to define new functions; you can define functions dynamically using the Function () constructor and the new operator.

The last constructor argument is the function's serialization code and other previous arguments to the function argument.

Anecdotes

The Function constructor is the mother of all constructors in JavaScript. Even the constructor of Object is the Function constructor. Function's own constructor is also Function itself. Therefore, call object.constructor.constructor... A sufficient number of times will eventually return the Function constructor on any object in JavaScript.

Function attribute

As we all know, functions are "first-class citizens" in JavaScript. Therefore, no one is preventing us from adding custom properties to the function. This is exactly the right thing to do in JS. However, it is rarely used.

So when do we want to do this?

Well, there are some good use cases. For example:

Configurable function

Suppose we have a function called greet. We want our function to print different greeting messages based on different locales. This locale should also be configurable. We can maintain the global locale variable somewhere, or we can implement the function using the function properties shown below:

Functions with static variables

Another similar example. Suppose you want to implement a number generator-- the number generator generates a series of ordered digits. Typically, you will use a class or IIFE with a static counter variable to track the previous value. In this way, we can restrict access to counter and avoid polluting the global space with additional variables.

But what if we want to flexibly read or even modify counters without polluting the global space?

Yes, we can still create a class with counter variables and some other methods to read counter, or we can be lazy and just use properties on functions.

This is a very long list. We just wrote it halfway through. If you want to have a rest, now is a good time. If you want to keep watching, well, I salute you!

Let's go on!

Parameter attribute

I'm sure most of you know the arguments object within the function. It is an array, similar to an object, and can be used in all functions. It has a list of arguments passed to the function when it is called. But it also has some other interesting features

Arguments.callee: refers to the currently called function

Arguments.callee.caller: refers to a function that has already called the current function

Note: although ES5 prohibits the use of callee and caller in strict mode, it is still common in many compiled libraries. Therefore, it is worth learning.

Tag template string

Unless you are isolated, you must have heard of template strings. Template strings are one of the many good features provided by ES6. But do you know the tag template string?

Template strings with tags can have more control over the process of parsing template strings into strings by adding custom tags to the template string. Tag is just a parser function that takes an array of all the strings and values interpreted by the string template and returns the final string.

In the following example, our custom tag highlight interprets the value of the template string and also wraps the interpreted value in an element in the result string to highlight.

Some interesting use cases can be found in many libraries that take advantage of this feature.

Here are some cool examples

React styled-components

Es2015-i18n-tag for translation and internationalization

Chalk is used for color log

Getters & Setters

In most cases, the JavaScript object is simple. Suppose we have a user object and try to access its age property using user.age. If we define the age attribute, we will get the value of the age attribute; otherwise, we will get the undefined attribute. simple.

But it doesn't have to be that simple. JavaScript objects have the concepts of Getter and Setter. Instead of directly returning the value of the object, you can write a custom Getter function directly to return whatever you want. The setting value is the same.

This enables us to have powerful capabilities such as virtual fields, field validation, side effects and so on when getting or setting fields.

Getters and Setters are not new in ES5. They were there all the time. ES5 simply adds a convenient syntax to the existing functionality. To learn more about Getters&Setters, please refer to this good article)

Colors is a popular node.js library, and it is a good example of using Getters.

The library extends the String class and adds a bunch of Getter methods to it. This allows us to convert any string to its color version for easy printing by simply accessing its properties.

Comma operator

JavaScript has a comma operator. It allows us to write multiple expressions separated by commas on one line and return the result of the last expression

/ / syntax let result = expression1, expression2,... ExpressionN

In the above code, all expressions are evaluated and the value returned by expressionN is assigned to the result variable.

You may have used the comma operator in the for loop:

For (var a = 0, b = 10; a (console.log (x), x * x) plus sign operator

Have you ever encountered a scene where you need to quickly convert a string to a number?

Simply precede the string with the + operator.

The plus operator also applies to negative, octal, hexadecimal, and exponential values. Moreover, it can even convert Date or Moment.js objects to timestamps!

!! Bang Bang operator

Well, technically it's not a stand-alone JavaScript operator. Only the JavaScript negative operator is used twice.

But Bang Bang (!) Sounds cool! Bang Bang or Double Bang is a clever technique for converting all expressions to Boolean values.

Returns true; if the expression is the value of truthy, otherwise returns false.

~ bitwise operator

Let's face it-no one cares about bitwise operators. When can we use it?

Well, the bitwise non-(~) operator is used every day.

It turns out that bitwise non-operators are effective when used with numbers. For example: ~ N = >-(N + 1). This expression evaluates to "0" only if N =-1.

We can do this by placing ~ in indexOf (...) Function to check whether an item exists in a string or array:

Note: ES6 and ES7 have added a new .notify () method to String and Array, respectively. There is no doubt that this is a more concise way to check for items in an array or string than the ~ operator.

Tagged statement

JavaScript has the concept of a label statement. It allows us to name loops and blocks in JavaScript. We can then use these tags to reference the code when we use break or continue later.

Tagged statements are especially convenient in nested loops. But we can also use them to simply organize code into blocks or create exportable blocks.

This is the end of the content of "what are the little-known skills in JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.