前端必会算法

❶ 前端常用的一些算法

/*去重*/

function delRepeat(arr){

var newArray=new Array();

var len=arr.length;

for(var i=0;i

for(var j=i+1;j

{

if(arr[i]==arr[j])

{

++i;

}

}

newArray.push(arr[i]);

}

return newArray;

}

var arr=new Array("red","red","1","5","2");

alert(delRepeat(arr));

/*二分法*/

又称为折半查找算法，但是有缺陷就是要求数字是预先排序好的

function binary(items,value){

var startIndex=0,

stopIndex=items.length-1,

midlleIndex=(startIndex+stopIndex)>>>1;

while(items[middleIndex]!=value && startIndex

if(items[middleIndex]>value){

stopIndex=middleIndex-1;

}else{

startIndex=middleIndex+1;

}

middleIndex=(startIndex+stopIndex)>>梁袭>1;

}

return items[middleIndex]!=value ? false:true;

}

/*十六进制颜色值的橡罩兄随机生成*/

function randomColor(){

var arrHex=["0","2","3","4","5","6","7","8","9","a","b","c","闷悔d"],

strHex="#",

index;

for(var i=0;i<6;i++){

index=Math.round(Math.random()*15);

strHex+=arrHex[index];

}

return strHex;

}

/*一个求字符串长度的方法*/

function GetBytes(str){

var len=str.length,

bytes=len;

for(var i=0;i

if(str.CharCodeAt>255){

bytes++;

}

}

return bytes;

}

/*插入排序*/

所谓的插入排序，就是将序列中的第一个元素看成一个有序的子序列，然后不段向后比较交换比较交换。

function insertSort(arr){

var key;

for(var j = 1; j < arr.length ; j++){

//排好序的

var i = j - 1;

key = arr[j];

while(i >= 0 && arr[i] > key){

arr[i + 1] = arr[i];

i --;

}

arr[i + 1] = key;

}

return arr;

}

/*希尔排序*/

希尔排序 ，也称 递减增量排序算法

其实说到底也是插入排序的变种

function shellSort(array){

var stepArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1]; // reverse()在维基上看到这个最优的步长较小数组

var i = 0;

var stepArrLength = stepArr.length;

var len = array.length;

var len2 =  parseInt(len/2);

for(;i < stepArrLength; i++){

if(stepArr[i] > len2){

continue;

}

stepSort(stepArr[i]);

}

//排序一个步长

function stepSort(step){

//console.log(step)使用的步长统计

var i = 0, j = 0, f, tem, key;

var stepLen = len%step > 0 ?  parseInt(len/step) + 1 : len/step;

for(;i < step; i++){//依次循环列

for(j=1;/*j < stepLen && */step * j + i < len; j++){//依次循环每列的每行

tem = f = step * j + i;

key = array[f];

while((tem-=step) >= 0){//依次向上查找

if(array[tem] > key){

array[tem+step] = array[tem];

}else{

break;

}

}

array[tem + step ] = key;

}

}

}

return array;

}

/*快速排序*/

快速排序算法就系对冒泡排序的一种改进，采用的就是算法理论中的分治递归的思想。

具体做法：通过一趟排序将待排序的纪录分割成两部分，其中一部分的纪录值比另外一部分的纪录值要小，就可以继续分别对这两部分纪录进行排序；不段的递归实施上面两个操作，从而实现纪录值的排序。

