Part1 필기 코드
현장 필기 코드는 오늘날 인터뷰에서 매우 일반적인 유형의 인터뷰 질문으로 기본 데이터 구조 및 알고리즘 기능을 검사합니다.
1. 배열 중복 제거 구현
기본 배열 중복 제거
Array.prototype.unique = function () {var result = []; this.foreach (function (v) {if (result.indexof (v) <0) {result.push (v);}}); 반환 결과;}• 해시 테이블을 사용하여 중간으로 공간을 교환하는 방법입니다.
Array.prototype.unique = function () {var result = [], hash = {}; this.foreach (function (v) {if (! hash [v]) {hash [v] = true; result.push (v);}}); 반환 결과;}위의 방법에는 버그가 있습니다. 배열 [1,2, '1', '2', 3]의 경우 중복 복제 결과는 [1,2,3]입니다. 그 이유는 객체가 인덱스가 인덱스 될 때 객체가 속성 인덱스를 시전하기 때문입니다. ARR [ '1'] 및 ARR [1]은 모두 ARR [1]의 값을 얻으므로 일부 변경 사항을 수행해야합니다.
Array.prototype.unique = function () {var result = [], hash = {}; this.foreach (function (v) {var type = typeof (v); // 요소 유형 HASH [v] || (hash [v] = new Array ()); if (hash [v] .indexof (type) <0) {hash [v] .push (type); // storage type result.push (v)); 반환 결과;}• 먼저 정렬 한 다음 반복을 제거하십시오
Array.prototype.unique = function () {var result = [this [0]]; this.sort (); this.foreach (function (v) {v! = result [result.length -1] && result.push (v); // 결과의 마지막 요소와 만 비교);}2 빠른 정렬 구현
메소드 1 (가능한 한 JS 배열 메소드를 사용하지 마십시오) :
함수 QuickSort (ARR) {QSORT (ARR, 0, ARR.LENGTH -1);} 함수 QSORT (ARR, LOW, HIGH) {if (낮음 <High) {var partKey = 파티션 (ARR, LOW, HIGH); QSORT (ARR, LOW, PARTKEY -1); QSORT (ARR, PARTKEY + 1, HIGH); }} 함수 파티션 (ARR, LOW, HIGH) {var key = ARR [LOW]; // 첫 번째 요소를 분류 기준으로 사용하십시오. ARR [LOW] = ARR [High]; while (low <high && arr [low] <= arr [key]) low ++; ARR [High] = ARR [낮음]; } arr [low] = 키; 로우 리턴;}방법 2 (JS 배열 메소드 사용) :
함수 QuickSort (ARR) {if (arr.length <= 1) return arr; var index = math.floor (arr.length/2); var key = arr.splice (index, 1) [0]; var 왼쪽 = [], 오른쪽 = []; arr.foreach (function (v) {v <= key? left.push (v) : right.push (v);}); recidsort (왼쪽) .concat ([키], QuickSort (오른쪽));}또한, 빠른 정렬 O (nlogn)의 평균 시간 복잡성은 질서 정연한 경우이고, 시간 복잡성은 n이며, 빠른 정렬은 불안정하다는 점에 유의해야합니다.
Part2 JavaScript 관련
1 JavaScript 기본 데이터 유형
JavaScript 데이터 유형에는 원시 유형 및 기준 유형이 포함되며 5 가지 원시 유형이 있습니다.
숫자 (값) 문자열 (문자열) 부울 (부울) 널 (빈) 정의되지 않은 (정의되지 않은)
참조 유형이 있습니다.
객체 (객체)
유형 (x)을 통해 변수 x의 데이터 유형 "번호", "String", "boolean", "undefined"및 "object"를 반환 할 수 있습니다. 여기에 주목할만한 점 : 연산자 유형은 널 유형의 객체를 반환합니다.
"JavaScript Advanced Programming":
이것은 실제로 JavaScript의 초기 구현에서 나중에 ECMAScript에서 사용한 버그입니다. Null은 이제 물체의 자리 표시 자로 간주 되므로이 모순을 설명합니다. 그러나 기술적으로 그것은 여전히 원래 가치입니다.
2 JavaScrip 스코프 체인에 대해 이야기하십시오
JavaScript 코드 (글로벌 코드 또는 함수)를 실행할 때 JavaScript 엔진은 실행 컨텍스트라고도하는 범위를 생성합니다. 페이지가로드되면 글로벌 범위가 먼저 생성되고 각 함수가 실행되면 해당 범위가 설정되어 스코프 체인이 형성됩니다. 각 스코프에는 해당 스코프 체인이 있고 체인의 헤드는 글로벌 범위이며 체인의 꼬리는 현재 기능 범위입니다.
범위 체인의 목적은 식별자를 구문 분석하는 것입니다. 함수가 만들어지면 (실행되지 않음),이, 인수, 이름이 매개 변수 및 함수의 모든 로컬 변수가 현재 범위에 추가됩니다. JavaScript가 변수 x (이 프로세스가 변수 해상도라고 함)를 찾아야하는 경우, 먼저 스코프 체인, 즉 현재 스코프의 체인 끝에서 X 속성이 있는지 여부를 검색합니다. 발견되지 않으면 체인 헤드, 즉 글로벌 스코프 체인 및 변수가 발견되지 않을 때까지 스코프 체인을 따라 계속 검색하십시오.이 코드의 스코프 체인에는 X 변수가없고 참조 오류 (참조 오류) 예외가 발생한다고 생각됩니다.
3 JavaScript 프로토 타입 체인을 이해하는 방법
JavaScript의 각 객체에는 프로토 타입 속성이 있으며 프로토 타입이라고하며 프로토 타입의 값도 객체이므로 프로토 타입 체인을 연결하는 자체 프로토 타입도 있습니다. 프로토 타입 체인의 헤더는 물체이며, 프로토 타입은 널의 값을 가진 비교적 특별합니다.
프로토 타입 체인의 기능은 물체 상속에 사용됩니다. 기능 A의 프로토 타입 속성은 객체입니다. 이 함수가 인스턴스를 생성하기 위해 생성자로 사용되면 함수의 프로토 타입 속성은 모든 객체 인스턴스에 프로토 타입으로 할당됩니다. 예를 들어, 새 배열을 만들면 배열 방법이 배열의 프로토 타입에서 상속됩니다.
객체의 속성에 액세스 할 때 객체 자체를 먼저 찾아서 찾은 경우 리턴하십시오. 찾을 수없는 경우 프로토 타입 객체의 특성을 계속 찾으십시오 (아직 찾을 수없는 경우 실제로 프로토 타입 체인을 따라 루트까지 위쪽으로 검색합니다). 덮어 쓰지 않는 한, 객체 프로토 타입의 특성은 모든 인스턴스에서 찾을 수 있으며 전체 프로토 타입 체인을 찾을 수없는 경우 정의되지 않은 반환됩니다.
4 JavaScript 변수 선언 미리
JavaScript에 대한 권위있는 안내서는 다음과 같이 설명합니다. JavaScript 변수는 선언 전에 사용할 수 있으며 JavaScript의 기능은 비공식적으로 호이 스팅이라고합니다.
예에서 :
var scope = "global"; function myfunc () {console.log (scope); var scope = "local";}콘솔이 인쇄 한 내용은 "글로벌"이 아니라 "정의되지 않은"것입니다. 이는 함수 myfunc의 범위에서 로컬 변수 범위 선언이 함수의 상단으로 진행되기 때문입니다. 현재 SCOPE는 값 만 선언하고 할당하지 않으므로 출력이 정의되지 않습니다. 실제로 위의 코드는 다음과 같습니다.
var scope = "global"; function myfunc () {var scope; Console.log (범위); 스코프 = "로컬";}5 자바 스크립트 폐쇄를 이해하고 적용하는 방법
폐쇄의 특정 정의에 관한 문헌에 주어진 개념은 매우 추상적입니다. 폐쇄는 다른 함수의 모든 로컬 변수에 대한 기능을 가능하게하는 구문 메커니즘이라고 생각합니다.
예를 들어:
함수 outfunc () {var name = "vicfeel"; function Ingunc () {console.log (이름); } return ingunc;} ingunc (); // 콘솔은 "Vicfeel"을 표시합니다.Outfunc의 로컬 변수 이름에 여전히 함수 유출에서 액세스 할 수 있음을 알 수 있습니다.
클로저 응용 프로그램 예, 클래스의 개인 속성을 시뮬레이션합니다. 폐쇄의 속성을 활용하면 로컬 변수는 Sayage 메소드에서만 액세스 할 수 있으며 이름도 외부에 액세스하여 클래스의 개인 속성을 구현합니다.
function user () {this.name = "vicfeel"; // 총 속성 var age = 23; // private 속성 this.sayage : function () {console.log ( "내 나이는" + age); }} var user = new user (); Console.log (user.name); // "vicfeel"console.log (user.age); // "undefined"user.sayage (); // "내 나이는 23 세"클로저에 대한 자세한 내용은 Ruan Yifeng의 네트워크 로그 -JavaScript Closure (폐쇄)를 권장합니다.
6 새로운 건축 대상의 본질
function user () {this.name = "vicfeel"; this.age = 23;} var user = new user ();새 연산자를 통해 다음 작업은 실제로 생성자 사용자에게 완료됩니다.
• 유형이 객체 인 새 개체를 만듭니다.
•이 새로운 객체의 내부, 액세스 가능 및 프로토 타입 속성을 생성자에 설정 한 것으로 설정합니다 (프로토 타입에 의해 가리키는 생성자를 참조);
• 생성자 실행;
• 새로 생성 된 개체를 반환합니다.
function user () {// this = {}; //this.constructor = 사용자; this.name = "vicfeel"; this.age = 23; // 이것을 반환합니다. } var user = 새 사용자 ();생성자가 기본적으로 새로 생성 된이 객체를 반환하면 변수가 수동으로 반환되면 변수가 원래 유형 인 경우 유효하지 않으며 객체 인 경우 반환됩니다.
7 자바 스크립트 에이전트
여러 요소에 이벤트를 추가해야 할 때는 상위 노드에 이벤트를 추가하고 이벤트를 부모 노드에 위임하여 처리 기능을 트리거 할 수 있습니다.
예를 들어, 우리는 많은 li를 ul에 동적으로 추가해야하며, 클릭 이벤트를 하나씩 추가하려면 li를 통과해야합니다.
<ul id = 'list'> </ul> var count = 100; var ullist = document.getElementById ( "List"); // 동적 구조 노드 (var i = count; i-;) {var lidom = document.createElement ( 'li'); Ullist.appendChild (Lidom); } // 바인딩 클릭 이벤트 var linode = ullist.getElementByTagName ( "li"); for (var i = 0, l = linodes.length; i <l; i ++) {linode [i] .onclick = function () {// li click event}}우리 모두 알다시피, DOM 운영은 성능이 뛰어납니다. 따라서 반복적 인 이벤트 바인딩은 단순히 성능 킬러입니다. 이벤트 프록시의 핵심 아이디어는 가능한 한 적은 바인딩을 통해 가능한 많은 이벤트를 듣는 것입니다. 어떻게해야합니까? 답은 이벤트 버블 메커니즘을 사용하여 상위 노드 UL (이벤트 버블)을 바인딩 한 다음 이벤트를 사용하여 이벤트를 트리거하는 노드를 결정하여 많은 이벤트 핸들러의 바인딩을 줄이는 것입니다.
var count = 100; var ullist = document.getElementById ( "List"); // 동적 구조 노드 (var i = count; i-;) {var lidom = document.createElement ( 'li'); Ullist.appendChild (Lidom); } // 바인딩 클릭 이벤트 var linode = ullist.getElementByTagName ( "li"); linode.onclick = function (e) {if (e.target && e.target.nodename.touppercase == "li") {// li click event}}새로운 콘텐츠가 지속적으로 업데이트됩니다 ...