한 줄의 코드 시리즈

1. 한 줄의 코드로 구성된 시각적 CSS 상자 레이아웃

[].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 요소
$$()는 NodeList 객체의 배열을 반환하는 document.querySelectorAll()과 동일합니다. 거의 모든 최신 브라우저는
을 지원합니다. 2. DOM 요소를 반복합니다.
$$("* ") `모든 `DOM` 요소를 `NodeList` 객체로 변환하지만 이는 JS 배열이 아니므로 `$$("*").forEach() 메서드를 직접 사용하여 반복할 수는 없지만 호출하거나 또는 forEach
[].forEach.call을 사용하는 적용 메소드는 Array.prototype.forEach.call과 동일하지만 전자의 바이트 수는 더 적습니다
3. 대신 테두리를 사용하는 것이 좋습니다. ? 개요를 사용하는 이유는 테두리가 CSS 상자 모델 내에 있고 페이지의 전체 레이아웃에 영향을 미치는 반면 개요는 CSS 상자 모델 외부에 있으며 페이지 레이아웃에 영향을 미치지 않기 때문입니다
4. 임의 색상 함수 생성

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

임의 색상 간격:

최소값: 000000, 십진수로 변환 시 0

최대값: ffffff, 십진수로 변환 시 256*256*256 = 16777216 = (1

Math.random()은 0과 1 사이의 부동 소수점 숫자를 반환합니다. Math.random()*(1렌더링

미리보기 클릭

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

2.B를 설치할 수 있는 JS 코드 한 줄

위의 마법 코드 줄 실행 효과가 예상치 못한 것입니다. 아래 그림을 참조하십시오.

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

소스 코드 해석

메인 관련된 지식 포인트는 JS 연산의 우선순위와 JS Type 변환 기능

보충 지식:

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