JavaScript의 멋진 가이드에 대한 자세한 그래픽 및 텍스트 설명

이 글은

이해가 안 되신다면 SB님, 제가 작성한 코드는 정말 멋질 거에요

일부 js의 가식적인 기술.

다음 기술 중 마지막 3개는 팀 프로젝트에서 주의해서 사용하시기 바랍니다(주로 가독성 문제를 고려). 그렇지 않으면 리더가 협상 없이 사용하게 됩니다.

부울

이 기술은 많이 사용되며 매우 간단합니다.

!!'foo'

두 개를 부정하면 강제로 변환될 수 있습니다. 부울 유형. 더 일반적으로 사용됩니다.

숫자

문자열을 숫자로 변환

+'45'
+new Date

는 자동으로 숫자 유형으로 변환됩니다. 더 일반적으로 사용됩니다.

IIFE

이것은 실제로 매우 실용적이며 허식으로 간주되지 않습니다. 다른 언어에는 그런 것이 없다는 것이 JS에 대해 잘 모르는 학생들에게는 꽤 멋진 일입니다.

(function(arg) {
    // do something
})(arg)

실용적인 가치는 지구 오염 방지에 있습니다. 하지만 이제 ES2015의 인기로 인해 이것을 사용할 필요가 없게 되었고, 5년 후에는 이러한 글쓰기 방식이 점차 줄어들 것이라고 믿습니다.

5년차인데 인턴들 앞에서 자랑하기 참 좋아요~

Closure

Closure 뭐 js가 특히 재밌네요 장소의. 위의 즉시 실행 함수는 클로저를 적용한 것입니다.

이해가 안 되시면 책으로 돌아가서 Zhihu에 대한 토론도 많으니 확인해 보세요.

클로저 사용은 단순히 초보자를 위한 마스터의 표시입니다(그렇지 않습니다).

var counter = function() {
    var count = 0
    return function() {
        return count++
    }
}

위에서 클로저를 사용했는데 꽤 멋져 보입니다. 하지만 실용성은 없는 것 같습니다.

이건 어때요?

var isType = function(type) {
    return function(obj) {
        return toString.call(obj) == '[Object ' + type + ']';
    }
}

고차 함수를 통해 카테고리를 쉽게 판단하세요. (Array를 결정하기 위해 Array.isArray()를 잊지 마세요)

물론 이것은 단지 기본일 뿐이고 이보다 더 가식적일 수는 없음이 분명합니다. 다음 섹션을 살펴보겠습니다.

이벤트

이벤트 응답 프론트 엔드는 일반적으로 카운터를 어떻게 작성해야 합니까?

으으으으

문제 없을 것 같지만! 변수 times를 외부에 배치한 이유는 무엇인가요? 이름이 충돌하는 경우 어떻게 해야 하나요? 아니면 외부에서 수정하면 어떻게 해야 하나요?

이때 이런 이벤트 모니터링 코드가 더 강력하네요

아아아아

어때요, 확 달라지는 느낌이 드시나요? 그는 즉시 더 강력해졌습니다!

은 클로저를 생성하고 그 안에 times를 캡슐화한 다음 함수를 반환합니다. 이 사용법은 덜 일반적입니다.

parseInt

고에너지 경고

여기서부터는 회사 코드에 다음 코드를 주의 깊게 적어야 합니다!

parseInt이 기능이 너무 평범한데 어떻게 멋진 척 할 수 있나요? 답은 ~~

이제 F12을 누르고 콘솔에 다음과 같은 코드를 복사하여 붙여넣으세요.

var times = 0
var foo = document.querySelector('.foo')
foo.addEventListener('click', function() {
    times++
    console.log(times)
}, false)

이 기술은 ~가 매우 멋지다는 것입니다. 비트 단위라는 함수 연산이 그렇지 않은 경우 값의 보수가 반환됩니다. 이진 연산입니다.

이유는 자바스크립트의 숫자는 모두 double형이고, 비트 연산 시 int로 변환해야 하기 때문입니다~ 두 번 사용해도 여전히 원래 숫자입니다.

16진수

16진수 연산. 사실 Array.prototype.toString(16)

의 용법입니다. 이 단어를 보면 CSS의 색상이 떠오르는군요.

무작위를 얻으려면 이렇게 하면 됩니다

foo.addEventListener('click', (function() {
    var times = 0
    return function() {
        times++
        console.log(times)
    }
})(), false)

하단의 원본 텍스트 링크를 적극 권장하며, 마지막 세 가지 기술은 모두 거기서 학습됩니다.

왼쪽 시프트 조작입니다. 이 작업은 특히 까다롭습니다. 일반적으로 C를 많이 플레이해보면 이 작업에 대해 조금 알게 될 것입니다. 일반적으로 스님이 된 지 반쯤 된 프론트엔드 프로그래머들은 잘 이해하지 못할 수도 있습니다(저입니다 ☹).

이것도 이진 연산입니다. 위의

의 동작을 설명하기 위해 숫자 이진수를 왼쪽

1<<24으로 이동합니다.

은 실제로 24비트만큼 왼쪽으로 1 시프트됩니다. 000000000000000000000001 24비트를 왼쪽으로 이동하여 1000000000000000000000000

이 되었습니다. 믿을 수 없나요?

콘솔에 다음 코드를 붙여넣어 보세요

~~3.14159
// => 3
~~5.678
// => 5

사실

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

를 더 이해하기 쉽게 설명하는 방법이 있습니다. 바이너리 연산이기 때문에 매우 빠른 .

BTW

parseInt(&#39;1000000000000000000000000&#39;, 2) === (1 << 24)

일반 언어로 번역하면 이렇습니다

Math.pow(2,24) === (1 << 24)

기타

기타, 일부 대기자, 데코레이터 등. TypeScript를 사용하여 기본적으로 이해할 수 있는 내용은 소개하지 않겠습니다.

위 내용은 JavaScript의 멋진 가이드에 대한 자세한 그래픽 및 텍스트 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!