function sort(arr){

return quickSort(arr,0,arr.length-1);

function quickSort(arr,l,r){

if(l

var mid=arr[parseInt((l+r)/2)],i=l-1,j=r+1;

while(true){

//大的放到右边，小的放到左边, i与j均为游标

while(arr[++i]

while(arr[--j]>mid);

if(i>=j)break;//判断条件

var temp = arr[i];

arr[i]=arr[j];

arr[j]=temp;

}

quickSort(arr,l,i-1);

quickSort(arr,j+1,r);

}

return arr;

}

}

function main(){

var list=new Array(49,38,65,97,76,13,27);

document.write(sort(list).valueOf());

}

main();

/*冒泡法*/

function bullSort(array){

var temp;

for(var i=0;i

for(var j=array.length-1;j>i;j--){

if(array[j]

temp = array[j];

array[j]=array[j-1];

array[j-1]=temp;

}

}

}

return array;

}

/*js递归实现方案*/

递归函数是在一个函数通过调用自身的情况下去解决的：

方式如下：

function factorial(num){

if(num<=1){

return 1;

}else{

return num*factorial(num-1);

}

}

但是这在js里面可能会出现错误：

var anotherFactorial = factorial;

factorial=null;

alert(anoterFactorial(4));

因为在调用anoterFactorial时内部的factorial已经不存在了。

解决方法是通过arguments.callee来解决。

如下：

function factorial(num){

if(num<=1){

return 1;

}else{

return num*arguments.callee(num-1);

}

var anotherFactorial = factorial;

factorial = null;

alert(anotherFactorial(4));

成功！！！！

}

/**js模拟多线程**/

if (Array.prototype.shift==null)

Array.prototype.shift = function (){

var rs = this[0];

for (var i=1;i

this.length=this.length-1

return rs;

}

if (Array.prototype.push==null)

Array.prototype.push = function (){

for (var i=0;i

return this.length;

}

var commandList = [];

var nAction = 0;//控制每次运行多少个动作

var functionConstructor = function(){}.constructor;

function executeCommands(){

for (var i=0;i

if (commandList.length>0){

var command = commandList.shift();

if (command.constructor == functionConstructor)

if (command.scheleTime == null || new Date()-command.scheleTime>0)

command();

else

commandList.push(command);

}

}

function startNewTask(){

var resultTemp = document.getElementById("sampleResult").cloneNode(true);

with (resultTemp){

id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6);

}

document.body.insertBefore(resultTemp,document.body.lastChild);

commandList.push(function(){simThread(resultTemp,1);});

nAction++;

}

function  simThread(temp,n){

if (temp.stop) n--;

else temp.innerHTML = temp.innerHTML - (-n);

if (n<1000)

commandList.push(function(){simThread(temp,++n)});

else{

var command = function(){document.body.removeChild(temp);;nAction--;};

command.scheleTime = new Date()-(-2000);

commandList.push(command);

}

}

window.onload = function(){setInterval("executeCommands()",1);}

/

/*选择法排序*/

选择法主要有三种：

《1》简单的选择排序：简单的前后交互。

/*简单选择法排序*/

其实基本的思想就是从待排序的数组中选择最小或者最大的，放在起始位置，然后从剩下的数组中选择最小或者最大的排在这公司数的后面。

function selectionSort(data)

{

var i, j, min, temp , count=data.length;

for(i = 0; i < count - 1; i++) {

/* find the minimum */

min = i;

for (j = i+1; j < count; j++)

{    if (data[j] < data[min])

{ min = j;}

}

/* swap data[i] and data[min] */

temp = data[i];

data[i] = data[min];

data[min] = temp;

}

return data;

}

《2》树型排序：又称锦标赛排序，首先对n个元素进行两两比较，然后在其中[n/2]个较小者再进行两两比较如此重复直至选出最小的关键字的纪录为止。（可用完全二差树表示）。缺点：辅助空间需求过大，和“最大值”进行多余比较

《3》堆排序：（不适用于纪录数较少的文件）

堆排序算法的过程如下:

1)得到当前序列的最小(大)的元素

2)把这个元素和最后一个元素进行交换,这样当前的最小(大)的元素就放在了序列的最后,而原先的最后一个元素放到了序列的最前面

3)的交换可能会破坏堆序列的性质(注意此时的序列是除去已经放在最后面的元素),因此需要对序列进行调整,使之满足于上面堆的性质.

重复上面的过程,直到序列调整完毕为止.

js实现：

/**

*堆排序

* @param items数组

* @return排序后的数组

*/

function heapSort(items)

{

items = array2heap(items); //将数组转化为堆

for(var i = items.length - 1; i >= 0; i--)

{

items = swap(items, 0, i); //将根和位置i的数据交换(用于将最大值放在最后面)

items = moveDown(items, 0, i - 1); //数据交换后恢复堆的属性

}

return items;

}

