One-line code series

One-line code series

1. One line of code visualization CSS box Layout

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

Source code explanation

First, format the Code:

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

1. Select All DOM elements on the page.
$ () Is equivalent to document. querySelectorAll (). It returns a NodeList object array, which is almost supported by modern browsers.
2. cyclically traverse DOM elements
$ ("*") 'Converts all 'dom' elements into 'nodelist' objects, but this is not a JS array, therefore, you cannot directly use '$ ("*"). the forEach () method is used for iteration, but we can use the call or apply method to use forEach.
[]. ForEach. call is equivalent to Array. prototype. forEach. call, but the former has fewer bytes.
3. Add outline to the element
The reason why we do not use border but use outline is that border affects the overall layout of the page in the CSS box model, while outline does not affect the layout of the page outside the CSS box model.
4. generate random color functions

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

Random color range:

Minimum: 000000, convert to decimal: 0
Maximum: ffffff, convert to decimal 256*256*256 = 16777216 = (1 <24)

Math. random () returns 0 ~ The floating point number of 1. Math. random () * (1 <24) returns the floating point number between () and ~~ Remove the decimal part of the floating point number and convert it to the hexadecimal color value through toString (16 ).

Additional knowledge:

'~~ 'Bit' operator, type conversion, convert to a number, equivalent to 'math. floor () ', convert a floating point number to an integer. First let's look '(! (~ + []) + {}) ''+ [] '=>' +" "'=> '0 ''~ + [] '=>'-1 ''! (~ + []) '=> 'False ''(! (~ + []) + {}) '=> "'False [object Object]"' Next, let's see '[--[~ + ""] [+ [] * [~ + [] + ~~! + [] ''[+ [] '=>' [0]'' [~ + ""] '=> '[~ 0] '=>' [-1] '[~ + ""] [+ [] '=>' [-1] [0] =>-1 ''--[~ + ""] [+ [] '=>'-2 ''[~ + [] '=>' [-1] ''-- [~ + ""] [+ [] * [~ + [] '=>'-2 * [-1] '=> '2 ''~~! + [] '=> '~~! 0' => '~~ True '=> '1 ''[--[~ + ""] [+ [] * [~ + [] + ~~! + [] '=>' [2 + 1] '=>' [3] 'and then left side '(! (~ + []) + {})[--[~ + ""] [+ [] * [~ + [] + ~~! + [] '=> "'False [object Object]" [3]' => "'s" 'then look at the right side' ({} + []) [[~! + [] * ~ + [] ''({} + []) '=>"' [Object Object] "'' [~! + [] '=> '[~! 0] '=> '[~ True] '=>' [-2] ''~ + [] '=>'-1 ''[[~! + [] * ~ + [] '=>' [-2] *-1] '=>' [2] ''({} + []) [[~! + [] * ~ + [] '=> "' [Object Object]" [2] '=> "' B "'