javascript常用知識點總結
阿新 • • 發佈：2018-12-20
null和undefined兩者數值相等，型別不同
if（null==undefined）返回true；if（null===undefined）返回false,兩者不同型別；
var test="2e3";test=parseFloat(test);//test=parseInt(test);
alert(test)；
2000（轉換為float時會用科學計數法，結果為2000）//2（轉換為int型結果為2）
null支援自增自減（–、++）
switch、case語句：若語句中沒有break（在匹配到其中一個case的情況下），條件語句將會順序執行，不會考慮下面case的情況,直到遇到break；若沒有匹配的case，將會執行default，也會執行default下面的case（沒有break的情況下）；
/*執行結果為 01case 02case 03case*/
var i=1;
switch (i){
case 1:document.write("01case");
case 2:document.write("02case");
case 3:document.write("03case");
}
/*執行結果為nofit 03case （當有brake時，執行結果為nofit）*/
var i=5;
switch (i){
case 1:
document.write("01case");
case 2:
document. continue語句跳過當前花括號內的語句；
列印九九乘法表
document.write('<table border="1" cellpading="0" width="800">');
for(var i=1;i<=9;i++)//for(var i=9;i>=1;i--)註釋內容用來列印倒得乘法表
{
document. 百錢買百雞問題
var x,y,z;//x為公雞數量，y為母雞數量，z為小雞數量
var cost;//費用
for(x=0;x<=20;x++){/*公雞最多20只*/
for(y=0;y<=33;y++){/*母雞最多33只*/
z=100-x-y;
if(z%3==0){/*剛好滿足小雞數為整數，且剛好一百隻雞*/
cost=5*x+3*y+z/3;
if(cost==100){
document.write("公雞"+x+"只\n"+"母雞"+y+"只\n"+"小雞"+z+"只<br>");
}
}
}
}
函式引數問題
function calc1(num1,num2)
{
num1=num1||1;/*當函式呼叫不給引數時，num會取值為1，當有引數時，使用原來的引數*/
num2=num2||2;/*同理*/
return (num1+num2);
}
calc1();
可以通過arguments物件實現可變引數的函式，也可以實現預設值的效果；
/*可變引數形式的函式*/
function test()
{
var paramsNum=arguments.length;/*得到傳入引數的個數*/
var sum=0;
for(var i=0;i<paramsNum;i++)
{
sum+=arguments[i];
}
return sum;
}
function test1()
{
//var x=arguments[0]||2;
var x=arguments[0]?arguments[0]:2;
/*同上一句話等價，但是三元運算子只對arguments物件生效*/
var y=arguments[1]||3;
return (x+y);
}
document.write(test(1,3,6,7,9)+"</br>");//26
document.write(test1(3,5)+"</br>");//8
document.write(test1());//5
通過 isFinite()檢測是否為無窮值（函式含義等同於判斷這個數值是否有窮）；
var x=Infinity;/-Infinity,0/0
alert(isFinite(x));//false
建立一個普通的空物件；
var obj=Object.create(Object.prototype);
或者var obj=Object.create(null);
hasOwnPropertype 檢測某個物件是否含有指定的自身屬性(不包括從Object繼承而來的屬性。var obj=Object.create({x:1}))
屬性值中的get和set方法
var obj={
x:1,
y:2,
z:3,
get zhouchang()
{
return this.x+this.y+this.z;
},
set doublecircle(val)
{
this.x*=val;
this.y*=val;
this.z*=val;
}
}
document.write(obj.zhouchang);//沒有該屬性時呼叫get方法，返回結果6
obj.doublecircle=3;//賦值時沒有該屬性，呼叫set方法
document.write(obj.zhouchang);//18
document.write(obj.x);//3，此時屬性值被改變
獲取物件屬性值的三種方式
for(var p in obj)
Object.keys(obj)
Object.getOwnPropertyNames(obj)
正則匹配。exec（string）函式
var str="this is a test hello maIzi hello world";
var patt=/i/g;
var arr;
/*下次執行時會從已經匹配到的元素的下一個位置開始繼續查詢，但是每次只匹配一個，所以陣列arr中只存在一個元素*/
while((arr=patt.exec(str))!==null)
{
var msg='Find '+arr[0]+'!';
msg+='the next position is '+patt.lastIndex;
console.log(msg);
}
unshift 向陣列頭部新增元素 。shift將素組元素從頭部壓出。
/*宣告新陣列*/
var arr=[];
/*向陣列頭部新增元素* 程式碼註釋部分為從尾部向陣列假如元素，也從尾部刪除*/
arr.unshift(1,2,3,'test',null);//arr.push('c','f',1,4,undefinde);
/*從頭部刪除元素*/
arr.shift();//arr.pop();
對瀏覽器適配以及監聽等方法的封裝
var EventUtil={
addHandle:function(element,type,handle){
if(element.addEventListener)
{/*新增監聽*/
element.addEventListener(type,handle,false);
}
else if(element.attachEvent)
{
element.attachEvent('on'+type,handle);
}else{
element['on'+type]=handle;
}
},
removeHandler:function(element,type,handle){
/*移除監聽*/
if(element.removeEventListener){
element.removeEventListener(type,handle,false);
}
else if(element.datachEvent){
element.datachEvent('on'+type,handle);
}
else{
element['on'+type]=null;
}
}，
getTarget:function(event){
return event.target||event.srcElement;
},
getEvent:function(event){
/*獲取事件物件*/
return event?event:window.event;
},
preventDefault:function(event){
//*取消預設事件*/
if(event.preventDefault){
event.preventDefault();
}
else
{
event.returnValue=false;
}
},
stopPropagation:function(event){
/*取消冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}
else
{
event.cancelBubble=true;
}
}
};
對封裝的函式進行測試
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="EventUtil.js"></script>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<input type="button" id="btn1" value="按鈕一" />
<input type="button" id="btn2" value="按鈕二" />
<input type="button" id="btn3" value="按鈕三" />
<script type="text/javascript">
var btn1=document.getElementById("btn1");
var btn3=document.getElementById("btn3");
var btn2=document.getElementById("btn2");
/*var count=0;
btn1.onclick=function()
{
alert("按鈕點選事件"+count++);
if(count==2)
{
btn1.onclick=null;
}
}*/
/*false表明按冒泡順序彈出，true為捕獲截斷，即從外往裡，先是document，然後HTML....*/
/*var count=0;
var handle2=function(){
alert("成功移除");
}
var handle1=function()
{
alert("按鈕點選事件次數"+count++);
if(count==2)
{
btn1.removeEventListener('click',handle1,false);
}
}
//btn1.addEventListener('click',handle1,false);
EventUtil.addHandle(btn1,'click',handle1);*/
/*var e=e||window.event;
if(typeof e.cancelBubble=='undefinded')
{
e.stopPropagation();
}
else
{
e.cancelBubble=true;
}*/
/*btn1.onclick=function()
{
alert("按鈕點選事件");
}*/
/*function test()
{
alert("按鈕點選事件")；
}*/
var test2=function()
{
alert("按鈕點選事件");
};
EventUtil.addHandle(btn2,'click',test2);
var test3=function()
{
alert('事件移除');
EventUtil.removeHandler(btn2,'click',test2);
};
EventUtil.addHandle(btn3,'click',test3);
</script>
</body>
</html>
關於自呼叫函式及閉包問題
/*將函式指定給變數的形式*/
var g=function(){
console.log("excel g");
}
/*自呼叫函式*/
(function()
{
var a=6;
var b=5;
function f()
{
alert(a);
}
window.f=f;
})();
f();
首先我們看自呼叫函式部分，指定window.f=f；（如果需要的函式比較多，都可以按同樣的方式指
定，以便在外部呼叫）目的是在自呼叫函式外部可以直接使用f（）來呼叫我們需要的函式，之所以要用
這種方式是因為可以減少全域性變數的宣告，並且不會再函式執行完銷燬變數，可以讓宣告的變數一直在系
統中佔有一定記憶體，不會銷燬，也實現了js的閉包。
其次上面兩塊程式碼存在問題，在按上述方式寫後，系統會執行並沒有呼叫的g()函式，而不會再往下執
行自呼叫函式，也就是說按上面方式生命的函式g（）,不可以與自呼叫函式共存，需要用字面量形式
或者函式名的形式宣告函式，避免程式出現錯誤。
閉包的理解
function f()
{
var a=2;
var b=23;
return function f2()
{
alert(a+b);
}
}
var res=f();
res();
在跳出f()函式外面。裡面的函式f2()仍然可以呼叫f()的詞法環境，內部函式的scope儲存了f()的詞
法環境，這也是閉包的特性；