닫힌 태그, 소문자 태그, 임의 중첩 없음: 검색 로봇의 검색 가능성을 높입니다.
외부 css를 사용하세요. 🎜>js, 구조적 동작 분리: 파일 다운로드 및 페이지 로딩이 더 빨라지고 더 다양한 장치에서 콘텐츠에 액세스할 수 있습니다. 코드 및 구성 요소 감소: 유지 관리가 쉽고, 수정이 쉽고, 페이지 콘텐츠를 변경할 필요가 없으며, 콘텐츠를 복사하지 않고 인쇄된 버전을 제공하고, 웹 사이트의 유용성을 향상시킵니다.
2.
Xhtml과
엄격한 주요 차이점:
1, 모든 요소는 올바르게 중첩되어야 합니다. 2, 모두 태그는 닫혀 있어야 함,
3, 태그 이름, 속성 이름은 소문자여야 함,
4, 모든 속성은 &ldquo로 묶어야 함 ;”,
5, 태그의 일부가 아닌 모든 ><&
은 인코딩된 형식이어야 합니다.
6, 모든 속성에는 값이 있어야 합니다. 7, --
<🎜이 없어야 합니다. >8 댓글에는 사진 반드시 설명문이 있어야 합니다
3. css 소개 방법은 무엇인가요? ?
링크와
@import
@import는 정확히 css입니다. 는 링크를 로드하는 방법 외에도 css를 정의할 수도 있습니다. rss , rel 속성 등을 정의합니다. @import는 css만 로드할 수 있습니다. . 2, 로딩 순서 차이: 링크 참조된 css
가 동시에 로딩됩니다. time 예,@import에서 참조하는 css는 페이지가 완전히 다운로드될 때까지 다시 로드되지 않습니다. 3, 호환성 차이, @import는 css2.1에서 제안, ie5 이상에서만 지원되며 링크에는 호환성 문제가 없습니다. 4, javascript를 사용할 때 스타일 차이를 제어하려면 dom을 사용하세요. 스타일링 시 link, @import만 사용할 수 있지만 dom<은 사용할 수 없습니다. 🎜> 제어할 수 있습니다. , @import는 css에서 다른 스타일 시트를 다시 도입할 수 있습니다. 태그 선택기, 클래스 선택기, id 선택기 가 지정된 대로 상속되지 않습니다. id>class>태그 이름 높은 우선순위 구조 레이어: html 은 html 또는 xhtml 웹 콘텐츠의 의미를 설명하기 위한 태그를 만들고 사용하는 일을 담당합니다. css css에 의해 생성됩니다. javascript javascript에 의해 생성되며 이벤트에 반응하는 방법에 대한 응답을 담당합니다. 6. 7. 즉커널), Firefox(Gecko), Google(웹킷), 오페라(프레스토) 8. 은 마우스를 이미지 위로 가져갈 때 표시되는 작은 프롬프트입니다. 대부분의 html 태그는 사라집니다. 제목을 지원하세요. 9. 사용으로 인한 이중 여백BUG float 2.3floatdislpay:inline -3px 3. 사용으로 인해 발생하는 픽셀 문제 하이퍼링크hover 클릭 후 유효하지 않음 올바른 쓰기 순서 사용방문한 링크 hover 활성화 4.즉, z-index 문제는 position:relative 5.Png를 상위 투명한 사용js코드 변경 최소키! ’ >iframe중첩8. 1px (IE6 기본 줄 높이로 인해 over:hidden,zoom:0.08 line-height:1px 사용) 10.css 재설정의 기능과 사용법을 설명하세요. Css 재설정브라우저의 기본 css 스타일을 재설정합니다. 웹사이트의 파일과 리소스를 어떻게 최적화합니까? 예상되는 솔루션에는 http 요청 수를 최소화하는 :1이 포함됩니다(파일 병합) 2 3, 추가 Expire /Cache -제어헤더 4, 활성화Gzip압축 5, css 페이지 상단에 배치 6, scrip 배치 7 페이지 하단의 css에서 Expressions 사용을 피하세요. 🎜> >8, js 및 css를 외부 파일에 넣습니다9, 축소 dns 쿼리10, 압축 javascript 및 css 11, 리디렉션 방지12, 중복 스크립트 제거 13 , 엔터티 태그 14 구성, ajax 캐시 사용 12. html이란 무엇입니까? 콘텐츠 구조(콘텐츠 의미론)에 따라 적절한 태그(코드 의미론)를 선택하여 개발자가 더 우아한 코드를 읽고 쓸 수 있도록 하는 동시에 브라우저가 크롤러의 구문 분석을 더 잘 수행할 수 있도록 합니다. 그리고 기계. 1,상위 정의높이 (장점: 코드가 적고 간단하며 익히기 쉬움; 단점: 고정 높이 요소에만 적합, 높이 불가 적응형) 2, 끝에 빈 태그를 사용하여 부동 소수점을 지웁니다. Clear:both (이점: 이론적으로, 모든 태그를 지울 수 있음 플로팅, 간단한 코드, 적은 브라우저 지원 단점: 의미 없는 태그 추가) 3, 상위 정의 의사 클래스 이후 및 zoom (장점: 우수한 브라우저 지원, 단점: 많은 코드. 두 줄의 코드를 결합해야만 주류 브라우저에서 지원할 수 있음) 4, 상위 정의 overflow:hidden (장점: 적은 코드, 단순성, 우수한 브라우저 지원; 단점: 너비 또는 zoom은 height와 동시에 정의할 수 없으며, 과 결합할 수 없습니다. position 함께 사용) , 상위 정의 overflow:auto (장점: 코드 적음, 단순성, 좋음 단점: 너비 또는 줌을 정의해야 하며 높이 정의할 수 없습니다. 내부 요소의 높이는 상위 요소를 초과하면 스크롤 막대가 나타납니다. 또한 상위 요소는 함께 부동하며 상위 요소는 display:table, br 끝에 clear:both를 추가합니다. etc 14. W3C 표준에 따라 코드를 구문 분석하고 실행하는 것을 의미합니다. 브라우저가 구문 분석하고 실행하는 방식이 다르기 때문에 코드를 실행하므로 이를 이상한 모드라고 부릅니다. 구문 분석 시 브라우저가 표준 모드를 사용하는지 이상한 모드를 사용하는지 여부는 웹 페이지의 DTD 선언과 직접적으로 관련됩니다. 표준 문서 유형(표준 모드 구문 분석) 문서 유형을 정의하면 DTD 선언, 은 웹페이지를 쿼크 모드(쿼크 모드)로 설정합니다. 표준 모드에서 IE6은 !important 문, IE7 , IE8, Firefox, Chrome 및 기타 브라우저 ; 이상한 모드에서는 IE6/7/8이 !important문을 인식하지 못합니다. 🎜> 은 웹 이미지 애플리케이션의 한 유형입니다. 처리 방법. 페이지에 포함된 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함할 수 있으므로 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 표시되지 않습니다. 페이지아이콘은 다양한 상황에 적합합니다. 모든 브라우저가 이를 알고 있습니다. firefox 9모두 즉 브라우저에서 인식 가능 차이: 우아한 저하가 복잡한 현상 유지에서 시작하여 사용자 경험의 공급을 줄이려고 하는 반면, 점진적인 향상은 매우 기본적이고 기능적인 버전에서 시작하여 미래 환경의 요구에 적응하기 위해 지속적으로 확장됩니다. 저하(기능적 쇠퇴)는 뒤를 바라보는 것을 의미하며, 점진적인 향상은 뿌리를 안전 지대에 유지하면서 앞을 내다보는 것을 의미합니다. 텍스트 변환 값: 파생 선택자( HTML 태그로 선언됨) id 선택자(DOM ID로 선언됨) 클래스 선택자 (DOM ID로 선언) 스타일 클래스 이름 선언) 속성 선택자(DOM 속성 선언 사용, CSS2에 속함, IE6에서는 지원하지 않음) , 모르더라도 일반적으로 사용되지 않음) () >하위 항목 선택자( 그룹 선택기( 하이퍼링크를 방문한 후 나타나지 않습니다. 무엇입니까? 어떻게 해결하나요? 정답: , PX의 차이점: EM은 상위 요소를 기준으로 글꼴 크기를 설정하므로 모든 요소를 설정할 수 있다는 점을 알아야 합니다. 상위 요소의 크기입니다. Rem은 루트 요소에 상대적입니다. IE6-IE8r을 제외하고 다른 브라우저는 em 및 rem 속성을 지원하며, px는 지원됩니다. 모든 브라우저에서. “px”와 “rem”을 함께 사용하고 IE6-8에서 효과를 얻으려면 “ " 브라우저의 효과를 얻으려면 24. html{ filter:alpha(opacity=50) /* 즉, 유효함*/ -moz-opacity:0.5; /* Firefox 유효*/ 불투명도: 0.5 /* 범용, 기타 브라우저 유효*/ 객체, 번호, 함수, boolean, 정의되지 않음 암시적 + - == if while for in warning 3. Split() 이 함수는 문자열을 가져온 다음 구분 기호에서 분리하여 일련의 문자열을 반환합니다. 분할은 특정 구분 기호에 따라 문자열을 여러 요소로 나누어 배열에 저장하는 것입니다. 그리고 은 배열에 있는 문자열을 긴 문자열로 연결하는 것으로 일반적으로 split의 역연산이라고 볼 수 있다. . 4. 5. 테일 삭제Unshift()헤드 추가 헤더 삭제 6. 2.매개변수가 다릅니다 3 .이벤트 추가 여부 4.이것이 질문에 포인트 7 . Var 대상 = ev. srcElement||ev.target 8. 을 사용할 때 을 요청할 때 매개변수는 URL에는 ,이 표시되며, 포스트를 활용하는 방법은 다음과 같습니다. 가상통신사에서는가 표시되지 않습니다. 2, get 메소드의 경우 서버는 Request.QueryString을 사용하여 변수 값을 가져옵니다. , post 방법의 경우 서버는 Request.Form을 사용하여 제출된 데이터를 가져옵니다. 두 방법의 매개변수는 요청을 사용하여 얻을 수 있습니다. 3, get 전송되는 데이터의 양은 적으며 2KB. 포스트는 대량의 데이터를 전송하며 일반적으로 기본적으로 제한이 없습니다. 하지만 이론적으로는 서버마다 다릅니다. , get은 보안이 매우 낮습니다.게시물이 더 안전합니다. , get 요청은 캐싱 문제에 주의해야 합니다. , post 요청 이 질문은 걱정하지 마세요. , post 요청은 Content-Type 값을 application/x-form-www-urlencoded 7 , 왜냐하면 get 요청된 매개변수는 url, 에 모두 있으므로 send 함수가 보낸 매개변수는 null이고 이며 post 요청은 send를 사용하고 있습니다. 메서드 , 에 매개변수를 주어야 합니다 : call(thisObj, 객체)정의: 현재 객체를 다른 객체로 대체하려면 객체의 메서드를 호출합니다. 참고: call call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj 에 지정된 새 객체로 변경합니다. thisObj 매개변수가 제공되지 않으면 전역 개체가 thisObj. 적용 방법: 구문: , [argArray])정의: 객체의 메소드를 적용하고 현재 객체를 다른 객체로 대체합니다. 설명: argArray 가 유효한 배열이 아니거나 인수 객체가 아닌 경우 TypeError 이 발생합니다. argArray 또는 thisObj 가 모두 제공되지 않으면 전역 객체는 thisObj로 사용되며 매개변수를 전달할 수 없습니다. eval parse 사용보안을 고려하면 parse를 사용하는 것이 더 안정적입니다. 🎜> 네이티브 개체: 호스트 환경과 관계없이 ECMAScript 구현에서 제공되는 개체입니다. 여기에는 객체, 함수, 배열, >문자열, 부울, 숫자, 날짜 , RegExp, 오류, EvalError, RangeError는 인스턴스화할 수 있습니다. 내장 개체 전역 및 수학 : ECMASscript 제공 구현에 의해 제공되고 호스트 환경과 독립적인 모든 개체는 인스턴스화할 수 없습니다. ECMAscript가 구현한 호스트 환경에서 제공하는 개체입니다. 모든 BOM 및 DOM 개체는 호스트 개체, 문서, 창 12. 문서 불러오기와 문서 준비의 차이점은 무엇인가요? 페이지가 로드되면 두 가지 이벤트가 있습니다. 하나는 ready 1.결과를 저장할 새 배열 생성2.빈 객체 생성 3. for 루프를 수행할 때마다 요소를 꺼내어 개체와 비교합니다. 요소가 반복되지 않으면 결과 배열에 저장되고 이 요소의 내용이 개체로 사용됩니다. 1에 값을 할당하고 2 단계에서 생성된 개체에 저장합니다. 14.이벤트 위임. 버블링 원리를 사용하여 부모에 이벤트를 추가하여 실행 효과를 트리거합니다. 이벤트 위임 기술을 사용하면 특정 각 노드에 이벤트 리스너를 추가하는 것을 방지할 수 있으며 대신 이벤트 리스너가 해당 상위 요소에 추가됩니다. 이벤트 리스너는 하위 요소에서 버블링되는 이벤트를 분석하고 해당 이벤트가 어느 하위 요소에서 발생하는지 알아냅니다. 15.스코프 체인. 환경에서 코드가 실행되면 변수 객체의 범위 체인(범위 체인)이 생성됩니다. 범위 체인의 목적은 실행 환경에서 액세스할 수 있는 모든 변수 및 함수에 대한 순서화된 액세스를 보장하는 것입니다. 범위 체인의 프런트 엔드는 항상 현재 실행 중인 코드가 있는 환경의 변수 개체입니다. 이 환경이 함수인 경우 활성 개체가 변수 개체로 사용됩니다. 각 함수에는 자체 실행 환경이 있습니다. 실행이 함수로 흘러 들어가면 함수 환경이 환경 스택으로 푸시되고, 함수가 실행된 후 스택은 해당 환경을 팝하고 반환합니다. 이전 실행 환경에 대한 제어입니다. 이 스택은 범위 체인입니다. 함수가 실행되면 함수(Call object), 의 실행 환경이 생성되고 해당 개체가 생성됩니다. 처음에는 연결된 목록에 배치되고 그 다음에는 상위 함수의 호출 개체를 연결하고 마지막으로 전역 개체를 연결합니다. 16. 폐쇄. 클로저는 다른 함수의 내부 변수를 읽을 수 있는 함수입니다. Javascript 언어에서는 함수 내부의 하위 함수만 지역 변수를 읽을 수 있으므로 클로저는 간단히 함수 내부에 정의된 "으로 이해될 수 있습니다. 🎜>". 따라서 본질적으로 클로저는 함수 내부와 함수 외부를 연결하는 다리입니다. 클로저는 여러 곳에서 사용될 수 있습니다. 가장 큰 용도는 두 가지인데, 하나는 함수 내부의 변수를 읽는 것이고, 다른 하나는 이러한 변수의 값을 메모리에 유지하는 것입니다. ) 클로저를 사용하면 함수의 변수가 메모리에 저장되어 많은 메모리를 소비하게 되므로 클로저를 남용할 수 없습니다. 그렇지 않으면 웹에서 성능 문제가 발생합니다. IE에서는 메모리 누수가 발생할 수 있습니다. 해결책은 함수를 종료하기 전에 사용되지 않는 모든 지역 변수를 삭제하는 것입니다. ) 클로저는 상위 함수 외부의 상위 함수 내부 변수 값을 변경합니다. 따라서 상위 함수를 객체(object)로 사용하고 클로저를 공개 메소드(공개 메소드)로 사용하면, 내부 변수를 프라이빗 속성(프라이빗 값)으로 처리합니다. 이때 부모 함수의 내부 변수 값을 임의로 변경하지 않도록 주의해야 합니다. 이벤트 버블링 및 기본 이벤트 방지 방법. javascript에 대한 동일 출처 정책. JS정렬 알고리즘. 위는 아마도 실용적인 내용이 필요해요 - 웹 프론트엔드 필기시험 문제 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
css 선택자는 무엇인가요? 어떤 속성을 상속받을 수 있나요? 우선순위는 어떻게 계산되나요? 인라인과 중요 중 어느 것이 더 높은 우선순위를 갖고 있나요?
프런트엔드 페이지는 어떤 3개의 레이어로 구성되어 있나요? 그것은 무엇입니까? 기능은 무엇입니까?
의 기본문 구성은 어떻게 되나요? 선택기, 속성, 속성값
즉
(의
제목title과 alt 속성의 차이점 🎜>태그란 무엇인가요? Alt는 어떤 이유로 이미지를 로드할 수 없을 때 페이지에 표시되는 메시지입니다. 원래 이미지가 로드되었던 위치로 바로 출력됩니다. 🎜>
에 대한 여러 솔루션 작성 1. 디스플레이
통합하고 개발을 용이하게 하려면 재설정하세요. 11.
CDN(Content Delivery Network) 사용
13.수레를 치우는 방법에는 몇 가지가 있나요? 각각의 장점과 단점은 무엇입니까?
소위 표준 모드는 브라우저가
15. CSS 스프라이트를 설명하고 이를 페이지나 웹사이트에서 어떻게 사용할 수 있는지 설명하세요.
16.CSS 해킹, 조건부 참조 또는 기타 ?에 대해 토론하세요.
19.CSS대문자?
대문자 영어병음의 첫 글자는 대문자
대문자 영어병음은 모두 대문자
소문자 영어병음은 모두 소문자20. CSS 선택자는 무엇인가요?
답변: 클릭하여 방문한 하이퍼링크 스타일에 더 이상 호버 및 활성 기능이 없습니다. 해결책은 CSS 속성의 순서를 변경하는 것입니다: L-V-H-A ( 링크, 방문, 호버, 활성)
22.브라우저에는 기본 자연 인라인 블록 요소도 있습니다(고유 크기 및 높은 너비로 설정할 수 있지만 자동으로 줄 바꿈되지는 않음), 어떤 것이 있나요?
23.px 및
emPX를 사용하여 글꼴 크기를 설정할 때 실제로는 픽셀이 더 많습니다. 안정적이고 정확합니다. 하지만 이 방법에는 문제가 있습니다. 사용자가 브라우저에서 만든 웹 페이지를 탐색할 때 브라우저의 확대/축소가 변경되면 웹 페이지의 레이아웃이 깨집니다. 이는 웹사이트의 유용성을 걱정하는 사용자에게 큰 문제입니다. 따라서 웹페이지의 글꼴을 정의하기 위해 "em"을 사용하는 것이 제안되었습니다. EM:EM은 벤치마크에 따라 글꼴 크기를 조정하는 것입니다. EM은 본질적으로 특정 숫자 값이 아닌 상대적 값입니다. 이 기술에는 일반적으로 이라는 참조점이 필요합니다. 또한 em은 상위 요소의 속성을 기준으로 계산됩니다. px와 em 사이의 변환을 계산하려면 다음이 필요합니다. 웹사이트가 좋습니다. 데이터를 입력하여 px와 em을 서로 계산할 수 있습니다. 여기를 누르세요: px 및 em 변환Rem:
}
Javascript
1. javascript의 typeof는 어떤 데이터 유형을 반환하나요?
2. 강제 유형 변환 및 2 암시적 유형 변환. 필수Number(),String(),Boolean(),Object();
과
join()의 차이점. Join() 이 함수는 문자열 배치를 가져온 다음 구분 기호 문자열과 결합하여 문자열을 반환합니다.
이벤트를 추가하는 일반적인 방법은 여러 이벤트 추가를 지원하지 않습니다. 하단 이벤트는 상단 이벤트를 덮어쓰지만 이벤트 바인딩(addEventListener
)을 통해 이벤트를 추가할 수 있습니다. 여러 개 추가하세요. 배열 방식
pop() push() unshift() Shift()Push ()테일 추가
pop()와
dom 이벤트 흐름의 차이점 ? 1.실행 순서가 다릅니다
와 표준 사이에 호환되는 작성 방법은 무엇입니까?
Var ev = ev || window.eventdocument.documentElement.clientWidth || document.body.clientWidth
의
get 및 post 방식의 차이? 1,
Get9.
call 그리고 적용의 차이점은 무엇인가요? call
메서드
10. Ajax 요청 중에 json 데이터를 구문 분석하는 방법은 무엇입니까?
javascript의 로컬 객체, 내장 객체, 호스트 객체는 무엇인가요?
로, 이미지와 기타 파일을 포함한 페이지의 모든 요소가 로드되었음을 나타냅니다. 13.배열에서 중복 항목을 제거하는 메서드를 작성하세요.
var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //测试数组
for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
if (o[s[i]]) {
count++;//重复+1
} else {
o[s[i]] = 1;//不重复设置属性
tmp.push(s[i])//加入新数组
}}
alert(count);alert(tmp)//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
e.stopPropagation(); //因此它支持W3C的stopPropagation()方法
} else {
window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
return false;
}
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault ) {
e.preventDefault(); //阻止默认浏览器动作(W3C)
} else {
window.event.returnValue = false; //IE中阻止函数器默认动作的方式
return false;
}var sort = {
debug: function(str) {
if (window.console && window.console.log) {
console.log(str);
}
},
swap: function(arr, index1, index2) { //数组数据交换
var temp = arr[index1];
arr[index1] = arr[index2];
arr[index2] = temp;
},
bubbleSort: function(arr) { //冒泡排序
this.debug("冒泡排序before:" + arr);
var len = arr.length;
for (var outer = 0; outer < len - 1; outer++) { //比较的轮数
for (var inner = 0; inner < len - outer - 1; inner++) { //每轮比较的次数
if (arr[inner] > arr[inner + 1]) {
this.swap(arr, inner, inner + 1)
}
}
this.debug("第" + (outer + 1) + "轮后:" + arr);
}
this.debug("冒泡排序after:" + arr);
},
selectionSort: function(arr) { //选择排序
this.debug("选择排序before:" + arr);
var min, len = arr.length;
for (var outer = 0; outer < len - 1; outer++) {
min = outer;
// 比较最小项目和第outer项之后的剩余数组项, 以寻找更小项
for (var inner = outer + 1; inner < len; inner++) {
if (arr[inner] < arr[min]) {
min = inner;
this.debug("min--" + min);
}
}
this.swap(arr, outer, min);
this.debug("第" + (outer + 1) + "轮后:" + arr);
}
this.debug("选择排序after:" + arr);
},
insertionSort: function(arr) { //插入排序
this.debug("插入排序before:" + arr);
var temp, inner, len = arr.length;
for (var outer = 1; outer < len; outer++) {
temp = arr[outer];
inner = outer;
while (inner > 0 && arr[inner - 1] >= temp) {
arr[inner] = arr[inner - 1];
--inner;
}
arr[inner] = temp;
}
this.debug("插入排序after:" + arr);
},
shellSort: function(arr) { //希尔排序
this.debug("希尔排序before:" + arr);
var gaps = [5, 3, 1],
temp;
for (var g = 0; g < gaps.length; g++) {
for (var i = gaps[g]; i < arr.length; i++) {
temp = arr[i];
for (var j = i; j >= gaps[g] && arr[j - gaps[g]] > temp; j -= gaps[g]) {
arr[j] = arr[j - gaps[g]];
}
arr[j] = temp;
}
}
this.debug("希尔排序after:" + arr);
},
shellSortDynamic: function(arr) { //动态计算间隔序列的希尔排序
this.debug("动态计算间隔序列的希尔排序before:" + arr);
var N = arr.length,
h = 1;
while (h < N / 3) {
h = 3 * h + 1;
}
while (h >= 1) {
for (var i = h; i < N; i++) {
for (var j = i; j >= h && arr[j] < arr[j - h]; j -= h) {
this.swap(arr, j, j - h);
}
}
h = (h - 1) / 3;
}
this.debug("动态计算间隔序列的希尔排序after:" + arr);
},
mergeSort: function(arr) { //归并排序
this.debug("归并排序before:" + arr);
var len = arr.length,
step = 1,
left,
right;
var mergeArray = function(arr, startLeft, stopLeft, startRight, stopRight) {
var rightArr = new Array(stopRight - startRight + 1),
leftArr = new Array(stopLeft - startLeft + 1),
k = startRight,
m = 0,
n = 0;
for (var i = 0; i < (rightArr.length - 1); ++i) {
rightArr[i] = arr[k];
++k;
}
k = startLeft;
for (var i = 0; i < (leftArr.length - 1); ++i) {
leftArr[i] = arr[k];
++k;
}
rightArr[rightArr.length - 1] = Infinity; //哨兵值
leftArr[leftArr.length - 1] = Infinity; //哨兵值
for (var k = startLeft; k < stopRight; ++k) {
if (leftArr[m] <= rightArr[n]) {
arr[k] = leftArr[m];
m++;
} else {
arr[k] = rightArr[n];
n++
}
}
}
if (len < 2) {
return;
}
while (step < len) {
left = 0;
right = step;
while (right + step <= len) {
mergeArray(arr, left, left + step, right, right + step);
left = right + step;
right = left + step;
}
if (right < len) {
mergeArray(arr, left, left + step, right, len);
}
step *= 2;
}
this.debug("归并排序after:" + arr);
},
quickSort: function(arr) { //快速排序
this.debug("快速排序before:" + arr);
var _quickSort = function(arr) {
var len = arr.length,
lesser = [],
greater = [],
pivot,
meCall = arguments.callee;
if (len == 0) {
return [];
}
pivot = arr[0];
for (var i = 1; i < len; i++) {
if (arr[i] < pivot) {
lesser.push(arr[i])
} else {
greater.push(arr[i])
}
}
return meCall(lesser).concat(pivot, meCall(greater));
}
this.debug("快速排序after:" + _quickSort(arr));
return _quickSort(arr);
}
}
var search = {
linearSearch: function(arr, data) { //线性查找
for (var i = 0; i < arr.length; i++) {
if (arr[i] == data) {
return i;
}
}
return -1;
},
binarySearch: function(arr, data) { //二分查找 适用于已排好序的线性结构
var lowerBound = 0,
upperBound = arr.length - 1,
mid;
while (lowerBound <= upperBound) {
mid = Math.floor((lowerBound + upperBound) / 2);
if (arr[mid] < data) {
lowerBound = mid + 1;
} else if (arr[mid] > data) {
upperBound = mid - 1;
} else {
return mid;
}
return -1;
}
}
}
var tempArr = [3, 6, 4, 2, 11, 10, 5];
//sort.bubbleSort(tempArr);
//sort.selectionSort(tempArr);
//sort.insertionSort(tempArr);
//sort.shellSort(tempArr);
//sort.shellSortDynamic(tempArr);
//sort.mergeSort(tempArr);
//sort.quickSort(tempArr);
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
