1. 數(shù)組去重
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
//[2, "12", 12, 1, 6, 13]
//es6的新特性
2. 深淺拷貝
var myInfo={name:'守候',sex:'男'};
var newInfo=myInfo;
- 假深拷貝
var myInfo={name:'守候',sex:'男'};
var newInfo=Object.assign({},myInfo)
- 真深拷貝
var newArr2=JSON.parse(JSON.stringify(arr));
console.log(arr[0])//{a:1,b:2}
newArr2[0].a=123
console.log(arr[0])//{a:1,b:2}
3. 事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
oUl.addEventListener("click",function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
//如果點(diǎn)擊的最底層是li元素
if(target.tagName.toLowerCase()==='li'){
alert(target.innerHTML)
}
})
</script>
</html>
5. 使用push和apply合并數(shù)組
var arr1=[1,2,3,4,5],arr2=[6,7,8,9,10];
arr1.push.apply(arr1,arr2);
console.log(arr1)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
6. toFixed保留整數(shù)
var a=123.36896335.toFixed(2)
console.log(a)//'123.37'
a=+a
console.log(a)//123.37
var a=123.36896335.toFixed(2)
console.log(a)//'123.37'
a=a|0
console.log(a)//123
//---------------------------------分割線
var a=123.36896335.toFixed(2)
console.log(a)//'123.37'
a=~~a
console.log(a)//123
7. 緩存變量
var arr=[1,2,3,4,5,6]
for(var i=0,i<arr.length;i++){
...
}
//------------------------分割線
var arr=[1,2,3,4,5,6]
for(var i=0,len=arr.length;i<len;i++){
...
}
$('.div1').click(function(){
...
})
//--------------------------分割線
var $div1=$('.div1');
$div1.click(function(){
...
})
8. 使用innerHTML添加元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
//createElement方式
console.time();
for(var i=0;i<10;i++){
var oLi=document.createElement('li');
oLi.innerHTML=i;
oUl.appendChild(oLi);
}
console.timeEnd();
//innerHTML方式
console.time();
var _html='';
for(var i=0;i<10;i++){
_html+='<li>'+i+'</li>'
}
oUl.innerHTML=_html;
console.timeEnd();
</script>
</html>
9. 函數(shù)節(jié)流
function delayFn2 (fn, delay, mustDelay){
var timer = null;
var t_start;
return function(){
var context = this, args = arguments, t_cur = +new Date();
//先清理上一次的調(diào)用觸發(fā)（上一次調(diào)用觸發(fā)事件不執(zhí)行）
clearTimeout(timer);
//如果不存觸發(fā)時(shí)間，那么當(dāng)前的時(shí)間就是觸發(fā)時(shí)間
if(!t_start){
t_start = t_cur;
}
//如果當(dāng)前時(shí)間-觸發(fā)時(shí)間大于最大的間隔時(shí)間（mustDelay），觸發(fā)一次函數(shù)運(yùn)行函數(shù)
if(t_cur - t_start >= mustDelay){
fn.apply(context, args);
t_start = t_cur;
}
//否則延遲執(zhí)行
else {
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
};
}
var count=0;
function fn1(){
count++;
console.log(count)
}
//100ms內(nèi)連續(xù)觸發(fā)的調(diào)用，后一個(gè)調(diào)用會(huì)把前一個(gè)調(diào)用的等待處理掉，但每隔200ms至少執(zhí)行一次
document.onmousemove=delayFn2(fn1,100,200)
