JavaScript：資料型別
阿新 • • 發佈：2018-11-09
JavaScript中資料型別分為兩種：
1、基本資料型別
string number boolean null undefined
2、引用型別
陣列、Object、function
一、基本資料型別
二、引用型別
1、Array
Array型別有兩種定義方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>陣列</title> <script> window.onload=function(){ //Array型別 //第一種使用Array建構函式 var arr=new Array(); arr[0]="1";// 陣列預設索引從0開始 arr[1]="2"; // vararr1=new Array("a","b","c"); // 使用字面量的表示法 var arr2=[1,2,3,4,5]; // 數組裡面可以包含各種資料型別 var arr3=[1,"2",true,[1,2],{id:1}]; // 訪問陣列元素 console.log(arr3[4].id); }; </script> </head> <body> </body> </html>
把程式碼複製到瀏覽器裡面執行結果：
2、object型別
2.1 使用建構函式的方式建立物件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>物件</title> <script> window.onload=function(){ // object型別 // 第一種object建構函式 var obj=new Object(); // 屬性 obj.name="tom"; obj.age=24; // 方法 obj.action=function(){ console.log("我的名字是:"+this.name+",年齡是:"+this.age); }; // 輸出name屬性的值 console.log("姓名:"+obj.name); // 執行方法 obj.action(); }; </script> </head> <body> </body> </html>
執行結果：
2.2 使用字面量的方式建立物件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>物件</title> <script> window.onload=function(){ // object型別 // 第一種object建構函式 /* var obj=new Object(); // 屬性 obj.name="tom"; obj.age=24; // 方法 obj.action=function(){ console.log("我的名字是:"+this.name+",年齡是:"+this.age); }; // 輸出name屬性的值 console.log("姓名:"+obj.name); // 執行方法 obj.action(); */ // 第二種字面量 // 1、簡單字面量 var obj1={}; obj1.name="tom"; obj1.age=24; obj1.action=function(){ console.log("我是簡單字面量") }; // 屬性 console.log(obj1.name); // 方法 obj1.action(); // 2、巢狀字面量 var obj2={ name:"jack", age:25, action:function(){ console.log("我是巢狀字面量"); } }; // 屬性 console.log(obj2.age); // 方法 obj2.action(); }; </script> </head> <body> </body> </html>
執行結果：
2.3 使用工廠方式建立物件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>物件</title> <script> window.onload=function(){ // object型別 // 第一種object建構函式 /* var obj=new Object(); // 屬性 obj.name="tom"; obj.age=24; // 方法 obj.action=function(){ console.log("我的名字是:"+this.name+",年齡是:"+this.age); }; // 輸出name屬性的值 console.log("姓名:"+obj.name); // 執行方法 obj.action(); */ // 第二種字面量 /* // 1、簡單字面量 var obj1={}; obj1.name="tom"; obj1.age=24; obj1.action=function(){ console.log("我是簡單字面量") }; // 屬性 console.log(obj1.name); // 方法 obj1.action(); // 2、巢狀字面量 var obj2={ name:"jack", age:25, action:function(){ console.log("我是巢狀字面量"); } }; // 屬性 console.log(obj2.age); // 方法 obj2.action(); */ // 第三種工廠方式 function createObj(){ var obj3=new Object(); obj3.name="kevin"; obj3.action=function(){ console.log("我是通過工廠方式建立的物件"); }; // 返回建立的物件 return obj3; }; // 引用 var obj4=createObj(); // 輸出屬性 console.log(obj4.name); // 呼叫方法 obj4.action(); // 工廠方式也可以使用傳遞引數的方式 function createObjWithPara(name,age){ var obj5={ name:name, age:age, action:function(){ console.log("我是呼叫引數的工廠方式建立的物件"); } }; // return obj5; }; var obj6=createObjWithPara("jon",30); // 輸出屬性 console.log("姓名："+obj6.name+",年齡："+obj6.age); // 呼叫方法 obj6.action(); }; </script> </head> <body> </body> </html>
執行結果：
2.4 使用建構函式的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>物件</title> <script> window.onload=function(){ // object型別 // 第一種object建構函式 /* var obj=new Object(); // 屬性 obj.name="tom"; obj.age=24; // 方法 obj.action=function(){ console.log("我的名字是:"+this.name+",年齡是:"+this.age); }; // 輸出name屬性的值 console.log("姓名:"+obj.name); // 執行方法 obj.action(); */ // 第二種字面量 /* // 1、簡單字面量 var obj1={}; obj1.name="tom"; obj1.age=24; obj1.action=function(){ console.log("我是簡單字面量") }; // 屬性 console.log(obj1.name); // 方法 obj1.action(); // 2、巢狀字面量 var obj2={ name:"jack", age:25, action:function(){ console.log("我是巢狀字面量"); } }; // 屬性 console.log(obj2.age); // 方法 obj2.action(); */ /* // 第三種工廠方式 function createObj(){ var obj3=new Object(); obj3.name="kevin"; obj3.action=function(){ console.log("我是通過工廠方式建立的物件"); }; // 返回建立的物件 return obj3; }; // 引用 var obj4=createObj(); // 輸出屬性 console.log(obj4.name); // 呼叫方法 obj4.action(); // 工廠方式也可以使用傳遞引數的方式 function createObjWithPara(name,age){ var obj5={ name:name, age:age, action:function(){ console.log("我是呼叫引數的工廠方式建立的物件"); } }; // return obj5; }; var obj6=createObjWithPara("jon",30); // 輸出屬性 console.log("姓名："+obj6.name+",年齡："+obj6.age); // 呼叫方法 obj6.action(); */ // 第四種建構函式 首字母大寫，使用駝峰命名方式 相當於一個公共的方法 function CreateObj(){ this.name="tom"; this.action=function(){ console.log(this.name); } }; // 例項化 var obj7=new CreateObj(); // 輸出屬性 console.log(obj7.name); // 呼叫方法 obj7.action(); }; </script> </head> <body> </body> </html>
執行結果：
注意：建構函式的方式也可以傳遞引數。
3、function
function建立函式有以下兩種方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>function型別</title> <script> window.onload=function(){ // function 型別 建立函式 // 函式宣告 function fun(name){ return name; }; // 函式表示式 var fun2=function(name){ return name; }; }; </script> </head> <body> </body> </html>
兩種方式的區別：
兩種建立函式的執行順序不同，解析器會先讀取函式宣告，函式表示式必須要等待解析器執行到相應的程式碼才會執行。看下面的程式碼
1、函式宣告的方式建立函式，建立的函式可以在函式宣告前或者函式聲明後呼叫：
函式宣告前呼叫：
函式聲明後呼叫：
2、函式表示式只能在其之後呼叫
如果在前面呼叫會直接報錯：
