一連の 1 行のコード

1. CSS ボックスのレイアウトを視覚化するための 1 行のコード

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

ソースコードの解釈

まず、コードをフォーマットします:

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

1. ページ上のすべての DOM 要素を選択します
$$() は document.querySelectorAll( ) を返し、NodeList オブジェクトの配列を返します。ほとんどすべての最新のブラウザーは
2 をサポートしています。DOM 要素のループ
$$("*")` は、すべての `DOM` 要素を `NodeList` オブジェクトに変換しますが、これは JS 配列ではありません。 , したがって、`$$("*").forEach() メソッドを直接使用して反復することはできませんが、呼び出しまたは適用メソッドを通じて forEach を使用することはできます
[].forEach.call は Array.prototype.forEach と同等です。呼び出しますが、前者の方がバイト数が少なくなります
3. 要素にアウトラインを追加します
ボーダーではなくアウトラインを使用する理由は次のとおりです: ボーダーは CSS ボックス モデル内にあり、ページ全体のレイアウトに影響しますが、アウトラインはCSS ボックス モデルの外側では、ページのレイアウトには影響しません
4. ランダム カラー関数を生成します

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

ランダム カラー間隔:

最小: 000000、10 進数に変換すると 0
最大: ffffff、10 進数に変換すると 256 *256*256 = 16777216 = ( 1<<24)

Math.random() は 0 から 1 までの浮動小数点数を返します。 Math.random()*(1<<24) は 0 から 1 までの浮動小数点数を返します。 (0,16777216)、~~ を使用して浮動小数点数の小数部を削除し、toString(16) を使用して 16 進数のカラー値に変換します

レンダリング

クリックしてプレビューhttps:/ /gist.github.com/addyosmani /fd3999ea7fce242756b1

2. B をインストールできる JS コードの行

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

上記の魔法のコード行、実行効果は予期せぬものです。下の図をご覧ください:

ソースコードの解釈

関係する主な知識ポイントは、JS操作とJS型変換の優先順位です
補足知識:

`~~`位运算符，进行类型转换，转换成数字，等同于`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"`