聯成電腦-讓你價值連城

Photo credit：Pexels

 

 

 

文、意如老師

 

 

Javascript的型別有兩種，分成原始資料型別（Primitive data types）與物件型別（Object types），本篇將介紹原始資料型別與幾種比較常用的型別。

 

 

 

 

 

任務一：認識原始型別

 

所有原始型別都是不能直接更改的但可以替換。

範例1：字串不能直接更改，但可以替換

 

 

 

 

可以使用陣列方法改變陣列

var myarr = [];

console.log(myarr); // []

myarr.push("HelloWorld");

console.log(myarr); // ["HelloWorld"]

 

 

 

 

最新的 ECMAScript 標準定義了七種資料型別分別為

 

字串：string、布林：boolean、數字：number、大整數：bigint、

未定義：undefined、空值： null 、符號值：symbol

 

 

 

1-1使用定義String字串類型

 

var mycity: string = 'Taipei'; //設定字串

var mystr: string = `Hi! 我住在 ${mycity}.`;

// ``用來定義 ES6 中的範本字串， 可使用${ }在字串中放入變數

console.log(mystr); //Hi! 我住在 Taipei.

 

 

 

 

1-2使用定義boolean布林類型

 

//使用定義boolean字串類型

var myboolean: boolean = false;

console.log(myboolean); //fasle

myboolean = true;

console.log(myboolean);//true

 

 

 

 

1-3使用定義Ｎumber數字類型

 

Number最大且安全的整數為 (253-1) = 9,007,199,254,740,991

 

//使用定義Number數字類型

var binaryLiteral: number = 0b1010; // 二進位

var octalLiteral: number = 0o744;    // 八進位

var decLiteral: number = 6;    // 十進位

var hexLiteral: number = 0xf00d;    // 十六進位

 

 

 

 

1-4使用定義BigInt大整數類型

 

用於大於此數9,007,199,254,740,991，BigInt可以達到數百萬個位數

 

//使用定義BigInt數字類型

var z = BigInt(9007199254740);

console.log(z);

 

 

 

 

1-5使用undefined未定義、null空值類型

 

undefined用於變數為未定義的值

Null用於變數為空值

 

//undefined,null

var abc: string = "123";

var u: undefined;

if (abc === u) {

    console.log(true)

} else {

    console.log(false)

}

 

 

 

 

1-6使用定義symbol符號值類型

 

ES6引入了新的Symbol類型，可用於定義為獨一無二唯一的值。

 

//使用定義Symbol字符號類型

var mysybol = Symbol("ABC");

console.log(mysybol);   // Symbol(ABC)

typeof(mysybol);        // "symbol"

// 相同参数 Symbol() 返回的值不相等

var mysybol2 = Symbol("abc");

console.log(mysybol === mysybol2);  // false

 

 

 

 

任務二：認識其它常用型別

 

2-1認識any任意型別

 

允許值為任意型別。

 

如果是一個普通型別，在賦值過程中改變型別是不被允許的。

 

 

 

 

但如果是 any型別，則允許被賦值為任意型別。

var myinfo: any = 'data';

myinfo = 123;

 

 

 

 

2-2認識Union聯合型別

 

表示取值可以為多種型別中的其一種。

//unionType

var myunion: string | number;

myunion = 'myinfo';

myunion = 123;

 

 

 

 

2-3 認識陣列型別

 

//陣列型別

var myarr: number[] = [1, 2, 3, 4, 5];

console.log(myarr); //[ 1, 2, 3, 4, 5 ]

 

//設定型別如果是number，那就只能是number，不能有其他型別

var myarr2: number[] = [1, 2, "C", 4, 5];

console.log(myarr2);

//拋錯：error TS2322: Type 'string' is not assignable to type 'number'.

 

 

 

 

也可以使用陣列泛型Array<elemType> 來表示陣列

 

//也可以使用陣列泛型（Array Generic） Array<elemType> 來表示陣列

var myarr: Array<string> = ["A","B","C","D","E"];

console.log(myarr);

 

 

 

 

讓陣列中也允許出現任意型別，可以使用 any 型別

//陣列中使用any型別

var myinfo: any[] = ['myinfo', 123, { city: 'taipei', age: 18 }];

console.log(myinfo)

 

 

 

 

2-4認識函式Function型別

 

設定傳入參數的型別name為字串型別，age為number型別

function datainfo(name: string, age: number) {

    console.log(`My name is ${name},I'm ${age} years old`);

    console.log("I'm " + age + "years old");

}

datainfo('John', 18);

 

 

 

一個函式有輸入和輸出型別設定

 

//函式型別

function cul(a: number, b: number): number {

    return a + b;

}

console.log(cul(1,2)); //3

export {}; //使用 ES Module