eine Zeile Codeserie

1. Visuelles CSS-Box-Layout mit einer Codezeile

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

Quellcode-Interpretation

Zuerst formatieren wir den Code:

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

1 Das DOM-Element
$$() aller Seiten entspricht document.querySelectorAll(), das ein Array von NodeList-Objekten zurückgibt. Fast alle modernen Browser unterstützen
2. Schleife durch DOM-Elemente
$$("*. ") `Konvertieren Sie alle `DOM`-Elemente in `NodeList`-Objekte, aber dies ist kein JS-Array, daher können Sie die `$$("*").forEach()-Methode nicht direkt zum Iterieren verwenden, aber wir können oder aufrufen Die apply-Methode verwendet forEach
[].forEach.call ist äquivalent zu Array.prototype.forEach.call, aber ersteres hat weniger Bytes
3. Warum nicht stattdessen border verwenden? ? Der Grund für die Verwendung von Umrissen liegt darin, dass sich der Rahmen innerhalb des CSS-Boxmodells befindet und das Gesamtlayout der Seite beeinflusst, während sich der Umriss außerhalb des CSS-Boxmodells befindet und keinen Einfluss auf das Layout der Seite hat
4. Generieren Sie eine Zufallsfarbfunktion

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

Zufälliges Farbintervall:

Minimum: 000000, in Dezimalzahl umgewandelt ist 0

Maximum: ffffff, in Dezimalzahl umgewandelt ist 256*256*256 = 16777216 = (1<<24)

Math.random() gibt eine Gleitkommazahl zwischen 0 und 1 zurück. Math.random()*(1<<24) gibt eine Gleitkommazahl zwischen ( 0,16777216), verwenden ~ ~Entfernen Sie den Dezimalteil der Gleitkommazahl und konvertieren Sie ihn dann über toString(16) in einen hexadezimalen Farbwert

Rendering

Klicken Sie zur Vorschau

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

2. Eine Zeile JS-Code, die B

< installieren kann 🎜>Die obige magische Codezeile wird ausgeführt. Der Effekt ist unerwartet. Bitte sehen Sie sich das Bild unten an:

(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]

Interpretation des Quellcodes

Das Wichtigste Die beteiligten Wissenspunkte sind die Priorität von JS-Operationen und die Funktion der JS-Typkonvertierung

Ergänzendes Wissen:

`~~`位运算符，进行类型转换，转换成数字，等同于`Math.floor()`，将浮点数变成整数
首先我们看`(!(~+[])+{})`
`+[]` => `+""` => `0`
`~+[]` => `-1`
`!(~+[])` => `false`
`(!(~+[])+{})` => `"false[object Object]"`
接着看`[--[~+""][+[]]*[~+[]]+~~!+[]]`
`[+[]]` => `[0]`
`[~+""]` => `[~0]` => `[-1]`
`[~+""][+[]]` => `[-1][0]=>-1`
`--[~+""][+[]]` => `-2`
`[~+[]]` => `[-1]`
`--[~+""][+[]]*[~+[]]` => `-2*[-1]` => `2`
`~~!+[]` => `~~!0` => `~~true` => `1`
`[--[~+""][+[]]*[~+[]]+~~!+[]]` => `[2+1]` => `[3]`
这样左侧`(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]` => `"false[object Object]"[3]` => `"s"`
再看右侧`({}+[])[[~!+[]]*~+[]]`
`({}+[])` => `"[object Object]"`
`[~!+[]]` => `[~!0]` => `[~true]` => `[-2]`
`~+[]` => `-1`
`[[~!+[]]*~+[]]` => `[[-2]*-1]` => `[2]`
`({}+[])[[~!+[]]*~+[]]` => `"[object Object]"[2]` => `"b"`