/**

*将数组转换为堆

* @param items数组

* @return堆

*/

function array2heap(items)

{

for(var i = Math.ceil(items.length / 2) - 1; i >= 0; i--)

{

items = moveDown(items, i, items.length - 1); //转换为堆属性

}

return items;

}

/**

*转换为堆

* @param items数组

* @param first第一个元素

* @param last最后一个元素

* @return堆

*/

function moveDown(items, first, last)

{

var largest = 2 * first + 1;

while(largest <= last)

{

if(largest < last && items[largest] < items[largest + 1])

{

largest++;

}

if(items[first] < items[largest])

{

items = swap(items, first, largest); //交换数据

first = largest;   //往下移

largest = 2 * first + 1;

}

else

{

largest = last + 1; //跳出循环

}

}

return items;

}

/**

*交换数据

* @param items数组

* @param index1索引1

* @param index2索引2

* @return数据交换后的数组

*/

function swap(items, index1, index2)

{

var tmp = items[index1];

items[index1] = items[index2];

items[index2] = tmp;

return items;

}

var a = [345,44,6,454,10,154,3,12,11,4,78,9,0,47,88,9453,4,65,1,5];

document.write(heapSort(a));

所谓归并就是将两个或者两个以上的有序表合成一个新的有序表。

递归形式的算法在形式上较为简洁但实用性较差，与快速排序和堆排序相比，归并排序的最大特点是，它是一种稳定的排序方法。

js实现归并：

function MemeryArray(Arr,n, Brr, m)

{      var i, j, k;

var Crr=new Array();

i = j = k = 0;

while (i < n && j < m)

{

if (Arr[i] < Brr[j])

Crr[k++] = Arr[i++];

else

Crr[k++] = Brr[j++];

}

while (i < n)

Crr[k++] = Arr[i++];

while (j < m)

Crr[k++] = Brr[j++];

return Crr;

}

var Arr=new Array(45,36,89,75,65);

var Brr=new Array(48,76,59,49,25);

alert(MemeryArray(Arr , Arr.length , Brr , Brr.length));

归并排序待续，先睡了：

归并排序：

//将有二个有序数列a[first...mid]和a[mid...last]合并。

function mergearray(Arr,first,mid,last,tempArr)

{

var i = first, j = mid + 1;

var m = mid,   n = last;

var k = 0;

while (i <= m && j <= n)

{

if (Arr[i] < Arr[j])

tempArr[k++] = Arr[i++];

else

tempArr[k++] = Arr[j++];

}

while (i <= m)

tempArr[k++] = Arr[i++];

while (j <= n)

tempArr[k++] = Arr[j++];

for (i = 0; i < k; i++)

Arr[first + i] = tempArr[i];

}

function mergesort(Arr,first,last)

{

var tempArr=new Array();

if (first < last)

{

var mid = (first + last)>>>1;

mergesort(Arr, first, mid, tempArr);    //左边有序

mergesort(Arr, mid + 1, last, tempArr);  //右边有序

mergearray(Arr, first, mid, last, tempArr);  //再将二个有序数列合并

}

return  Arr;

}

var Arr=new Array(1,65,45,98,56,78);

alert(mergesort(Arr,0,Arr.length-1));

/*比较两个字符串的相似性－Levenshtein算法简介*/

问题与描述：

近似字符串匹配问题

说明：设给定样本，对于任意文本串，样本P在文本T中的K-近似匹配（K-approximate match）是指P在T中包含最多K个差异的匹配，这里的差别指：

（1）修改：P与T中对应的字符不同

（2）删除：T中含有一个未出现在P中的字符

（3）插入：T中不包含出现在P中的一个字符

（也就是编辑距离问题）

例如：

T: a p r o x i o m a l l y

P: a p p r o x i m a t l y

经过1：插入2：删除3：修改

那么就是一个3-近似问题

事实上，两个字符串可能有不得出不同的差别数量，所以K-近似匹配要求：

（1）差别数最多为K个

（2）差别数为所有匹配方式下最少的称为编辑距离

