이 기사는 알아야 할 14 가지 JavaScript 함수입니다. 당신이 일하는 데 사용할 수있는 이러한 기능에 대해 인터뷰 할 경우 이러한 기능을 준비하고 알게되면 매우 유용합니다.
1. 물체의 특정 유형을 결정
우리가 이미 알고 있듯이 JavaScript에는 5 가지 기본 데이터 형식과 개체 데이터 형식이 있으며 개체 데이터 형식은 여러 하위 유형으로 나눌 수 있으며 개체는 배열, 함수, 맵 등이 될 수 있습니다. Object의 유형을 알고 싶다면 어떻게해야합니까?
코드 :
설명 :
ECMAScript에는 다음 규칙이 있습니다.
다른 개체 Object.prototype.toString ()을 호출 할 때도 결과가 다릅니다 .
또한 Object.prototype.toString () 의 반환 값 은 항상 ' [object'+ 'tag'+ '] ' 의 형식으로 되어 있습니다. 중간에 태그 만 원하면 양쪽의 문자를 삭제할 수 있습니다. 정규 표현식 또는 String.prototype.slice () 사용
예 :
2. 캐싱 기능 계산 결과
다음과 같은 기능이 있다면 :
함수가 나중에 호출 될 때 함수의 결과를 저장하려고합니다. 매개 변수가 같으면 함수는 실행되지 않지만 대신 캐시에 결과가 반환됩니다.
코드 :
예 :
항목 3-7은 JavaScript에서 기본 제공 방법으로 간주되며 매우 유용합니다. 그리고 이러한 기능을 자신의 작업에 적용해야합니다.
3. Array.prototype.map 구현
이것은 JavaScript에서 유용한 기본 제공 방법이지만이 기능을 직접 구현할 수 있어야합니다.
코드 :
예 :
4. Array.prototype.filter 구현
코드 :
예 :
5. Array.prototype.some 구현
코드 :
예 :
6. Array.prototype.reduce 구현
코드 :
예 :
7. Array.prototype.flat 구현
코드 :
예 :
8. Currying
Currying은 여러 인수를 가진 함수를 단일 인수를 가진 함수로 평가하는 기술입니다.
다시 말해, 한 번에 모든 인수를 받아들이지 않고 함수가 첫 번째 인수를 받으면 두 번째 인수를 사용하여 새 함수를 다시 반환하고 세 번째 인수를 사용하여 새 함수를 다시 반환합니다.
그리고 모든 주장이 끝날 때까지 계속
즉, 함수 호출을 add (1, 2, 3)에서 add (1) (2) (3)으로 변경하면이 기술을 사용합니다. 쉽게 구성하고 재사용 할 수있는 일부 부품이 있습니다.
이 기능이 유용한 이유는 무엇입니까?
- Currying는 동일한 변수를 반복적으로 전달하지 않도록 도와줍니다.
- 이벤트 관리에 매우 유용한 고차 함수 ( 함수 의 함수를 함수의 매개 변수로 보낼 수 있고 함수에서 리턴 될 수 있음)를 작성 하는 데 도움이됩니다.
- 쉽게 구성하고 재사용 할 수있는 일부 부품이 있습니다.
Function add를 다시 살펴보면 3 개의 피연산자를 인수로 사용하고 3 개의 문자의 합계를 결과로 반환합니다.
적은 양의 인수로 호출 할 수 있습니다. 이상 (그러나 초과 인수는 사용되지 않습니다)
이 기능을 어떻게 Curry로 변환 할 수 있습니까?
코드 :
예 :
9. Debouncing
Debouncing은 브라우저 성능을 향상시키기 위해 불필요한 컴퓨팅 시간을 줄이는 데 도움이됩니다. 일부 기능이 전자 상거래 웹 사이트의 검색 막대를 사용하는 등 평소보다 특정 조치를 수행하는 데 시간이 더 걸리는 경우가 있습니다.
사용자가 "Tutorix 스터디 키트"를 검색하려고 할 때 검색 창에 제품의 모든 문자를 입력한다고 가정합니다. 각 문자를 입력 한 후 Api는 브라우저에서 서버로 호출되어 사용자가 원하는 제품을 검색합니다. "Tutorix 스터디 키트"를 원하므로 브라우저에서 서버까지 Api를 최대 17 번 호출해야합니다. 수십만 명의 사람들이 같은 방식으로 검색하는 상황을 생각해보십시오. 물론 10 억 개의 Api 통화가있을 수 있으므로이 10 억 개의 Api 통화 브라우저 성능을 확실히 저하시킵니다 이와 관련하여 단점을 줄이기 위해 Debouncing은 문제 해결에 도움이됩니다.
이 상황에서 Debouncing은 2 번의 키 스트로크 동안 시간 간격 (2 초 가정)을 설정합니다 .2 번의 키 스트로크 사이의 시간이 2 초를 초과하면 api 만 호출됩니다. 이 2 초 동안 사용자는 하나 이상의 문자를 입력 할 수 있습니다. Api 통화가 줄어들어 브라우저 성능이 향상되므로 키보드를 누를 때마다 디 바운싱 기능이 업데이트됩니다.
코드 :
10.Throttling
스로틀 링은 반복적으로 호출 될 때 1,000 밀리 초마다 한 번씩 원래 함수를 호출하는 함수 버전을 작성하며 빠르고 많은 수의 이벤트를 제한하는 데 사용됩니다.
코드 :
11. Lazy Load Images
Lazy Load Images는 비동기 웹 사이트에 이미지를로드하는 것을 의미하며, 브라우저의 뷰포트에 나타날 때만 이미지를로드합니다. 즉, 사용자가 화면을 아래로 스크롤하지 않은 경우 화면 하단의 그림 로드되지 않습니다.
코드 :
12. Array random disorder
종종 배열을 조정해야 할 수도 있습니다.
코드 :
예 :
13. Singleton
싱글 톤 패턴은 객체의 인스턴스 수를 하나만으로 제한하며이 단일 인스턴스를 싱글 톤이라고합니다.
싱글 톤은 상황에서 매우 유용합니다 데이터베이스 연결 풀과 같은 하나의 중앙 지점에서 시스템 전체의 작업을 조정해야하며, 풀은 연결이 계속 유지되도록 응용 프로그램에 대한 생성, 삭제 및 전체 데이터베이스 연결 수명을 관리합니다. 끊임없이
싱글 톤은 이름 충돌을 포함하여 네임 스페이스 오염을 줄임으로써 JavaScript에서 특히 중요한 전역 변수 사용을 줄입니다.
코드 :
예 :
14. JSON.stringfy 구현
이것은 JavaScript에서 매우 유용한 내장 메소드입니다. 그리고이 기능을 작업에 직접 적용해야합니다.
코드 :
예 :
출처 : https://medium.com
댓글 없음:
댓글 쓰기