JS for powerful functions

User-aware
Links: https://www.zhihu.com/question/48187821/answer/110002647
Source: Know
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Out of a Google engineer's work, a line of code can see all the page elements. And there are so many points of knowledge involved.

108 byte version:

[].foreach. Call ($$ ( "*"  Function (a) {a. Style. Outline= "1px solid #" + (~~ (math. Random () * (1<< 24tostring (16      

131 byte version:

[].Foreach.call (document. Queryselectorall (function  (a) {a. Style. Outline= "1px solid #" + (~~ (math. Random () * (1<< 24tostring (16      

Source:https://gist.github.com/addyosmani/fd3999ea7fce242756b1

Chinese Analysis :

Now that we have a node list of all the elements (NodeList), now we want to traverse them and add a colored border to them. Let's see what we can find in this line of code:

[].forEach.call( $$(‘*‘), function( element ) { /* And the modification code here */ });

NodeList looks like an array, you can use the brackets to access their nodes, and you can also know how many elements it has through the length property. However, it does not implement all the interfaces of the array, so use $$ (' * '). ForEach returns an error, in the JavaScript world, there is a bunch of objects that look like an array but are not actually. such as the arguments object in function. Therefore, it is very useful to apply the array method on them by using call and apply. I've written an article before to parse their usage, here's an example

function say(name) { console.log( this + ‘ ‘ + name );}say.call( ‘hola‘, ‘Mike‘ );// 打印输出 ‘hola Mike‘

The previous line of code uses [].foreach.call instead of Array.prototype.forEach.call to reduce the amount of code written (another interesting place), and if $$ (' * ') is returned as an array, it is associated with $$ (' * '). foreach is equivalent.

If you look at the comment, someone else uses the for (i=0; a=$$ (' * ');) make the code shorter, but it injects variables into the global object.

You can take the Var statement, as

for(var i=0,B=document.querySelectorAll(‘*‘);A=B[i++];){ /* your code here */ }

Where I and B will only be declared in the context of the console.

Change the color of an element
Let the element have a nice border, this line of code uses the CSS outline property. One thing you might not know, in a CSS-rendered box model,outline does not change the position of the element and its layout . So this is much better than using the border property, so this part is actually not difficult to understand

a.style.outline="1px solid #" + color

How to define a color value is actually more interesting.

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

I don't know much about bit arithmetic, so I like this paragraph best.

What we want to construct is actually a 16 binary color value, like white ffffff, blue 0000FF, etc.

First we learned that you can use the ToString method of the number type to convert from decimal to 16 binary.

In fact, you can use it for arbitrary conversions.

(30).toString();   // "30"(30).toString(10); // "30"(30).toString(16); // "1e" 16进制(30).toString(2); // "11110" 二进制(30).toString(36); // "u" 36 是最大允许的进制

So the FFFFFF in the 16 binary is actually parseint ("FFFFFF", 16) = = 16777215,16777215 is the value of 2^24-1

So the left shift operates with a random number math.random () * (1<<24) to get a value between 0 and 16777216

But not enough, Math.random returns a floating-point number, we only need the whole number of parts, where the "~" operator (bitwise inverse) is used.

This line of code does not care about positive and negative values. So we can get the whole number of parts by two times, we can also treat ~ ~ as parseint shorthand:

var a = 12.34, // ~~a = 12    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

If you look closely at the comments you will know to use a bitwise OR "|" Operator can also get the same result.

~~a == 0|a == parseInt(a, 10)~~b == 0|b == parseInt(b, 10)~~c == 0|c == parseInt(c, 10)

We finally get a random number between 0 and 16777216, and then we use ToString (16) to convert to 16, which is how it works.

Original address: Learning much JavaScript from one line of code

Translation address: JavaScript knowledge learned from a line of CSS debugging code

JS for powerful functions