（字符串T到P最少的差别数称为T和P的编辑距离）

试验要求：

（1）利用动态规划方法给出两个字符串编辑距离的算法

（2）分析复杂度

（3）考虑其它方法

Levenshtein Distance来文史特距离

goodzzp

LD也叫edit distance，它用来表示2个字符串的相似度，不同于Hamming Distance，它可以用来比较2个长度不同的字符串。LD定义为需要最少多少步基本操作才能让2个字符串相等，基本操作包含3个：

1，插入；

2，删除；

3，替换；

比如，kiteen和sitting之间的距离可以这么计算：

1，kitten – > sitten,替换k为s；

2，sitten – > sittin,替换e为i;

3，sittin – > sitting,增加g；

所以，其LD为3；

计算LD的算法表示为：

int LevenshteinDistance(char str1[1..lenStr1], char str2[1..lenStr2])

// d is a table with lenStr1+1 rows and lenStr2+1 columns

declare int d[0..lenStr1, 0..lenStr2]

// i and j are used to iterate over str1 and str2

declare int i, j, cost

for i from 0 to lenStr1

d[i, 0] := i

for j from 0 to lenStr2

d[0, j] := j

for i from 1 to lenStr1

for j from 1 to lenStr2

if str1[i] = str2[j] then cost := 0

else cost := 1

d[i, j] := minimum(

d[i-1, j ] + 1,// deletion

d[i , j-1] + 1,// insertion

d[i-1, j-1] + cost// substitution

)

return d[lenStr1, lenStr2]；

这个算法其实就是一个矩阵的计算：

k i t t e n

0 1 2 3 4 5 6

s 1 1 2 3 4 5 6

i 2 2 1 2 3 4 5

t 3 3 2 1 2 3 4

t 4 4 3 2 1 2 3

i 5 5 4 3 2 2 3

n 6 6 5 4 3 3 2

g 7 7 6 5 4 4 3

首先给定第一行和第一列，然后，每个值d[i,j]这样计算：d[i,j] = min(d[i-1,j]+ 1,d[i,j-1] +1,d[i-1,j-1]+(str1[i] == str2[j]?0:1));

最后一行，最后一列的那个值就是LD的结果。

LD(str1,str2) <= max(str1.len,str2.len)；

有人提出了Levenshtein automaton（Levenshtein自动机）来计算和某个字符串距离小于某个值的集合。这样能够加快近似字符串的计算过程。见文献：Klaus U. Schulz, Stoyan Mihov, Fast String Correction with Levenshtein-Automata. International Journal of Document Analysis and Recognition, 5(1):67--85, 2002.

A Guided Tour to Approximate String Matching GONZALONAVARRO

这篇文章里面对这个方面（字符串相似）进行了很多描述。其中，包含了动态规划法计算Edit distance的方法。

js实现：

//求两个字符串的相似度,返回差别字符数,Levenshtein Distance算法实现

function Levenshtein_Distance(s,t){

var n=s.length;// length of s

var m=t.length;// length of t

var d=[];// matrix

var i;// iterates through s

var j;// iterates through t

var s_i;// ith character of s

var t_j;// jth character of t

var cost;// cost

// Step 1

if (n == 0) return m;

if (m == 0) return n;

// Step 2

for (i = 0; i <= n; i++) {

d[i]=[];

d[i][0] = i;

}

for (j = 0; j <= m; j++) {

d[0][j] = j;

}

// Step 3

for (i = 1; i <= n; i++) {

s_i = s.charAt (i - 1);

// Step 4

for (j = 1; j <= m; j++) {

t_j = t.charAt (j - 1);

// Step 5

if (s_i == t_j) {

cost = 0;

}else{

cost = 1;

}

// Step 6

d[i][j] = Minimum (d[i-1][j]+1, d[i][j-1]+1, d[i-1][j-1] + cost);

}

}

// Step 7

return d[n][m];

}

//求两个字符串的相似度,返回相似度百分比

function Levenshtein_Distance_Percent(s,t){

var l=s.length>t.length?s.length:t.length;

var d=Levenshtein_Distance(s,t);

return (1-d/l).toFixed(4);

}

