web前端数组部分知识点汇总

清疚 2021-07-25 21:52 502阅读 0赞

# 字符串逆序 #

字符串可以通过`str.split('')`转化为数组，然后利用数组的`arr.reverse()`逆序方法实现逆序，最后通过数组的`arr.join('')`拼接方法实现数组转化为字符串。  
`str.split('').reverse().join('')`实现字符串的逆序

# 二分法查找数组中某个值的索引值（数组需为正序或逆序数组） #

二分法中，有三个重要的值，low high 低位和高位，通过高位和低位可以换算出mid，最初，`low=0`,`high=arr.length-1`,此时`mid=parseInt((low+high)/2)`,判断某个值是介于前半部分还是后半部分，如果是前半部分，则`low=low+1`,`high=mid-1`,如果是后半部分，则`low=mid+1`,`high=high-1`,此时的循环可以通过while循环来实现。

arr=[11,22,33,44,55,66,88];
    //查找22在arr数组中的索引值
    function getIndex(val){ 
    	var low=0,high=arr.length-1;
    	while(low<=high){ 
    		mid=parseInt((low+high)/2);
    		if(val<arr[mid]){ 
    			low=low+1;
    			high=mid-1;
    		}else if(val>arr[mid]){ 
    			low=mid+1;
    			high=high-1;
    		}else{ 
    			return mid;
    		}
    	}
    	return -1;
    }

# 判断数组是否为对称数组 #

判断是否为数组的方式可以是`arr instanceof Array`如果结果是true，则代表一定是数组。

for(var i=0;i<arr.length;i++){ 
    	if(arr[i] != arr[arr.length-1-i]){ 
    		return false;
    	}
    	return true;
    }

# 判断一个数组中是否包含另一个数组 #

# dl/dt/dd/ul/ol/li事件委托 #

对于列表结构，如果需要绑定事件，则可以通过事件委托的方式，将事件绑定到父级身上，然后事件捕获到子级上面来实现。

# 获取当前窗口的尺寸 #

function getViewportOffset(){ 
    	if(window.innerWidth){ 
    		return{ 
    			w:window.innerWidth,
    			h:window.innerHeight
    		}
    	}else{ 
    		if(document.compatMode === "BackCompat"){ 
    			return { 
    				w:document.body.clientWidth,
    				h:document.body.clientHeight
    			}
    		}else{ 
    			return { 
    				w:document.documentElement.clientWidth,
    				h:document.documentElement.cilentHeight
    			}
    		}
    	}
    }

# 原生js的自动阅读器 #

# 只能触发一次点击事件的方式 #

var div = document.getElementsByTagName('div')[0];
    div.onclick=function(){ 
    	console.log('aaa');
    	this.onclick=null;
    }

**click**事件的解除可以通过`onclick=null`的方式来解除。

# 原生js绑定事件的三种方式 #

`ele.onclick`,对应的解除方式是：`ele.onclick=false/""/null`;  
`ele.addEventListener(type,fn,false)`,对应的解除方式是：  
`ele.removeEventListener(type,fn,false)`;  
`ele.attachEvent('on'+type,fn)`;对应的解除方式是：`ele.detachEvent('on'+type,fn)`;  
**注意** ：如果是匿名函数，则无法解除；

# 封装一个原生js绑定事件的函数 #

封装一个函数，给某个元素的某个事件类型绑定某个事件函数。优先考虑的是用`addEventListener`,如果没有则用`attachEvent`,如果还是没有，再用`on`的形式进行处理。

**注意**:

1.  attachEvent中的this指向的问题，需要通过handle.call(elem);的方式进行修改。如果不进行修改，则this指向的是window;
2.  on的绑定方式：  
    elem\[‘on’+type\]的方式进行处理。

# 给ul中所有的li绑定点击事件，打印出点击对象的索引值 #

**注意**：  
绑定事件，是将事件绑定到元素的行间，并不立即执行，这种将函数保存到函数外部的情况必然会产生闭包。  
解决闭包的方法可以利用立即执行函数。

# 原生js绑定事件的三种方式区别 #

1.  `ele.onxxx=function (event){}`  
    兼容性很好，但是一个元素的同一个书简只能绑定一个处理程序；  
    基本等同于写在HTML行间上
2.  `obj.addEventListener(type,fn,false)`  
    IE9以下不兼容，可以为一个事件绑定多个处理程序；
3.  `obj.attachEvent(''on)+type,fn`;  
    IE独有，一个事件同样可以绑定多个处理程序；

# 封装一个取消默认事件的方法 #

默认事件有：表单提交，a标签跳转，右键菜单等；

