技術文章 » javascript中有幾種型別

javascript中有幾種型別

2022-09-30 18:01:39

有9種資料型別：1、字串型別，是一段以引號包裹起來的文字；2、數值型別，用來定義數值；3、布林型別，只有兩個值；4、Null型別，表示一個「空」值，即不存在任何值；5、Undefined型別，表示未定義；6、Symbol型別，表示獨一無二的值；7、物件型別，是一組由鍵、值組成的無序集合；8、陣列型別，是一組按順序排列的資料的集合；9、函數型別，是一段具有特定功能的程式碼塊。

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

資料型別指的是可以在程式中儲存和操作的值的型別，每種程式語言都有其支援的資料型別，不同的資料型別用來儲存不同的資料，例如文字、數值、影象等。

JavaScript 是一種動態型別的語言，在定義變數時不需要提前指定變數的型別，變數的型別是在程式執行過程中由 JavaScript 引擎動態決定的，另外，您可以使用同一個變數來儲存不同型別的資料，例如：

var a;  // 此時 a 為 Undefined
a = "http://c.biancheng.net/"; // 此時 a 為 String 型別
a = 123;  // 此時 a 為 Number 型別
登入後複製

JavaScript 中的資料型別可以分為兩種型別：

  • 基本資料型別（值型別）：字串（String）、數位（Number）、布林（Boolean）、空（Null）、未定義（Undefined）、Symbol；

  • 參照資料型別：物件（Object）、陣列（Array）、函數（Function）。

提示：Symbol 是 ECMAScript6 中引入的一種新的資料型別，表示獨一無二的值。

1、String 型別

字串（String）型別是一段以單引號''或雙引號""包裹起來的文字，例如 '123'、"abc"。需要注意的是，單引號和雙引號是定義字串的不同方式，並不是字串的一部分。

2、Number 型別

數值（Number）型別用來定義數值，JavaScript 中不區分整數和小數（浮點數），統一使用 Number 型別表示

注意：Number 型別所能定義的數值並不是無限的，JavaScript 中的 Number 型別只能表示 -(2∧53 - 1) 到 (2∧53 -1) 之間的數值。

3、Boolean 型別

布林（Boolean）型別只有兩個值，true（真）或者 false（假），在做條件判斷時使用的比較多，您除了可以直接使用 true 或 false 來定義布林型別的變數外，還可以通過一些表示式來得到布林型別的值

4、Null 型別

Null 是一個只有一個值的特殊資料型別，表示一個「空」值，即不存在任何值，什麼都沒有，用來定義空物件指標。

使用 typeof 操作符來檢視 Null 的型別，會發現 Null 的型別為 Object，說明 Null 其實使用屬於 Object（物件）的一個特殊值。因此通過將變數賦值為 Null 我們可以建立一個空的物件。

5、Undefined 型別

Undefined 也是一個只有一個值的特殊資料型別，表示未定義。當我們宣告一個變數但未給變數賦值時，這個變數的預設值就是 Undefined。

6、Symbol 型別

Symbol 是 ECMAScript6 中引入的一種新的資料型別，表示獨一無二的值。

Symbol值通過Symbol函數生成。物件的屬性名可以有兩種型別，一種是原來就有的字串，另一種就是新增的 Symbol 型別。屬性名屬於 Symbol 型別的，都是獨一無二的，可以保證不會與其他屬性名產生衝突。

let s1=Symbol()
let s2=Symbol()
console.log(s1)
//Symbol()
console.log(s2)
//Symbol()
console.log(s1===s2)
//false

//Symbol函數能接受字串作為引數，表示對Symbol範例的描述
let s1=Symbol('xxx')
let s2=Symbol('hhh')
console.log(s1)
//Symbol(xxx)
console.log(s2)
//Symbol(hhh)
console.log(s1===s2)
//false複製程式碼
登入後複製

Symbol函數前不能使用new命令，會報錯。這是因為生成的 Symbol 是一個原始型別的值，不是物件。也就是說，由於 Symbol 值不是物件，所以不能新增屬性。相當於是一種特殊的字串。

應用場景

  • 作為屬性名

由於 Symbol 值都是不相等的，這意味著 Symbol 值可以作為識別符號，用在物件的屬性名，就能保證不會出現同名的屬性。這對於一個物件由多個模組構成的情況非常有用，防止某一個鍵被不小心改寫或覆蓋。

const grade={
    張三:{address:'qqq',tel:'111'},
    李四:{address:'aaa',tel:'222'},
    李四:{address:'sss',tel:'333'},
}
console.log(grade)
//張三: {address: "qqq", tel: "111"} 李四: {address: "sss", tel: "333"}
//物件的key值不能重複 如果有重複 後面的value值就會覆蓋前面的