//求三个数字中的最小值

function Minimum(a,b,c){

return a

}

var str1="ddsddf",str2="xdsfsx";

alert(Levenshtein_Distance_Percent(str1,str2));

❷ 前端有必要学习算法吗

需要学一些算法，JS这块也是可以做算法分析的。
除非你是UI，平面设计，可以不用学算法。
只要是编程开发，都是需要学习一些算法方面的知识的。

❸ 前端开发必学的技术有哪些

这里给大家整理了一份系统全面的前端学习路线，主要掌握以下技术：

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分之结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

❹ 前端算法详解——二分法(查找、排序、去重、最小值)

需求：针对一有序数组查找某一个姿纳数是否在该数组中。
分析与思路： 二分法，一分为二。将数组分为两个进行查找，若该数小于中间值，则向左查找，否则向右查找。然后递归再次查找（这样每一次都是排除掉一半的不可能）

需求：将无序数组进行排序。
分析与思路： 将原始数组一分为二个数组（left、right），再讲这两个数组利用递归再次进行拆分...最后再将左右两个数组进行排氏燃序。

分析与思路：歼册虚同理将数组一分为二，左右分别去重，在一起去重

❺ web前端开发需要掌握的几个必备技术

接下来由小编简单的列举出几个前端开发中必须要学会的知识：

第一阶段：

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：

HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：

HTTP服务和AJAX编程

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：

面向对象进阶

面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：

继承性、多态性、封装性、接口。

设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：

封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：

模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：

主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用库：

React.js、Vue.js、Zepto.js。

第八阶段：

HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

ReactNative：

ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：

HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：

Node.js全栈开发：

快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。

Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

❻ 【前端】常用加密方法

• JavaScript 加密后传输(具体可以参考后面的常见加密方法)
• 浏览器插件内进行加密传输
• Https 传输

在加密算法中又分为对称加密和非对称加密。

对称加密采用了对称密码编码技术，它的特点是文件加密和解密使用相同的密钥加密.也就是加密和解密都是用同一个密钥，这种方法在密码学中叫做对称加密算法.

对称加密算法使用起来简单快捷，密钥较短，且破译困难，除了数据加密标准（DES），另一个对称密钥加密系统是国际数据加密算法（IDEA），它比DES的加密性好，而且对计算机功能要求也没有那么高.

常见的对称加密算法有DES、3DES、Blowfish、IDEA、RC4、RC5、RC6和AES

注意: 因为前端的透明性，对于登录密码等敏感信息,就不要使用JavaScript来进行对称加密. 因为别人可以从前端得到密匙后,可以直接对信息进行解密!

非对称加密算法需要两个密钥：公钥（publickey）和私钥（privatekey）。 公钥与私钥是一对，如果用公钥对数据进行加密，只有用对应的私钥才能解密；如果用私钥对数据进行加密，那么只有用对应的公钥才能解密。 因为加密和解密使用的是两个不同的密钥，所以这种算法叫作非对称加密算法。

非对称加密算法实现机密信息交换的基本过程是：甲方生成一对密钥并将其中的一把作为公钥向其它方公开；得到该公钥的乙方使用该密钥对机密信息进行加密后再发送给甲方；甲方再用自己保存的另一把专用密钥对加密后的信息进行解密。甲方只能用其专用密钥解密由其公钥加密后的任何信息。

常见的非对称加密算法有：RSA、ECC（移动设备用）、Diffie-Hellman、El Gamal、DSA（数字签名用）

❼ 前端开发需要掌握的技能知识

首先作为前端工程师，掌握前端基础是最重要的，如果基础不扎实，一切应用技能就都是“浮云”。前端的基础是什么？HTML、CSS、JavaScript基本功，数学、算法、数据结构、操作系统、编译原理基本功。
另外必须要有自己擅长的领域，并且钻研得足够深入，同时要有眼界，能“跨界”。可以以前端作为职业，但千万不要把自己的技能限制在前端领域，因为有很多东西，只有站在前端之外，才能看得更清晰更透彻。想要学习更多技能，建议选择优就业，优就业的web前端课程有着优秀的讲师，科学的课程，建议去实地考察一下，看看实际情况如何。

