더 많은 질문이 나에 의해 수집되었으며, 전년도도 있습니다. 답변은 정확하지 않습니다. 오류 나 더 나은 솔루션이 있으면 수정하십시오.
두 번째 기사 첨부 : 2014 BAT 및 주요 인터넷 회사에 대한 2014 프론트 엔드 서면 시험 인터뷰 질문 -HTML, CSS
이전 질문은 매우 기본적이며 더 많이 갈수록 더 많이 갈수록 더 깊이 더 심해집니다.
주니어 자바 스크립트 :
1. JavaScript는 어떤 종류의 언어이며 그 특성은 무엇입니까?
표준 답변이 없습니다.
2. 자바 스크립트의 데이터 유형은 무엇입니까?
기본 데이터 유형 : 문자열, 부울, 번호, 정의되지 않은, null
참조 데이터 유형 : 객체 (배열, 날짜, Regexp, 함수)
따라서 문제는 변수가 배열 데이터 유형인지 여부를 결정하는 방법입니다.
• 메소드 1. Slice () 메소드와 같은 "배열 속성"이 있는지 여부를 결정하십시오. 이 변수의 슬라이스 방법을 직접 정의 할 수 있으므로 때로는 실패합니다.
• 메소드 2. OBJ 인스턴스 어레이는 일부 IE 버전에서 잘못되었습니다.
• 방법 3. 두 방법 모두에는 취약점이 있습니다. 새로운 메소드 array.isarray ()는 호환성을 보장하기 위해 ECMA Script5에 정의되어 있습니다. 가장 좋은 방법은 다음과 같습니다
if (typeof array.isarray === "undefined") {array.isarray = function (arg) {return object.prototype.tostring.call (arg) === "[객체 배열]"}; }3. 알려진 ID가있는 입력 입력 상자 에서이 입력 상자의 입력 값을 얻고 싶습니다. 어떻게해야합니까? (제 3 자 프레임 워크 없음)
코드 사본은 다음과 같습니다. document.getElementById ( "id"). 값
4. 페이지에서 모든 확인란을 얻는 방법은 무엇입니까? (제 3 자 프레임 워크 없음)
var domlist = document.getElementsByTagName ( 'input') var checkboxlist = []; var len = domlist.length; // 로컬 변수에 대한 캐시 while (len--) {// 사용하는 동안 루프 if (domlist [len] .type == 'checkbox') {checkboxList.push (domlist [len]); }}5. 알려진 ID가있는 DIV의 HTML 컨텐츠를 XXXX로 설정하면 글꼴 색상이 검은 색으로 설정됩니다 (타사 프레임 없음).
코드 사본은 다음과 같습니다.
var dom = document.getElementById ( "id");
dom.innerhtml = "xxxx"
dom.style.color = "#000"
6. DOM 노드를 클릭하면 함수를 실행할 수 있기를 바랍니다. 우리는 무엇을해야합니까?
• DOM에서 직접 이벤트를 바인딩합니다 : <div onclick =”test ()”> </div>
• js : xxx.onclick = test에서 onclick을 통한 바인딩
• 이벤트 추가에 의한 바인딩 : addeventListener (xxx, 'click', 테스트)
문제는 JavaScript의 이벤트 스트림 모델은 무엇입니까?
• "이벤트 버블": 이벤트는 가장 구체적인 요소로 받아 들여지기 시작한 다음 단계적으로 위로 퍼져 있습니다.
• "이벤트 캡처": 이벤트는 먼저 가장 특정 노드에 의해 수신 된 다음 가장 구체적인 것까지 단계적으로 아래로 내려갑니다.
• "Dom Event Flow": 3 단계 : 이벤트 캡처, 대상 단계, 이벤트 버블
7. Ajax와 Json, 장단점은 무엇입니까?
Ajax는 웹 페이지에서 비동기 데이터 상호 작용을 구현하기위한 비동기 JavaScript 및 XML입니다.
이점:
• 페이지가 모든 컨텐츠를 과부하시키지 않고 로컬 콘텐츠를로드하여 데이터 전송량을 줄일 수 있습니다.
• 사용자 경험을 향상시키기 위해 사용자가 끊임없이 새로 고침하거나 페이지를 뛰어 넘는 것을 피하십시오.
결점:
• 검색 엔진에 친숙하지 않음 (
• Ajax에서 전면 및 후면 기능을 구현하는 비용은 높습니다.
• 요청 수가 증가 할 수 있습니다
• 크로스 도메인 문제 제한
JSON은 가벼운 데이터 교환 형식, ECMA의 하위 집합입니다.
장점 : 사람이 가볍고 읽기 쉽고 쓰기 쉽고 기계별로 쉽게 구문 분석하고 복합 데이터 유형 (배열, 객체, 문자열, 숫자)을 지원합니다.
8. 다음 코드의 출력이 무엇인지 확인하십시오. 이유를 설명하십시오.
코드 사본은 다음과 같습니다.
var a;
경고 (유형 a); // 한정되지 않은
경고 (b); // 오류를보고합니다
설명 : undefined는 값이 하나만있는 데이터 유형입니다. 이 값은 "정의되지 않은"것입니다. VAR을 사용하여 변수가 선언되지만 할당이 초기화되지 않은 경우이 변수의 값은 정의되지 않습니다. 그리고 B는 선언되지 않기 때문에 오류를보고합니다. 선언되지 않은 변수는 할당되지 않은 선언 된 변수와 다릅니다.
9. 다음 코드를보십시오. 어떤 출력이 있습니까? 이유를 설명하십시오.
코드 사본은 다음과 같습니다.
var a = null;
경고 (유형 a); //물체
설명 : NULL은 값이 하나만있는 데이터 유형 이며이 값은 NULL입니다. 그것은 널 포인터가 타겟팅되었음을 나타내므로 유형 감지를 사용하면 "객체"를 반환합니다.
10. 다음 코드를 살펴보십시오. 어떤 출력이 있습니까? 이유를 설명하십시오.
var undefined; undefined == null; // true1 == true; // true2 == true; // false0 == false; // true0 == ''; // truenan == nan; // false [] == false; // true [] ==! []; // 진실
• 정의되지 않은 것은 null과 같지만 동일하지는 않습니다 (===)
• 하나는 숫자이고 다른 하나는 문자열이면 문자열을 숫자로 변환하려고합니다.
• 부울을 0 또는 1으로 변환하십시오
• 다른 비교 수량의 유형에 따라 객체를 숫자 또는 문자열로 변환하십시오.
• 따라서 0과 빈 줄의 판단의 경우 "==="를 사용하는 것이 좋습니다. "==="는 먼저 양쪽의 값 유형을 결정하고 유형이 일치하지 않으면 FALSE가됩니다.
문제는 다음 코드를 살펴보면 출력이 무엇이며 왜 FOO의 유형입니까?
코드 사본은 다음과 같습니다.
var foo = "11"+2- "1";
Console.log (foo);
Console.log (foo typeof foo);
실행 후 FOO의 값은 111이고 foo의 유형은 숫자입니다.
코드 사본은 다음과 같습니다.
var foo = "11"+2+ "1"; // 문자열 '1'을 추가하는 것과 문자열 '1'을 빼는 것의 차이를 경험합니다.
Console.log (foo);
Console.log (foo typeof foo); 실행 후 FOO의 값은 1121 (여기서는 문자열 스 플라이 싱)이며 FOO의 유형은 문자열입니다.
11. 코드를보고 답변을 제공하십시오.
코드 사본은 다음과 같습니다.
var a = new Object ();
a.Value = 1;
b = a;
B. 값 = 2;
경고 (a.value);
답 : 2 (인용 된 데이터 유형의 세부 사항 검사)
12. 배열 var stringArray = [ "this", "is", "baidu", "캠퍼스"]는 알려져 있으며, "이것은 바이두 캠퍼스입니다"라는 경고가 있습니다.
답 : Alert (StringArray.join ( ""))
그런 다음 문제는 문자열 foo = "get-element-by-id"가 낙타 표기법 "getElementById"로 변환하는 함수를 작성한다는 것이 알려져 있습니다.
함수 콤보 (msg) {var arr = msg.split ( "-"); var len = arr.length; // 로컬 변수에 길이를 저장하면 (var i = 1; i <len; i ++) {arr [i] = arr [i] .charat (0) .touppercase ()+arr [i] .substr (1, arr [i] .length-1); } msg = arr.join ( ""); 반환 메시지;}(기본 API 조사)
13.var NumberArray = [3,6,2,4,1,5]; (기본 API 조사)
1)이 배열의 역 순서와 출력 [5,1,4,2,6,3]
2) 배열 및 출력의 하강 순서 배열 구현 [6,5,4,3,2,1]
var NumberArray = [3,6,2,4,1,5]; NumberArray.Reverse (); // 5,1,4,2,6,3NumberArray.sort (함수 (A, B) {// 6,5,4,3,2,1 반환 BA;})14. 오늘 날짜를 Yyyy-MM-DD의 형태로 출력하십시오. 예를 들어, 오늘은 2014 년 9 월 26 일, 출력 2014-09-26
var d = new date (); // 연도를 얻습니다. '0' + Month : Month; // 하루를 받으십시오. var day = d.getDate (); day = day <10? '0' + Day : Day; Alert (Year + '-' + Month + '-' + Day);
15. 문자열에서 {$ id}를 교체하십시오 "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>"는 10으로, 그리고 {$ name}은 Tony (정규 표현식 사용)를 대체합니다.
답 : "<tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>". 교체 (/{/$ id}/g, '10'). 대체 (/{/$ name}/g, 'tony');
16. 페이지 출력의 안전을 보장하기 위해서는 종종 특수 문자를 피해야합니다. EscapeHtml 및 Escape <,>, &, "기능을 작성하십시오."
함수 ESCAPEHTML (str) {return str.replace (/[<> "&]/g, function (match) {switch"{case "<": return "<"; case ">": return ">"; case "&"; case "/": return ";}});}17.foo = foo || bar,이 코드 줄은 무엇을 의미합니까? 왜 이런 식으로 쓰나요?
답 : if (! foo) foo = bar; // foo가 존재하면 값은 변경되지 않으며, 그렇지 않으면 막대 값이 foo에 할당됩니다.
단락 표현 : "&&"및 "||"의 오페라 표현식으로서 연산자, 이러한 표현이 평가되면 최종 결과가 참 또는 거짓으로 결정될 수있는 한 평가 프로세스가 종료됩니다. 이를 단락 평가라고합니다.
18. 다음 코드를 살펴보면 출력은 무엇입니까? (가변 선언 강화)
코드 사본은 다음과 같습니다.
var foo = 1;
기능(){
Console.log (foo);
var foo = 2;
Console.log (foo);
}
답변 : 출력 undefined 및 2. 위의 코드는 다음과 같습니다.
var foo = 1; function () {var foo; Console.log (foo); // 정의되지 않은 foo = 2; Console.log (foo); // 2; }기능 선언 및 변수 선언은 JavaScript 엔진에 의해 현재 범위의 최상위로 암시 적으로 촉진되지만 이름을 홍보하는 것은 할당 부분을 홍보하지 않습니다.
19. JS를 사용하여 10에서 100 사이의 10 숫자를 무작위로 선택하고 배열에 저장 한 다음 정렬하십시오.
var iarray = []; 함수 getrandom (start, iend) {var icoice = isstart -iend +1; return math.floor (math.random () * ichoice+isstart;} for (var i = 0; i <10; i ++) {iarray.push (getrandom (10,100));} iarray.sort ();20. 두 숫자를 결합하고 두 번째 요소를 삭제하십시오.
코드 사본은 다음과 같습니다.
var array1 = [ 'a', 'b', 'c'];
var barray = [ 'd', 'e', 'f'];
var carray = array1.concat (barray);
Carray.splice (1,1);
21. 추가, 제거, 이동, 복사, 작성 및 노드 (Native J, 실제 기본 사항, 모든 단계의 세부적인 글씨 없음)
1) 새 노드를 만듭니다
createCumentFragment () // dom 조각을 만듭니다
CreateElement () // 특정 요소를 만듭니다
createTextNode () // 텍스트 노드를 만듭니다
2) 추가, 제거, 교체, 삽입
부록 () // 추가
removeChild () // 제거
REPLACECHILD () // 교체
insertbefore () // 삽입
3) 검색
getElementsByTagName () // 태그 이름으로
getElementsByName () // 요소의 이름 속성 값이 전달됩니다.
getElementById () // 요소 ID, 독창성을 통해
22. http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e가 있습니다. JS 프로그램을 작성하여 URL에서 각 GET 매개 변수를 추출하고 (매개 변수 이름과 매개 변수 수는 불확실합니다), {a : '1', b : '2', c : ','xxx ', e : unfefined}와 같은 {a :'1 ', b :'2 ','2 '와 같은 키 값 형태의 JSON 구조로 json 구조로 반환하십시오.
답변:
함수 serilizeurl (url) {var result = {}; url = url.split ( "?") [1]; var map = url.split ( "&"); for (var i = 0, len = map.length; i <len; i ++) {result [map [i] .split ( "=") [0]] = map [i] .split ( "=") [1]; } 반환 결과;}23. 정규 표현 생성자 var reg = new Regexp ( "xxx")와 정규 표현 문자 그럴 var reg = //의 차이점은 무엇입니까? 정규 표현식 일치 사서함?
답변 : regexp () 생성자를 사용할 때는 따옴표를 피할 필요가있을뿐만 아니라 (예 : /"평균"), 또한 백 슬래시 (예 : //)도 두 배로 늘어야합니다 (예 : //). 정규식 리터럴을 사용하는 것이 더 효율적입니다.
정기적 인 이메일 매칭 :
코드 사본은 다음과 같습니다. var regmail = /^(십시오 a-za-z0-9_- ]) +@(십시오@(A-Za-Z0-9_- ])) +((
24. 다음 코드를보고 출력 결과를 제공하십시오.
코드 사본은 다음과 같습니다.
for (var i = 1; i <= 3; i ++) {
settimeout (function () {
Console.log (i);
}, 0);
};
답 : 4 4 4.
원인 : JavaScript 이벤트 프로세서는 스레드가 유휴 상태가 될 때까지 실행되지 않습니다. 문제는 위의 코드 출력 1 2 3을 만드는 방법입니다.
for (var i = 1; i <= 3; i ++) {settimeout ((함수 (a) {// 함수 console.log (a);}) (i), 0)를 즉시 실행합니다. }; 1 // 출력 2325. 문자열 전후에 공백을 지우려면 함수를 작성하십시오. (모든 브라우저와 호환)
호환성을 고려하여 내장 인터페이스 Trim ()을 사용하십시오.
if (! string.prototype.trim) {String.prototype.trim = function () {return this.replace (/^/s+/, "") .replace (// s+$/, ""); }} // 함수 테스트 var str = " /t /n test string".trim (); 경고 (str == "테스트 문자열"); // "true"알림26. JavaScript에서 Callee와 발신자의 역할은 무엇입니까?
답변:
발신자는 현재 함수를 호출하는 함수에 대한 참조를 반환합니다.
Callee는 실행중인 함수 기능, 즉 지정된 기능 객체의 본문을 반환합니다.
그래서 질문은? 한 쌍의 토끼가 매달 한 쌍의 토끼를 낳는다면; 한 쌍의 새로운 토끼는 두 번째 달의 토끼를 낳을 것입니다. 각각의 토끼 쌍이 한 쌍의 암컷과 1 명의 남성이라고 가정하면, N 개월에 한 쌍의 토끼가 번식 할 수 있습니까? (Callee를 사용하여 완료하십시오)
var result = []; 함수 fn (n) {// 일반적인 피보나치 시퀀스 if (n == 1) {return 1; } else if (n == 2) {return 1; } else {if (result [n]) {return result [n]; } else {//argument.callee ()는 fn () result [n] = arguments.callee (n-1)+arguments.callee (n-2); 반환 결과 [n]; }}}중간 자바 스크립트 :
1. 5 가지 주요 데이터 유형을 JavaScript (번호, 문자열, 객체, 배열, 부울 포함)로 복사 할 수있는 함수 클론 구현
• 검색 지점 1 : 기본 데이터 유형과 참조 데이터 유형의 차이가 메모리에 저장되어 있는지 확실합니까?
• 검색 지점 2 : 변수의 유형을 결정하는 방법을 알고 있습니까?
• 검사 지점 3 : 재귀 알고리즘 설계
// 메소드 1 : Object.Prototype.clone = function () {var o = this.constructor === 배열? [] : {}; for (var e) {o [e] =이 [e] === "object"를 입력합니까? 이 [e] .clone () : this [e]; } return o;} // 메소드 2 :/** * 객체를 복제 * @param obj * @returns */function clone (obj) {var buf; if (obj instanceof array) {buf = []; // 빈 배열 생성 var i = obj.length; while (i-) {buf [i] = 클론 (obj [i]); } return buf; } else if (obj instanceof object) {buf = {}; // (obj의 var k)에 대한 빈 객체를 만듭니다 {//이 객체에 새 속성을 추가합니다 buf [k] = clone (obj [k]); } return buf; } else {// 일반 변수는 직접 return obj를 할당합니다. }}2. 배열에서 중복 요소를 제거하는 방법은 무엇입니까?
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,25,4]; 함수 derepeat () {var newarr = []; var obj = {}; var index = 0; var l = arr.length; for (var i = 0; i <l; i ++) {if (obj [arr [i]] == undefined) {obj [arr [i]] = 1; newarr [index ++] = arr [i]; } else if (obj [arr [i] == 1) 계속; } return newarr; } var newarr2 = derepeat (arr); 경고 (NewArr2); // 출력 1,2,3,4,5,6,9,253. Xiaoxian은 귀여운 강아지 (개)이며 비명은 매우 좋습니다. 그는 주인을 볼 때마다 비명을 지 릅니다 (Yelp). 이 설명에서 다음 객체를 얻을 수 있습니다.
function dog () {this.wow = function () {alert ( 'wow'); } this.yelp = function () {this.wow (); }}Xiaoxian과 마찬가지로, Xiaomang은 귀여운 강아지로 밝혀졌지만 갑자기 어느 날 그는 미쳤다 (Maddog)에 갔다. 그리고 누군가가 누군가를 보았을 때, 그는 비명을 지르고 (와우)를 계속 부르고 반 초마다 (Yelp)를 계속 부를 것이다. 코드를 사용하여 설명에 따라 구현하십시오. (상속, 프로토 타입, SetInterval)
답변:
함수 maddog () {this.yelp = function () {var self = this; setInterVal (function () {self.wow ();}, 500); }} maddog.prototype = new Dog (); // testvar dog = new dog (); dog.yelp (); var maddog = new maddog (); maddog.yelp ();4. 다음 UL, 각 열을 클릭 할 때 인덱스를 경고하는 방법은 무엇입니까? (폐쇄)
코드 사본은 다음과 같습니다.
<ul id =”테스트”>
<li> 이것은 첫 번째 </li>입니다
<li> 이것은 두 번째 </li>입니다
<li> 이것은 세 번째 항목입니다 </li>
</ul>
답변:
// 메소드 1 : var lis = document.getElementById ( '2223'). getElementsByTagName ( 'li'); for (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .onclick = function () {alert (this.index); };} // 메소드 2 : var lis = document.getElementById ( '2223'). getElementsByTagName ( 'li'); for (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .onclick = (function (a) {return function () {alert (a);}} (i);}5. JavaScript 함수를 작성하고 지정된 유형의 선택기를 입력하십시오 (ID, 클래스 및 태그 이름과 호환 가능한 조합 선택기가 필요하지 않은 3 개의 간단한 CSS 선택기 만 필요).
/*** @param selector {String} 들어오는 CSS 선택기. * @return {array}*/
답변 : (너무 길고 클릭하여 열기)
var query = function (selector) {var reg = /^(#)?(/.)?(/w+)$/img; var regresult = reg.exec (선택기); var result = []; // ID 선택자 인 경우 (rasesult [1]) {if (regresult [3]) {if (typeof document.querySelector === "function") {result.push (document.querySelector (recesult [3]); } else {result.push (document.getElementById (rasesult [3]); }}} // 클래스 선택기 인 경우 else if (rasesult [2]) {if (regesult [3]) {if (if (typeof oxport.getElementSbyClassName === 'function') {var doms = document.getElementSyClassName (regesult [3]); if (doms) {result = convertoArray (doms); }} // getElementsByClassName 함수가 지원되지 않는 경우 {var alldoms = document.getElementsByTagName ( "*"); for (var i = 0, len = alldoms.length; i <len; i ++) {if (alldoms [i] .classname.search (new regexp (regresult [2]))> -1) {result.push (alldoms [i]); }}}}}}}} // 태그 선택기 인 경우 else if (rasesult [3]) {var doms = document.getElementsByTagName (regresult [3] .TolowerCase ()); if (doms) {result = convertToArray (doms); }} 반환 결과; } 함수 convertToArray (노드) {var array = null; try {array = array.prototype.slice.call (nodes, 0); // nonie 브라우저의 경우 // catch (ex) {array = new array (); for (var i = 0, len = nodes.length; i <len; i ++) {array.push (nodes [i])} return array; }6. 다음 코드를 평가하고 개선을위한 제안을하십시오.
if (winde };} else if (document.all) {addListener = function (el, type, listener) {el.attacheVent ( "on"+type, function () {Learer.Apply (el);}); }}평가하다:
• AddListener 함수는 IF 및 Else 문에서 선언되어서는 안됩니다. 먼저 선언해야합니다.
• Window.AdDeventListener 또는 Document.all을 사용할 필요가 없습니다. 브라우저를 감지하려면 기능 감지를 사용해야합니다.
• autdevent는 IE 에서이 포인팅 문제가 있으므로 호출 할 때 처리해야합니다.
개선은 다음과 같습니다.
function addevent (elem, type, handler) {if (elem.addeventListener) {elem.addeventListener (유형, 핸들러, 거짓); } else if (elem.attachevent) {elem [ 'temp' + type + handler] = handler; elem [type + handler] = function () {elem [ 'temp' + type + handler] .apply (elem); }; elem.attachevent ( 'on' + type, elem [type + handler]); } else {elem [ 'on' + type] = handler; }}7. 문자열 객체에 메소드를 추가하고 문자열 유형 매개 변수를 전달한 다음 문자열의 각 문자 사이의 가격 공간을 다음과 같습니다.
AddSpace ( "Hello World") //-> 'HelloWorld D'
코드 사본은 다음과 같습니다.
String.prototype.spacify = function () {
reply this.split ( ''). join ( '');
};
그런 다음 위의 질문에 대답 한 다음 질문입니다
1) 객체의 프로토 타입에 메소드를 직접 추가하는 것이 안전합니까? 특히 객체 객체에서. (나는 이것에 대답 할 수 없습니까? 내가 아는 것을 말할 수 있기를 바랍니다.)
2) 함수 선언과 함수 표현식의 차이점은 무엇입니까?
답변 : JavaScript에서 파서가 데이터를 실행 환경에로드 할 때 기능 선언 및 기능 표현을 동일하게 처리하지 않습니다. 파서는 코드를 실행하기 전에 기능 선언을 읽고 사용할 수있게합니다 (액세스 가능). 함수 표현식의 경우, 파서가 구문 분석 및 실행되기 전에 위치한 코드 라인에 실행될 때까지 기다려야합니다. (기능 선언 프로모션)
8. Console.log 메소드를 프록시 할 수 있도록 로그 메소드를 정의하십시오.
실행 가능한 방법 :
코드 사본은 다음과 같습니다.
함수 로그 (msg) {
Console.log (MSG);
}
로그 ( "Hello World!") // Hello World!
여러 매개 변수를 전달하려면 어떻게해야합니까? 분명히 위의 방법은 요구 사항을 충족 할 수 없으므로 더 나은 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
함수 log () {
console.log.apply (콘솔, 인수);
};
따라서 문제는 적용 및 통화 방법의 유사점과 차이점은 무엇입니까?
답변:
적용 및 호출의 두 기능은 동일합니다. 즉, 하나의 객체 메소드를 호출하고 현재 객체를 다른 객체로 바꾸는 것입니다. 기능의 객체 컨텍스트를 초기 컨텍스트에서 thisobj가 지정한 새 개체로 변경합니다.
그러나 둘 사이의 매개 변수에는 차이가 있습니다. 첫 번째 매개 변수의 의미는 동일하지만 두 번째 매개 변수의 경우 Apply는 여러 매개 변수를 배열로 결합하고 호출이 호출의 매개 변수로 전달됩니다 (두 번째 매개 변수에서 시작). 예를 들어, func.call (func1, var1, var2, var3)에 해당하는 적용 쓰기 방법은 다음과 같습니다. func.apply (func1, [var1, var2, var3]).
9. JavaScript의 의사 배열은 무엇입니까? 의사 배열을 표준 어레이로 변환하는 방법은 무엇입니까?
답변:
Pseudo-Array (클래스 배열) : 배열 메소드를 직접 호출하거나 길이 속성의 특수 동작을 기대할 수는 없지만 실제 배열 트래버스 방법에서도이를 통과 할 수 있습니다. 일반적으로 함수의 인수 매개 변수는 getElementsByTagName, Document.ChildNodes 등이라고도하며, 모두 의사 배열에 속하는 NODELIST 객체를 반환합니다. 배열은 Array.prototype.slice.call (fakearray)을 사용하여 실제 배열 객체로 변환 할 수 있습니다.
우리가 여덟 번째 질문 줄기를 따르고 있다고 가정하면 'Hello World!'와 같은 각 로그 방법에 "(APP) 접두사를 추가해야합니다. -> '(app) Hello World!'. 이 방법은 다음과 같습니다.
함수 log () {var args = array.prototype.slice.call (arguments); // 시프트 어레이 메소드를 사용하려면 인수를 실제 배열 args.unshift ( '(app)'로 변환합니다. Console.log.apply (콘솔, Args); };10. 범위 컨텍스트와 이것을 이해하려면 다음 코드를 참조하십시오.
var user = {count : 1, getCount : function () {return this.count; }}; console.log (user.getCount ()); // what? var func = user.getCount; console.log (func ()); // 무엇?두 콘솔의 출력은 무엇입니까? 왜?
대답은 1이고 정의되지 않았습니다.
FUNC는 WinODW의 맥락에서 실행되므로 카운트 속성에 액세스 할 수 없습니다.
문제는 UESR이 항상 FUNC의 컨텍스트에 액세스 할 수 있도록하는 방법, 즉 올바르게 반환하는 방법입니다.
답 : 올바른 방법은 function.prototype.bind를 사용하는 것입니다. 각 브라우저의 완전한 코드와 호환됩니다.
function.prototype.bind = function.prototype.bind || 함수 (컨텍스트) {var self = this; return function () {return self.Apply (컨텍스트, 인수); };} var func = user.getCount.bind (user); console.log (func ());11. 기본 JS 창의 차이점은 무엇입니까? 기본 J를 사용하여 JQ의 준비 방법을 구현하는 방법은 무엇입니까?
Window.onload () 메소드는 페이지의 이미지를 포함한 모든 요소가 실행되기 전에로드 될 때까지 기다려야합니다.
DOM 구조가 그려진 후 $ (document) .ready ()가 실행되며로드 될 때까지 기다릴 필요가 없습니다.
/ * * 문서가 radey () *로 전달되고 작업을 위해 준비되면, 기능은 문서의 메소드로 호출됩니다. */var whenready = () {//이 함수는 whaneplation () function var funcs = []; // 이벤트가 실행되면 var vally; handler (e) {if (ready) 반환; // 이벤트 핸들러가 완전히 실행되는지 확인하십시오. 이 함수의 호출은 더 많은 함수를 등록 할 수 있습니다 (var i = 0; i <funcs.length; i ++) {funcs [i] .call (document)} // 이벤트 핸들러는 완전하게 실행되며 준비 상태를 전환하고 준비된 모든 기능을 제거합니다. funcs = null; } // 수신 된 모든 이벤트에 대한 핸들러를 등록합니다 (document.adeventListener) {docum document.addeventListener ( 'ReadyStateChange', handler, false); // IE9+ Window.AdDeventListener ( 'load', handler, false); } else if (docut window.attachevent ( 'onload', handler); } // retracy (repord readready () 함수 reporte (fn) {if (ready) {fn.call (document); } else {funcs.push (fn); }}}) ();위의 코드가 이해하기 어려운 경우 다음의 단순화 된 버전입니다.
function Ready (fn) {if (document.adeventListener) {// 표준 브라우저 문서. AddeventListener ( 'domcontentLoaded', function () {// login event document.removeEventListener ( 'domcontentloaded', arguments.callee, false); // explice); } else if (document.attachevent) {// ee document.attacheVent ( 'on readreadStateChange', function () {if (document.readyState == '완료') {document.detachevent ( 'on on readreadStateChange', arguments.callee); fn (); // 함수 실행}); }};12. (디자인 질문) 페이지의 특정 노드에서 드래그를 구현하고 싶습니까? 어떻게해야합니까? (기본 JS 사용)
개념에 답하십시오. 여기 몇 가지 핵심 사항이 있습니다.
1. Mousedown, MouseMove, 마우스 업 이벤트를 드래그 해야하는 노드에 이벤트
2. Mousedown 이벤트가 트리거 된 후 드래그 및 드래그를 시작하십시오.
3. MouseMove는 Event.ClientX 및 클라이언트를 통해 드래그 위치를 얻고 실시간으로 위치를 업데이트해야합니다.
4. 마우스 업이있을 때 드래그 앤 드롭이 끝납니다
5. 브라우저 경계에주의하십시오
13.
함수 setCookie (이름, 값, 일) {// 쿠키 var exp = new Date ()에 시간 변수를 추가합니다. exp.settime (exp.gettime () + 일*24*60*60*1000); // 만료 시간을 docle.cookie = name + "=" + Escape (value) + "; 만료 =" + exp.togmtstring (); } 함수 getCookie (이름) {var result = ""; var myCookie = ""+Document.Cookie+";"; var searchName = "+name+"= "; var startOfCookie (name) {var result =" "; var myCookie =" "+document.Cookie+"; "; var searchName ="+name+"="; var startOfCookie = myCookie.IndexOf (searchName); var endofcookie; if (satrtofCookie! = -1) {startOfCookie += searchName.length; endofcookie = myCookie.indexOf ( ";", startOfCookie); 결과 = (MyCookie.SubString (startOfCookie, endofcookie)); } return result;} (function () {var otips = document.getElementById ( 'tips'); // 팁의 ID가 팁이라고 가정합니다. 팁 var page = {check : function () {// 팁 '쿠키가 존재하는지 확인하고 var 팁 (! tips'); 팁 ')이라는 팁'); // 팁 ') "never_show_again"), hidetip}, function (bnever) {if (bnever) setCookie ( '팁', 'never_show_again', 365); init} {var _this = {_this.showtip ();14. 다음 기능의 기능은 무엇입니까? 빈 구역에 무엇을 채워야합니까?
// 정의 (함수 (창) {function fn (str) {this.str = str;} fn.prototyp.format = function () {var arg = ______; return this.str.replace (_____, function (a, b) {return arg [b] || ";});} 창). fn ( '<p> <a href = "{0}"> {1} </a> <span> {2} </span> </p>');답변 : 함수에 액세스하는 목적은 형식 함수를 사용하여 {0}과 같은 함수의 매개 변수를 대체하고 형식화 된 결과를 반환하는 것입니다.
첫 번째 빈은 다음과 같습니다. 인수
두 번째 빈은 // {(/d+)/}/ig입니다
15. 객체 지향 JavaScript를 사용하여 자신을 소개하십시오. (대답 없음, 직접 시도해보세요)
답변 : Object 또는 JSON은 좋은 선택입니다.
16. 기본 J에 의해 Ajax를 구현하는 원리를 설명하십시오.
Ajax의 전체 이름은 비동기 JavaScript 및 XML입니다. 그중에서도 비동기식은 비동기식을 의미하며, 이는 전통적인 웹 개발에 사용되는 동기화 방법과 다릅니다.
AJAX의 원칙은 단순히 XMLHTTPREQUEST 객체를 사용하여 서버에 비동기 요청을 보내고 서버에서 데이터를 얻은 다음 JavaScript를 사용하여 DOM을 작동하여 페이지를 업데이트하는 것입니다.
xmlhttprequest는 Ajax의 핵심 메커니즘입니다. IE5에서 처음 소개되었으며 비동기 요청을 지원하는 기술입니다. 간단히 말해서 JavaScript는 사용자를 차단하지 않고도 서버에 대한 요청 및 프로세스 응답을 즉시 작성할 수 있습니다. 새로 고침 효과를 얻지 마십시오.
xmlhttprequest 객체의 속성은 다음과 같습니다.
• OnreadyStatechang 각 주 변경에 의해 트리거 된 이벤트 핸들러.
• ResponseText는 서버 프로세스에서 문자열 양식의 데이터를 반환합니다.
• ResponseXML DOM과 호환 문서 데이터 개체가 서버 프로세스에서 반환되었습니다.
• 공통 404 (찾을 수 없음) 및 200 (준비)과 같은 서버에서 반환 된 상태 숫자 코드
• 상태 코드와 함께 상태 텍스트 문자열 정보
• readystate 객체 상태 값
• 0 (초기화되지 않은) 객체가 설정되었지만 초기화되지 않았습니다 (열린 메소드가 호출되지 않았습니다)
• 1 (초기화) 객체가 설정되었고 Send 메소드가 아직 호출되지 않았습니다.
• 2 (데이터 보내기) 보내기 메소드가 호출되었지만 현재 상태 및 HTTP 헤더는 알 수 없습니다.
• 3 (데이터 전송) 응답 및 HTTP 헤더가 불완전하기 때문에 일부 데이터가 수신되었으므로 응답 바디 및 responseText가 얻을 때 오류가 발생합니다.
• 4 (완료) 데이터가 수신되고 완전한 응답 데이터는 responsexml 및 responseetext를 통해 얻을 수 있습니다.
다음은 기능의 간단한 캡슐화입니다. (약간 길고 클릭하여 열려면)
ajax ({url : "./testxhr.aspx", // 요청 주소 유형 : "post", // 요청 메소드 데이터 : {name : "super", age : 20}, // Age : 20}, // "JSON", "JSON", "JSON"{// code, XML), faill : faill : plactured}); 함수 ajax (옵션) {옵션 = 옵션 || {}; 옵션 .type = (옵션 .type || "get"). touppercase (); 옵션 .datatype = 옵션 .datatype || "JSON"; var params = formatparams (옵션 .data); // 생성 - 비이6 -1 단계 if (wind } else {// IE6 이하 브라우저 var xhr = new ActiveXobject ( 'microsoft.xmlhttp'); } // 수신 - 3 단계 xhr.onreadystatechange = function () {if (xhr.readystate == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && 옵션 .success (xhr.responsetext, xhr.responsexml); } else {옵션 .fail && 옵션 .fail (상태); }}} // Connect and Send -2 단계 if (옵션 .type == "get") {xhr.open ( "get", Options.url + "?" + params, true); xhr.send (null); } else if (Options.Type == "post") {xhr.open ( "post", option.url, true); // XHR.SetRequestHeader 양식을 제출할 때 컨텐츠 유형을 설정합니다 ( "Content-Type", "Application/X-www-form-urlencoded"); xhr.send (params); }} // 형식 매개 변수 함수 형식 파람 (data) {var arr = []; for (data의 var name) {arr.push (encodeUricomponent (name) + "=" + encodeUricomponent (data [name])); } arr.push (( "v =" + math.random ()). 교체 ( "."); arr.join ( "&")을 반환합니다. }위의 코드는 Ajax 프로세스를 대략 설명하며 설명은 스스로 검색됩니다. 질문은 끝나지 않았습니다. JSONP와 PJAX가 무엇인지 아십니까?
답변:
JSONP : (패딩이있는 JSON)는 크로스 도메인 요청 방법입니다. 주요 원칙은 스크립트 태그를 도메인에서 요청할 수있는 기능을 활용하는 것입니다. SRC 속성은 요청을 서버로 보내고 서버는 JS 코드를 반환하고 웹 페이지는 응답을 수락 한 다음 직접 실행합니다. 이것은 스크립트 태그를 통해 외부 파일을 참조하는 원칙과 동일합니다. JSONP는 콜백 함수와 데이터의 두 부분으로 구성됩니다. 콜백 함수는 일반적으로 웹 페이지에 의해 제어되며 매개 변수로 서버쪽으로 전송됩니다. 서버 측은 기능과 데이터를 문자열로 철자하고 반환합니다.
pjax : pjax는 ajax+history.pushstate를 기반으로 한 새로운 기술입니다. This technology can change the content of a page without refresh and can change the URL of the page. (Keypoint: It can implement back functions that cannot be achieved by ajax) pjax is an encapsulation of ajax+pushState, and supports local storage, animation and other functions. Currently, it supports various versions such as jquery, qwrap, kissy, etc.
觉得题目还ok的亲点个推荐哦，题量会不断增加。
你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
原文：http://www.cnblogs.com/coco1s/p/4029708.html