Javascript 20가지 팁 || 개발시간을 줄이자

1. 객체의 데이터 유형 결정

함수 myType(유형) { 
  반환 Object.prototype.toString.call(유형).slice(8, -1);

Object.prototype.toString다른 판단 기능, 간결하고 우아하고 유연한 한 줄의 코드를 반환하기 위해 다양한 유형의 판단을 전달하여 사용 합니다.

2. 배열 맵 방법을 통해 루프

 

map두 번째 인수가 첫 번째 인수에서 이것을 가리킨다는 점 은 주목할 가치가 callback있습니다. 첫 번째 인수가 인 경우 두 번째 인수 arrow function의 설정은 의 어휘적 바인딩 때문에 유효하지 않습니다.arrow function

3. 배열 필터 방법을 통해 루프

 

4. reduce배열 필터 방법을 구현하는 데 사용

 

5. 배열의 몇 가지 방법을 통해 루프

 

일부를 실행하는 배열 false은 빈 배열이면 항상 반환하고 every, 다른 배열의 메서드에 true있는 배열은 빈 배열이면 항상 반환합니다.

6. 루프를 통해 배열의 reduce 메소드 구현

 

7. reduce를 사용하여 배열의 플랫 방법 구현

 

이 포인팅에 따라 다르 므로 탐색 중에 myFlat이 포인팅을 지정해야 합니다 . 그렇지 않으면 기본적으로 가리키고 오류가 발생합니다.myFlatreducewindow

배열의 요소가 여전히 배열이면 의 확장 연산자를 ES6사용하여 차원을 줄입니다( concat에서 메서드를 사용할 수 있음 ES5). 그러나 배열 요소는 내부적으로 중첩된 배열을 가질 수 selfFlat있으므로 재귀적으로 호출해야 합니다.

한편, 네이티브 Flat방식은 차원 축소의 깊이를 나타내는 깊이 파라미터를 지원한다. 기본값은 1이며, 이는 배열이 1차원으로 축소됨을 의미합니다.

Infinity를 전달하면 전달된 배열이 1차원 배열로 바뀝니다.

8. ES6 클래스 구문 구현

 

Create 메서드는 빈 Object를 만들고 메서드의 매개 변수에서 이 빈 Object를 상속합니다 Object.create. 그런 다음 prototype하위 클래스(subType)가 빈 객체와 prototype같게 하면 하위 클래스가 빈 객체와 같고 빈 객체가 상속과 같다는 것을 알 수 supertype. prototype있습니다.

Object.create생성된 빈 개체에 대한 속성 및 속성/접근자 설명자를 정의하는 두 번째 인수를 지원합니다. 기본 상속 동작을 더 잘 준수하는 이 빈 Object 생성자 속성을 제공할 수 있습니다. 또한 열거할 수 없는 내부 속성( Enumerable: False)입니다.

ES6 class에서는 하위 클래스가 상위 클래스에서 정적 메서드와 정적 속성을 상속할 수 있는 반면 일반 기생 조합 상속은 인스턴스 간에만 구현될 수 있습니다. 클래스 간 상속을 위해서는 추가 메소드를 정의해야 합니다.

여기에서 로 설정하는 데 사용 하므로 Object.setProtoTypeof부모 superType클래스 에서 정적 메서드와 정적 속성을 상속할 수 있습니다.prototypesubType

9. 기능의 Coriolization

 

Currization은 여러 인수를 취하는 함수를 하나의 인수를 취하는 일련의 함수로 변환하는 기술인 함수형 프로그래밍에서 중요한 기술입니다.

기능적 프로그래밍은 또 다른 중요한 기능을 구성하고 기능 조합을 수행할 수 있으려면 기능 조합이 하나의 매개변수만 허용하므로 여러 기능 요구를 수락해야 하고 구성 기능 조합을 사용해야 하는 경우 일부를 사용해야 합니다. 복합 함수를 준비하기 위해 카레는 항상 매개변수만 허용하도록 합니다.

10. 기능 수정(자리 표시자 지원)

 

현재 라운드 매개변수에 자리 표시자가 포함되어 있으면 내부 저장된 배열의 끝에 배치됩니다. 현재 라운드의 요소는 현재 라운드 매개변수의 자리 표시자를 채우지 않고 이전에 전달된 자리 표시자만 채웁니다.

11. 피보나치 수열과 그 최적화

 

함수 메모리를 사용하면 피보나치 수열과 같이 이전 결과에 자주 의존하는 계산에 많은 시간을 절약할 수 있습니다. 단점은 obj클로저의 객체가 추가 메모리를 차지한다는 것입니다.

또한 동적 프로그래밍은 전자보다 공간 복잡도가 낮고 더 권장되는 솔루션입니다.

12. bind 메소드 구현

 

bind함수를 구현하는 메서드 의 핵심은 다음 과 같은 다른 경우를 고려하여 call를 가리키는 바인딩을 사용합니다.this

• 에서 반환한 함수 bind가 에서 생성자로 호출 new되면 바인딩 값이 무효화되고 에서 지정한 개체로 변경됩니다 new.
• length바인딩된 함수의 및 name속성(열거할 수 없는 속성)을 정의합니다 .
• prototype바인딩된 함수는 원래 함수를 가리켜야 합니다 prototype.

13. 호출 방식 구현

 

context원칙은 전달된 매개변수 의 속성으로 함수를 실행하는 것 입니다. ES6 Symbol유형은 속성 충돌을 방지하는 데 사용됩니다.

14. 단순 CO 모듈

 

이 run함수는 함수 generator를 취하고, run 함수에 의해 래핑된 제너레이터 함수가 키워드를 만날 때마다 중지하고 , after 가 성공적 일 때 키워드 yield에 실행할 next 메소드를 자동으로 호출합니다 .next yieldpromiseyieldresolved

promise결국, a 가 성공적으로 해결 될 때마다 next promise가 됩니다 resolved.

모든 결과가 성공적으로 해결되면 모든 구문 분석 결과가 인쇄되어 async/await오늘날 가장 많이 사용되는 구문으로 발전합니다.

15. 손떨림 방지 기능

 

16. 기능 조절

 

후행 옵션이 추가되어 시퀀스의 끝에서 추가 이벤트가 트리거되는지 여부를 나타냅니다.

17. 이미지의 지연 로딩

 

이벤트 수신 의 구현( getBoundClientRect수신 scroll이벤트에 대한 조절을 추가하는 것이 좋습니다). 이미지를 불러온 후에 DOM는 img 태그로 구성된 목록에서 삭제됩니다. 마지막으로 리스너 이벤트를 로드한 후 모든 이미지를 바인딩 해제해야 합니다.

IntersectionObserver인스턴스화 intersectionObserver하고 모든 IMG 태그를 관찰하도록 하여 구현됩니다.

img 태그가 보기 영역에 들어가면 인스턴스화될 때 콜백을 수행합니다. 동시에 콜백을 전달하고 각 요소의 경계, 현재 요소 해당 노드, 보기 영역에 대한 현재 요소의 비율 observe과 같은 일부 상태의 모든 요소에 인스턴스를 저장합니다. DOM요소가 보기 영역에 들어갈 때마다 관찰하지 않는 동안 현재 IMG 태그에 실제 이미지를 할당합니다.

18. 새로운 키워드

 

19. 목표 달성. 양수인

 

20. 인스턴스 오브

 

결론

그리고 거기에 있습니다. 더 좋고 생산적인 코드를 작성하는 데 도움이 되는 20가지 훌륭한 팁. 읽기 전에 얼마나 알고 있었습니까?

이 정보가 유용했다면 좋아요, 댓글, 공유를 꼭 눌러주세요.

감사 해요!

독립 구성 요소로 10배 개발

모놀리식 앱을 빌드한다는 것은 모든 코드가 내부에 있고 다른 곳에서는 유용하지 않다는 것을 의미합니다. 그것은 단지 이 하나의 프로젝트를 제공합니다. 그리고 더 많은 코드와 사람으로 확장함에 따라 모든 사람이 하나의 코드베이스와 동일한 버전에서 작업하기 때문에 개발이 느려지고 고통스러워집니다.

그러나 독립적인 구성 요소를 먼저 구축한 다음 이를 사용하여 여러 프로젝트를 구축하면 어떻게 될까요? 최신 개발을 10배 가속화하고 확장할 수 있습니다.

Bit 와 같은 OSS 도구는 독립적인 구성 요소를 구축하고 모듈식 응용 프로그램을 구성하기 위한 강력한 개발자 경험을 제공합니다. 많은 팀은 독립적인 구성 요소를 통해 디자인 시스템 또는 마이크로 프론트엔드를 구축하는 것으로 시작합니다. 한번 해보세요 →