❽ 前端算法入门一：刷算法题常用的JS基础扫盲

此篇属于前端算法入门系列的第一篇，主要介绍常用的 数组方法 、 字符串方法 、 遍历方法 、 高阶函数 、 正则表达式 以及相关 数学知识 。

在尾部追加，类似于压栈，原数组会变。

在尾部弹出，类似于出栈，原数组会变。数组的 push & pop 可以模拟常见数据结构之一：栈。

在头部压入数据，类似于入队，原数组会变。

在头部弹出数据，原数组会变。数组的 push（入队） & shift（出队） 可以模拟常见数据结构之一：队列。

concat会在当前数组尾部拼接传入的数组，然后返回一个新数组，原数组不变。

在数组中寻找该值，找到则返回其下标，找不到则返回-1。

在数组中寻找该值，找到则返回true，找不到则返回false。

将数组转化成字符串，并返回该字符串，不传值则默认逗号隔开，原数组不变。

翻转原数组，并返回已完成翻转的数组，原数组改变。

从start 开始截取到end，但是不包括end

可参考 MDN：Sort

将数组转化成字符串，并返回该字符串，逗号隔开，原数组不变。

返回指定索引位置处的字符。类似于数组用中括号获取相应下标位置的数据。

类似数组的concat()，用来返回一个合并拼接两个或两个以上字符串。原字符串不变。

indexOf,返回一个字符在字符串中首次出现的位置,lastIndexOf返回一个字符在字符串中最后一次出现的位置。

提取字符串的片断，并把提取的字符串作为新的字符串返回出来。原字符串不变。

使用指定的分隔符将一个字符串拆分为多个子字符串数组并返回，原字符串不变。

match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，并返回一个包含该搜索结果的数组。

注意事项 :如果match方法没有找到匹配，将返回null。如果找到匹配，则 match方法会把匹配到以数组形式返回，如果正则规则未设置全局修饰符g，则 match方法返回的数组有两个特性：input和index。input属性包含整个被搜索的字符串。index属性包含了在整个被搜索字符串中匹配的子字符串的位置。

replace接收两个参数，参数一是需要替换掉的字符或者一个正则的匹配规则，参数二，需要替换进去的字符，仔实际的原理当中，参数二，你可以换成一个回调函数。

在目标字符串中搜索与正则规则相匹配的字符，搜索到，则返回第一个匹配项在目标字符串当中的位置，没有搜索到则返回一个-1。

toLowerCase把字母转换成小写，toUpperCase()则是把字母转换成大写。

includes、startsWith、endsWith，es6的新增方法，includes 用来检测目标字符串对象是否包含某个字符，返回一个布尔值，startsWith用来检测当前字符是否是目标字符串的起始部分，相对的endwith是用来检测是否是目标字符串的结尾部分。

返回一个新的字符串对象，新字符串等于重复了指定次数的原始字符串。接收一个参数，就是指定重复的次数。原字符串不变。

最常用的for循环，经常用的数组遍历，也可以遍历字符串。

while、do while主要的功能是，当满足while后边所跟的条件时，来执行相关业务。这两个的区别是，while会先判断是否满足条件，然后再去执行花括号里面的任务，而do while则是先执行一次花括号中的任务，再去执行while条件，判断下次还是否再去执行do里面的操作。也就是说 do while至少会执行一次操作 .

拷贝一份遍历原数组。

for…of是ES6新增的方法，但是for…of不能去遍历普通的对象， for…of的好处是可以使用break跳出循环。

面试官：说一下 for...in 和 for...of 区别？

返回一个布尔值 。当我们需要判定数组中的元素是否满足某些条件时，可以使用every / some。这两个的区别是，every会去判断判断数组中的每一项，而 some则是当某一项满足条件时返回。

rece 从左到右将数组元素做“叠加”处理，返回一个值。receRight 从右到左。

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

这里罗列一些我在刷算法题中遇到的正则表达式，如果有时间可认真学一下正则表达式不要背。

