Learn some JavaScript from one line of code

Learn some JavaScript from one line of code (reproduced from here)

Today, JavaScript is ubiquitous, so new knowledge about JavaScript is endless. The feature of JavaScript is that it is simple to learn its syntax, but it is not easy to master the way it is used.

Take a look at the code below, which comes from a piece of code that Google Addy osmani a few days ago to debug your CSS layer. The entire code is only three lines, but you can definitely put it in one line to complete:

[].foreach.call ($$ ("*"), function (a) {a.style.outline= "1px solid #" + (~ ~ (Math.random () * (1<<24)). toString (16) })

Now, enter this code in the console of your Chrome browser, and you'll find that different HTML layers have a highlighted border added with different colors. Isn't it really cool? However, simply put, this code just gets all the page elements first, and then adds a 1ps border to them using a different color. The idea is simple, but it's not so easy to realize. In the following sections, we will step through the steps to understand how to interpret the above code.

Select all elements in the page

The first thing we need to do is get all the elements in the page, and in the code above, Addy uses a function $$ unique to the Chrome browser. You can enter it in your Chrome browser console $$(‘a‘) , and you'll get a list of all the anchor elements in the current page.

$$ function is a part of many modern browser command-line APIs that are equivalent to document Queryselectorall , you can use a CSS selector as an argument to this function, and then you can get a list of all the elements in the current page that match the CSS selector. If you are outside the browser console, you can use the document Queryselectorall *" instead of $$ ( ' * ' . More details about the $$ function can be found in the Chrome developer tools documentation.

Of course, in addition $$ to using functions, there is an easier way to document.all do this, although this is not a very prescriptive way to use it, but it can run successfully in almost every browser.

Iterate over all the elements

After the first step, we've got all the elements in the page, and now what we want to do is iterate through each element and add a colored border to them. But what exactly is the code above?

[].foreach.call ($$ (' * '), function (Element) {/* * change color here */});

> First, the list we get through the selector is a nodelists object, which is a bit like the array in JavaScript, you can use square brackets to get the nodes, you can also check how many elements it contains, However, it does not implement all the methods contained in the array, so we cannot use the $$ ( ' * ' Foreach To iterate. In JavaScript, there are several objects that resemble arrays but are not arrays, except for the preceding nodelists , and the parameter collection of the function arguments , where we can use the The call or apply function applies the methods of the function to these objects. For example, the following example:

function say (name) {Console.log (this + ' + name);} Say.call (' Hola ', ' Mike '); print ' Hola Mike '

You can also use this method on arguments objects function example (Arg1, arg2, Arg3) {return Array.prototype.slice.call (arguments, 1);//Ret Urns [Arg2, Arg3]}

In the Addy code, [].forEach.call instead, the two are Array.prototype.forEach.call equivalent, but the former can save a few bytes.

Add color to an element

In order for the elements to have a nice border, we used CSS properties in the code above outline . outlineproperty is outside the CSS box model, so it does not affect the attributes of the element or the position of the element in the layout, which is useful for us. This property border is very similar to modifying properties, so the following code should not be difficult to understand:

A.style.outline= "1px solid #" + Color

The real interesting part is the definition of the color section:

~ ~ (Math.random () * (1<<24)). toString (16)

Oh, my God, what does the code above mean? In JavaScript, the bit operators are not often used, so many programmers may find it confusing.

The purpose we want to achieve is to live a hexadecimal format of colors such as white corresponds to, FFFFFF blue corresponds to 0000FF , or a random color 37f9ac . Although we humans like the decimal, our code often needs hexadecimal stuff.

We first have to learn how to use toString a function to convert a decimal array to a hexadecimal integer. This function can accept a parameter, and if the parameter defaults, it defaults to decimal, but you can completely use another array:

(+). toString (); (+) toString (10); (+) toString (16); "1e" hexadecimal (2); "11110" binary (in). ToString (36); "U" 36 is the maximum allowable parameter value

In addition, you can use a parseInt function to convert a hexadecimal number to decimal.

parseint ("30"); "Parseint" ("30", 10); "Parseint" ("1e", 16); "Parseint" ("11110", 2); "Parseint" ("U", 36); "30"

Therefore, we now only need a 0 ffffff hexadecimal number that is located and between, because:

parseint ("ffffff", 16) = = 16777215

And the 16777215 here is actually 2^24-1 .

If you're familiar with binary math, you might know 1<<24 == 16777216 .

Further, each time you add a 0 after 1, you will be equivalent to doing a 2 more of the powers:

1//1 = = 2^0100//4 = 2^210000//16 = 2^41000000000000000000000000//16777216 = = 2^24

So here we can know math Random *1 <<24 indicates a 0 and

But this is not the end, because Math.random a floating-point number is returned, but we only want the integer part. We use the tilde operator in our code to do this. The wave operator is used in JavaScript to reverse a variable.

But we don't care here to take the inverse, we point to get the integer part. So we can also know that two times the inverse can remove a floating-point number of parts, so ~~ the role of the equivalent parseInt :

var a = 12.34,//~~a = b = -1231.8754,//~~b = -1231 c = 3213.000001//~~c = 3213;~~a = parseint (A, 10); True~~b = = parseint (b, 10); True~~c = = parseint (c, 10); True

Of course, we also have a more concise way to use the OR operator:

~~a = = 0|a = = parseint (A, ten) ~~b = = 0|b = parseint (b, ten) ~~c = = 0|c = parseint (c, 10)

Finally, we get a 0 16777216 random integer between and, which is the random color we want. At this point we just need to toString(16) convert it to hexadecimal number.

Summarize

Now that you have fully understood the sections in the previous line of code. As a programmer, we should ask ourselves several times after we have finished our work. Why, there is no better and more concise way. Of course, the best thing to do is to read the program code more, and maybe you can learn a lot of new things from one line of code.

This article refers to the learning much JavaScript from the one line of code, the original address Http://arqex.com/939/learning-much-javascript-one-line-code

Learn some JavaScript from one line of code