//使用Symbol解決，相當於一個獨一無二的字串
const stu1=Symbol('李四'）
const stu2=Symbol('李四')
console.log(stu1===stu2)
//false
const grade={
    [stu1]:{address:'aaa',tel:'222'},
    [stu2]:{address:'sss',tel:'333'},
}
console.log(grade)
//李四：{address:'sss',tel:'222'} 李四：{address:'sss',tel:'333'}
console.log(grade[stu1])
//李四：{address:'sss',tel:'222'}
console.log(grade[stu2])
//李四：{address:'sss',tel:'333'}
登入後複製

  • 屬性遍歷

const sym=Symbol('imooc')
class User{
    constructor(name){
        this.name=name
        this[sym]='imooc.com'
    }
    getName(){
        return this.name+this[sym]
    }
}
const user=new User('www')

//for in的方法不能遍歷到Symbol屬性 像被隱藏了
for(let key in user){
    console.log(key)//name 
}

//Object.keys(obj)方法也不能遍歷到Symbol屬性
for(let key of Object.keys(user)){
    console.log(key)//name 
}

//Object.getOwnPropertySymbols(obj)只能獲取到Symbol屬性
for(let key of Object.getOwnPropertySymbols(user)){
    console.log(key)//Symbol(imooc) 
}

//Reflect.ownKeys(obj)物件的屬性都能獲取到
for(let key of Reflect.ownKeys(user)){
    console.log(key)
    //name 
    //Symbol(imooc) 
}
登入後複製

  • 消除魔術字串

魔術字串指的是，在程式碼中多次出現、與程式碼形成強耦合的某一個具體的字串或者數值。風格良好的程式碼，應該儘量消除魔術字串，改成一些含義清晰的變數代替。

function getArea(shape) {
    let area = 0
    switch (shape) {
        case 'Triangle':
            area = 1
            break
        case 'Circle':
            area = 2
            break
    }
    return area
}
console.log(getArea('Triangle'))
//Triangle和Circle就是魔術字串。多次出現，與程式碼形成了「強耦合」，不利於後面的修改和維護。

const shapeType = {
    triangle: Symbol(),
    circle: Symbol()
}

function getArea(shape) {
    let area = 0
    switch (shape) {
        case shapeType.triangle:
            area = 1
            break
        case shapeType.circle:
            area = 2
            break
    }
    return area
}
console.log(getArea(shapeType.triangle))
登入後複製

7、Object 型別

Object資料型別，稱為物件，是一組由鍵、值組成的無序集合。可以用new操作符後跟要建立的物件型別的名稱來建立。也可以用字面量表示法建立。在其中新增不同名（包含空字串在內的任意字串）的屬性。

1）構造物件

使用 new 運運算元呼叫建構函式，可以構造一個範例物件。具體用法如下：

var objectName = new functionName(args);
登入後複製

引數說明如下：

  • objectName：返回的範例物件。

  • functionName：建構函式，與普通函數基本相同，但是不需要 return 返回值，返回範例物件，在函數內可以使用 this 預先存取。

  • args：範例物件初始化設定參數列。

範例

下面範例使用不同型別的建構函式定義各種範例。

var o = new Object(); //定義一個空物件

var a = new Array(); //定義一個空陣列

var f = new Function(); //定義一個空函數

2）物件直接量

使用直接量可以快速建立物件，也是最高效、最簡便的方法。具體用法如下：

var objectName = {
    屬性名1 : 屬性值1,
    屬性名2 : 屬性值2,
    ...
    屬性名n : 屬性值n
};
登入後複製

在物件直接量中，屬性名與屬性值之間通過冒號進行分隔，屬性值可以是任意型別的資料，屬性名可以是 JavaScript 識別符號，或者是字串型表示式。屬性於屬性之間通過逗號進行分隔，最後一個屬性末尾不需要逗號。

在 JavaScript 中，物件型別的鍵都是字串型別的，值則可以是任意資料型別。要獲取物件中的某個值，可以使用物件名.鍵的形式，如下例所示：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};
console.log(person.name);       // 輸出 Bob
console.log(person.age);        // 輸出 20
登入後複製

8、Array 型別

陣列（Array）是一組按順序排列的資料的集合，陣列中的每個值都稱為元素（Element），每個元素的名稱（鍵）被稱為陣列下標（Index）。陣列的長度是彈性的、可讀寫的。

陣列中可以包含任意型別的資料。

在 JavaScript 中定義（建立或者宣告）陣列的方法有兩種：構造陣列和陣列直接量。

1）構造陣列

使用 new 運運算元呼叫 Array() 型別函數時，可以構造一個新陣列。

範例：

  • 直接呼叫 Array() 函數，不傳遞引數，可以建立一個空陣列。

var a = new Array();  //空陣列
登入後複製

  • 傳遞多個值，可以建立一個實陣列。

var a = new Array(1, true, "string", [1,2], {x:1,y:2});  //實陣列
登入後複製

每個引數指定一個元素的值，值得型別沒有限制。引數的順序也是陣列元素的順序，陣列的 length 屬性值等於所傳遞引數的個數。

  • 傳遞一個數值引數，可以定義陣列的長度，即包含元素的個數。

var a = new Array(5);  //指定長度的陣列
登入後複製

引數值等於陣列 length 的屬性值，每個元素的值預設值為 undefined。

  • 如果傳遞一個引數，值為 1，則 JavaScript 將定義一個長度為 1 的陣列，而不是包含一個元素，其值為 1 的陣列。

var a = new Array(1);
console.log(a[0]);
登入後複製

2）陣列直接量

陣列直接量的語法格式：在中括號中包含多個值列表，值之間用逗號分隔。

下面程式碼使用陣列直接量定義陣列。

var a = [];  //空陣列
var a = [1, true, "0", [1,0], {x:1,y:0}];  //包含具體元素的陣列
登入後複製

推薦使用陣列直接量定義陣列，因為陣列直接量是定義陣列最簡便、最高效的方法。

9、Function 型別

函數（Function）是一段具有特定功能的程式碼塊，函數並不會自動執行，需要通過函數名呼叫才能執行，如下例所示：

function sayHello(name){
    return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res);  // 輸出 Hello, Peter
登入後複製

此外，函數還可以儲存在變數、物件、陣列中，而且函數還可以作為引數傳遞給其它函數，或則從其它函數返回，如下例所示：

var fun = function(){
    console.log("http://c.biancheng.net/js/");
}
function createGreeting(name){
    return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
    return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");
console.log(result);  // 輸出 Hello, Peter
登入後複製

【推薦學習：】

以上就是javascript中有幾種型別的詳細內容，更多請關注TW511.COM其它相關文章！