持续更新，敬请期待……

若一个正整数无法被除了1 和它自身之外的任何自然数整除，则称该数为质数（或素数），否则称该正整数为合数。

持续更新，敬请期待……

作者：摆草猿
链接：https://juejin.cn/post/7087134135193436197

❾ 前端学习需要学些什么

web前端需要学HTML、CSS、JavaScript、jQuery、Ajax、前端框架（vue/React/Angular等）等前端知识；还要了解每个浏览器中的各个版本的兼容性、Web标准、移动设备、多终端适配等知识。

总结

• 前端页面在浏览器中展示

• 浏览器中的每一个页面，我们称之为网页

• 文字、图片、音频、视频、超链接等组成了网页

• 前端技术由 html、css、js组成，实现网页展示效果

• 前端可以做app、小程序、手机端，PC端，软件等

• 根据需求的不同，前端可以做很多实现如视频，游戏，后台管理，可视化展示等

• 网页在不同浏览器中显示会有所不同，因为不同浏览器渲染引擎不同，解析的效果会存在差异，因些推荐谷歌浏览器（Chrome）

❿ web前端需要掌握的职业技能是什么

1.开发语言

HTML发展历史有二十多年，历经多次版本更新，HTML5和CSS3的出现又是一次革新。有些人认为前端开发要掌握的技能简单，不就是制作网页 嘛，其实不然，web前端需要掌握的核心语言xHTML+CSS+JavaScript，JavaScript作为最难的语言之一，许多编程高手也不敢妄 自菲薄自封精通。由于JavaScript与html的差异性，以及静动态分开处理的一些好处。在大公司编写静态效果和动态效果往往是分开由不同的人完成 的。小公司因为需要压缩成本，就要求每个人会得越多越好，如果您想往项目经理发展，能懂一两门后台语言，绝对是锦上添花！

2.浏览器兼容性

互联网目前主流浏览器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯 TT，360，the World等等；从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的，如果你身边有老网虫喜欢收藏 浏览器，你翻翻他的硬盘，相信几十款肯定是有的。每种内核对代码的解析是不完全一样的，即使同样内核也可能存在很大差异，如IE和遨游版的IE。不说非主流的浏览器，就主流的浏览器要做到完全兼容，也并非易事，需要长时间的积累和测试，需要前端开发工程师对前端开发的热爱和激情。

目前移动互联网的发展趋势也不容小觑，将慢慢占据互联网的主要份额。移动互联网最突出的好处是方便和及时，试想一下，走在某地风景很好，拍下来后自 动分享给各路好友，因此手机上的浏览器兼容也看刻不容缓，现在手机上的浏览器也是纷繁复杂，主流的UCWEB，safari，IE，3G门户的，以及 symbian低端机的“残缺儿童”，包括国外流行手机我们不知道的一些浏览器，更糟糕的是这些浏览器解析因为手机硬件的不同，每个浏览器得到的结果都是 完全不同的。

3.hack技术

由于不同的浏览器对CSS的解析认识不一样，因此会导致生成的页面效果不一样，这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员 必备的技能。

4.业内标准

目前Web前端开发中提到最多的就是W3C标准，这是一系列标准的集合，代表了互联网发展的方向，也代表了前端开发的一种信仰。写的代码都要100%通过标准验证，为通过标准验证而感到自豪，会有效推动互联网的快速发展。

5.开发工具

目前比较流行的是Dreamweaver， 其曾经风靡一时，到现在也没有退出历史舞台，证明DW还是有很大优势的，尤其是针对初学者，其强大的提示功能可以帮助我们很快的熟悉并掌握网页布局，但现 在更提倡的是纯手写代码，既体现技能方面的卓越，也可有效避免使用DW等工具产生的冗余代码。此外再掌握一些photoshop技能，即使没有美工，也能 简单处理一些图像。

小结，掌握以上技能，可以说你是一个合格的前端开发人员，能够参与到一个大的项目中，或者自己独立写出一个网页。虽然这看起来和网页制作设计差不多，从效果上来看，都是制作网页的，但实际上，技术上所超出的已经是好几个档次的东西了。