1.  `return false` ,以对象属性的方式进行注册的事件才有效；
2.  `event.preventDefault()`;W3C标准，IE9以下不兼容
3.  `event.returnValue=false`;兼容IE
4.  还可以在js行间写  
    `<a href="javascript:void(false)" >demo</a>`

function cancelHandler(e){ 
    	if(e.preventDefault){ 
    		e.preventDefault();
    	}else{ 
    		e.returnValue=false;
    	}
    }

# 绑定鼠标的右击事件 #

document.oncontextmenu=function(){ 
    	console.log('a');
    	return false;
    }

# 封装一个取消冒泡事件的方法 #

function stooBubble(event){ 
    	if(event.stopPropagation){ 
    		event.stopPropagation();
    	}else{ 
    		event.cancelBubble=true;
    	}
    }

`e.stopPropagation()`是W3C标准提供的。  
`e.cancelBubble()`是IE和chrome都支持的一个函数。

# 给ul中的li绑定点击事件 #

如果需要打印的是li对应的索引值，则跟i索引有关，则会形成闭包，如果是打印li中的内容，则不会形成闭包了。

var lis = document,getElementsByTagName('li');
    var len=lis.length;
    for(var i=0;i<len;i++){ 
    	lis[i].onclick=function(){ 
    		console.log(this.innerText);
    	}
    }

# 兼容性的写法获取事件源对象 #

elem.onclick=function(e){ 
    	var event = e || window.event;
    	var target = event.target || event.srcElement;
    	console.log(target);
    }

# 鼠标的拖拽事件 #

`e.pageX`就是当前鼠标与文档边缘的x方向的距离  
`e.pageY`就是当前鼠标与文档边缘的y方向的距离  
鼠标的拖拽事件，需要把鼠标的移动和抬起事件绑定到document上面；

# String.fromCharCode #

document.onkeypress=function(e){ 
    	console.log(String.fromCharCode(e.charCode));
    }

`e.charCode`可以获取当前按键的ASII码值，通过ASCII码得到字符串的方式就是`String.fromCharCode(xxx)`;

# 异步加载js #

javascript 异步加载的三种方案

1.  defer异步加载，但是要等到dom文档全部解析完成才会被执行。只有IE能用，也可以将代码写到内部。
2.  async异步加载，加载完成就执行，async只能加载外部脚本，不能把js写在script标签里面。
3.  创建script，插入到DOM中，加载完成后callBack;

以上方法中，defer和async执行是不阻塞页面。

# 异步加载Js时间线 #

1.  创建一个script标签
2.  给script标签添加属性，并开启线程添加一个demo.js
3.  最后加入到head标签中

var script=document.createElement('script');
    script.type="text/javascript";
    script.src="demo.js";
    document.head.appendChild(script);

## js加载时间线 ##

1.  创建Document对象，并开始解析WEB页面，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中，这个阶段`document.readyState="loading"`.
2.  遇到link外部css，创建线程加载，并继续解析文档。
3.  遇到script外部js，并且没有设置`async/defer`,浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4.  遇到script外部js,并且设置有`async/defer`，浏览器创建线程加载，并继续解析文档，
5.  遇到img等，先正常解析dom结构，然后浏览器异步加载src,并继续解析文档。
6.  当文档解析完成,`document.readyState="interactive"`.
7.  文档解析完成后，所有设置有defer的脚本会按照顺序执行（注意与async的不同，但同样禁止使用`document.write()`）;
8.  document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9.  当所有的async的脚本加载完成并执行后，Img等加载完成后，`document.readyState="complete"`,window对象触发Load事件。  
    10.从此，以异步响应的方式处理用户输入/网络事件等。

# 正则表达式-阿里笔试题 #

写一个正则表达式，检验字符串首尾是否含有数字？  
`var reg=/^\d|\d$/g`;  
`str.test(reg)`如果结果是true，则首尾含有数字，如果结果是false,则首尾不含有数字。

# 正则表达式-字符串去重 #

`var reg=/(\w)\1*/g`;  
`str.replace(reg,"$1")`;  
利用正则表达式实现字符串的去重，(\\w)\\1 子表达式 \* 代表是多个匹配。

# 正则表达式-小驼峰命名 #

var reg = /-(\w)/g;
    var str = "the-first-name";
    console.log(str.replace(reg,function($,$1){ 
    	return $1.toUpperCase();
    }))

# 正则表达式-xxyy转为yyxx #

var reg = /(\w)\1(\w)\2/g;
    var str = "aabb";
    console.log(str.replace(reg,function($,$1,$2){ 
    	return $2 + $2 + $1 + $1;
    }))

利用公式进行aabb转化为bbaa;

# 正则表达式-给数字打点 #

var reg = /(?=(\B)(\d{3}+$))/g;
    console.log(str.replace(reg,","));

1000000转化为1000,000