이번에는 프론트엔드 정렬 알고리즘의 예를 자세히 설명하겠습니다. 프론트엔드에서 정렬 알고리즘을 사용할 때 주의사항은 무엇인가요? .
서문
어제 Zhihu에서 Ruan Yifeng 선생님의 빠른 정렬 알고리즘에 대해 불평하는 기사를 보았습니다. 여기에 여담을 추가하고 싶습니다. 책이 없는 것보다 배움의 과정 그것이 바로 실수를 끊임없이 발견하고 바로잡는 과정입니다. 끊임없이 배우고, 실수를 수정하고 성장하므로 모두가 똑같습니다. 오해의 소지가 있는 사람이 아니라 더 강력한 사람이 JavaScript라면 어떨까요? 누구나 실수를 할 수 있기 때문에 우리도 더 많이 생각하고 회의적인 태도로 이를 받아들이고 이것이 최선의 해결책인지 항상 생각해야 합니다. 저는 이것이 컴퓨터로서 해야 할 일이라고 생각합니다. 전문적인 프론트엔드인데 아이디어의 다양한 정렬 알고리즘을 잘 구현하지 못해서 너무 부끄럽기 때문에 C 언어설명 + 중국어 책을 천천히 읽어보았습니다. Version.pdf>> 아래에는 제가 이해한 다양한 아이디어의 정렬 알고리즘을 요약해 놓았습니다. 잘못된 점이 있으면 지적해 주시기 바랍니다. 자신이 더 좋다고 생각하는 아이디어는 모두가 함께 배우고 발전하는 것이 가장 행복한 것 같아요~
1. 꼭 알아두어야 할 관련 개념 1.1 시간 복잡도(1) 시간의 개념 복잡성알고리즘의 시간 복잡도는 알고리즘의 실행 시간을 정성적으로 설명하는 함수입니다. 이 함수의 하위 항과 고차 항 계수를 제외하면 일반적으로 사용됩니다.
(2) 계산 method
- 일반적으로 알고리즘에서 기본 연산의 실행 횟수는 문제 크기 n의 함수이며, T(n)으로 표현됩니다. 보조 함수 f(n)이 있으면 n이 무한대에 접근합니다. , T(n)/f(n)의 극한값은 0이 아닌 상수이고 f(n)은 T(n)과 동일한 크기 차수의 함수이며 T(n) = O(로 표시됩니다. f(n)), 우리는 알고리즘의 점근적 시간 복잡도를 O(f(n))이라고 부릅니다. 이를 시간 복잡도라고 합니다.
- 분석: 언제든지 모듈 n이 증가함에 따라 알고리즘의 성장률은 다음과 같습니다. 실행 시간은 f(n)의 증가율에 비례하므로 f(n)이 작을수록 알고리즘의 시간 복잡도는 낮아지고, 알고리즘의 효율성은 높아집니다.
- 시간 복잡도를 계산할 때, 먼저 알고리즘의 기본 연산을 알아낸 다음 기본 연산의 실행 횟수를 계산하고 T(n)과 동일한 크기의 f(n)을 찾습니다(동일한 크기의 크기는 일반적으로 다음과 같습니다. 1 , log2n,n,nlog2n,n 제곱, n의 세제곱), T(n) / f(n)이 상수 c를 얻기 위한 극한을 찾으면 시간 복잡도 T(n) = O(f(n) )):
for(i = 1; i T(n) = n^3 + n^2를 얻을 수 있으며, n^3이 T(n), f( n)=n^3; 그러면 T(n) / f(n) = 1 + 1/n 한계는 상수 1이므로 이 알고리즘의 시간 복잡도는 다음과 같습니다.<p style="text-align: left;"> T(n) = O(n^3) ;<br></p><p style="text-align: left;">참고: 편의상 N을 사용하겠습니다. 다음은 배열 요소의 수를 나타냅니다.<strong></strong></p>2. 정렬 알고리즘<h1 style="text-align: left;"></h1>2.1 <h2 style="text-align: left;">버블 정렬<a href="http://www.php.cn/code/12106.html" target="_blank"></a> </h2>2.1.1 주요 아이디어:<h3 style="text-align: left;"></h3>의 주요 아이디어 버블 정렬은 길이가 n인 배열을 순회하는 것입니다. i는 n-1부터 1까지이며 배열의 첫 번째 i 요소의 최대값은 i 위치에 배치됩니다. 순회 프로세스는 큰 값(무거운)이 계속 가라앉고, 작은 값(가벼운 값)이 계속 떠오르므로 순회가 완료된 후 각 위치의 값이 해당 값보다 커집니다. 이전 값을 입력하고 정렬이 완료됩니다.<p style="text-align: left;"></p>2.1.2 시간 복잡도<h3 style="text-align: left;"></h3>최악의 경우 시간 복잡도: o(n^2);<p style="text-align: left;">최상의 경우 시간 복잡도: o(n^2);<br></p>2.1 .3 정렬 프로세스 그림:<h3 style="text-align: left;"></h3><p style="text-align: left;">다이어그램의 루프 종료는 내부 루프를 종료하는 것입니다<strong> </strong><br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/975255cd4031086ad718d4dc21df07d0-0.png?x-oss-process=image/resize,p_40" class="lazy" alt="프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명" title="프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명"></p><h3 id="代码实现">2.1.4 代码实现:</h3><h4 id="冒泡排序-非递归实现">冒泡排序-非递归实现</h4><pre class="brush:php;toolbar:false">function bubbleSort(arr) { for(var i = arr.length - 1; i > 1; i--) { for(var j=0; j arr[j+1]) { var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } return arr; } var arr = [34,8,64,51,32,21]; bubbleSort(arr); // [8, 21, 32, 34, 51, 64]
冒泡排序-递归实现
function bubbleSort(arr, n) { if(n arr[j+1]) { var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } return bubbleSort(arr, --n); } } var arr = [34,8,64,51,32,21]; bubbleSort(arr, arr.length); // [8, 21, 32, 34, 51, 64]
2.2 插入排序
2.2.1 主要思想:
插入排序有 n-1 趟排序组成,对于 i=1 到 i=n-1 趟,内层循环j从 i 到 1, 如果这其中有 j-1 位置上的元素大于 i 位置上的元素,就将该元素后移,知道条件不成立退出循环,这个时候大的值都被移动到后面了,j这个位置就是i位置上的元素应该在的位置.这样保证了每次循环i位置前的所有元素都是排好序的,新的循环就只需要 将 i 位置上的元素 和 j-1(也就是初始的 i-1) 位置上的元素作比较,如果大于则无需再往前比较,如果小于则继续往前比较后移.
2.2.2 时间复杂度
最坏情况下的时间复杂度: o(n^2);
最好情况下的时间复杂度: o(n);
2.2.3 프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명:
图解中的出循环是退出内层循环
2.2.4 代码实现
插入排序-非递归实现
function insertSort(arr) { var n = arr.length,temp = 0; for(var i = 1; i 0 && arr[j-1] > temp; j--) { arr[j] = arr[j - 1]; } arr[j] = temp; } return arr; } var arr = [34,8,64,51,32,21]; insertSort(arr); // [8, 21, 32, 34, 51, 64]
插入排序-递归实现
function insertSort(arr, n) { if(n > 0 && n 0 && arr[j - 1] > temp) { arr[j] = arr[j - 1]; j--; } arr[j] = temp; i++; return insertSort(arr, i); } return arr; } var arr = [34,8,64,51,32,21]; insertSort(arr, 1); // [8, 21, 32, 34, 51, 64]; // 这个函数的调用限定了第一次调用n的值只能传1
2.3 快速排序
顾名思义,快速排序是在实践中最快的已知排序算法,它的平均运行时间是O(Nlog₂N).快速排序的关键在于枢纽元的选取,有一种比较推荐的选取方法就是选取左端的值,右端的值,中间位置的值(L(left + right) / 2)这三个数的中位数.举例: 输入为8,1,4,9,6,3,5,2,7,0, 左边元素8, 右边元素0,中间位置上的元素L(0+9)/2是4位置上的元素是6,L在表示向下取整.
8,0,6的中位数,先排序0,6,8, 这三个数的中位数是6.
2.3.1 基本思想
通过一趟排序将要排序的部分分割成独立的两部分,其中一部分数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据进行快速排序,整个排序过程可以递归进行,依次达到整个数据变成有序序列.
2.3.2 实现步骤
第一步: 设置两个变量i,j,排序开始的时候: i=left,j=right-1,left和right分别表示要进行快速排序序列的起始索引和结束索引;
第二步: 从数组中随机选取一个元素,将其与arr[left]进行交换,即privot = arr[left],保证每一次的基准值都在序列的最左边;
第三步: 由j开始向前搜索,即由后开始向前搜索(j--),找到第一个小于privot 的值arr[j],将arr[i]与arr[j]互换;
第四步: 从i开始向后搜索,即由前开始向后搜索(i++),找到一个大于privot 的arr[i],将arr[i]与arr[j]互换;
第五步: 重复第三步和第四步,直到不满足i
2.3.3 时间复杂度:
平均情况下的时间复杂度: o(nlog₂n);
最好情况下的时间复杂度: o(n);
2.3.4 프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명
2.3.5 代码实现:
快速排序-递归实现
function quickSort(arr, left, right) { if(left >= right) return; var i = left; var j = right - 1; var privot = arr[left]; //console.log(privot); while(i = privot) j--; arr[i] = arr[j]; while(i<j var quicksort><h4 id="快速排序-非递归实现">快速排序-非递归实现</h4> <pre class="brush:php;toolbar:false">function mainProduce(arr, left, right) { var i = left, j = right - 1; var rendomIndex = Math.floor(Math.random() * (j - i)) + left; var temp = arr[left];arr[left] = arr[rendomIndex];arr[rendomIndex] = temp; var privot = arr[left]; while(i = privot) j--; var temp = arr[i];arr[i] = arr[j];arr[j] = temp; while(i<j> left + 1) { s.push(left);s.push(mid); } if(mid left + 1) { s.push(left);s.push(mid); } if(mid <h2 id="希尔排序">2.4 希尔排序</h2> <h3 id="主要思想">2.4.1 主要思想</h3> <p style="text-align: left;">希尔排序是把记录按照下标的一定增量分组,对每组使用插入排序;随着增量逐渐减少,分割的数组越来越大,当增量减至1,整个<a href="http://www.php.cn/code/54.html" target="_blank">数组排序</a>完成,算法终止.</p> <h3 id="主要步骤">2.4.2主要步骤</h3> <p style="text-align: left;">第一步: 选取一个增量d,初始值是Math.floor(len/2);<br>第二步: 然后将数组中间隔为增量d的组成新的分组,然后对这个分组的元素排序,完成排序后,增量除以2得到新的增量;<br>第三步: 重复第二步,直到增量为1,间隔为1的元素组成的分组就是整个数组,然后再对整个数组进行插入排序,得到最后排序后数组.</p> <p style="text-align: left;">希尔排序是不稳定的,它在不断地交换的过程中会改变原来相等的元素的顺序.</p> <h3 id="时间复杂度">2.4.3 时间复杂度</h3> <p style="text-align: left;">平均情况下的时间复杂度: o(nlog₂n);<br>最好情况下的时间复杂度: o(n);</p> <h3 id="프론트-엔드의-정렬-알고리즘-예제에-대한-자세한-설명">2.4.4 프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명</h3> <p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/2f13ca0ab50333d1dad5851595e7225d-3.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명" title="프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명"></p> <p style="text-align: left;">图片源于自百度百科: 图片来源</p> <h3 id="代码实现">2.4.5 代码实现:</h3> <h4 id="希尔排序-递归实现">希尔排序-递归实现</h4> <pre class="brush:php;toolbar:false">function shellSort(arr, increment) { var len = arr.length; if(increment > 0) { for(var i = increment; i = 0 && arr[j] > arr[j + increment]; j -= increment) { var temp = arr[j]; arr[j] = arr[j + increment]; arr[j + increment] = temp; } } return shellSort(arr, Math.floor(increment/2)); } return arr; } var arr = [49,38,65,97,76,13,27,49,55,04]; shellSort(arr, Math.floor(arr.length / 2));
希尔排序-非递归实现
function shellSort(arr) { var len = arr.length; for(var increment = Math.floor(len / 2); increment > 0; increment = Math.floor(increment / 2)) { for(var i = increment; i = 0 && arr[j] > arr[j + increment]; j -= increment) { var temp = arr[j]; arr[j] = arr[j + increment]; arr[j + increment] = temp; } } } return arr; } var arr = [49,38,65,97,76,13,27,49,55,04]; shellSort(arr);
2.5 归并排序
2.5.1 主要思想
第一步: 将一个数组以中间值截取为为两个数组,分别将其排好序;
第二步: 申请一个空间,使其大小为两个已经排序的序列之和,该空间用来存放合并后的序列;
第三步: 设定两个指针,分别指向两个已排序序列的起始位置;
第四步: 比较两个指针所指向的元素,选择相对小的元素放入到合并空间,并移动指针到下一位置.
重复第四步直到有一个某一指针超出序列尾;
将另一序列的所有元素复制到合并序列尾.
归并排序是稳定的,它在不会改变原来相等的元素的顺序.
2.5.2 时间复杂度
平均情况下的时间复杂度: O(nlog₂n);
最好情况下的时间复杂度: O(nlog₂n) ;
2.5.3 프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명
2.5.4 代码实现:
归并排序-递归实现
var result = []; function mergeArray(left, right) { result = []; while(left.length > 0 && right.length > 0) { if(left[0] <p>相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!</p><p>推荐阅读:</p><p><a href="http://www.php.cn/js-tutorial-398003.html" target="_blank">React结合TypeScript和Mobx步骤详解</a><br></p><p><a href="http://www.php.cn/js-tutorial-398045.html" target="_blank">react实现选中li高亮步骤详解</a><br></p>
위 내용은 프론트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

WebStorm Mac 버전
유용한 JavaScript 개발 도구

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版
시각적 웹 개발 도구

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
