JavaScript的型別在TypeScript中認識物件型別 發佈日期: 2022-08-102022-07-25 作者: yijun 文、意如老師 參考目錄:第1篇、TypeScript初探篇第2篇、JavaScript的型別在TypeScript中應用(一)-認識原始資料型別第3篇、JavaScript的型別在TypeScript中應用(二)-認識物件型別第4篇、TypeScript物件導向-類別(Class)的使用方式第5篇、TypeScript物件導向-介面(Interface)的使用方式 JavaScript的型別有兩種,分成原始資料型別(Primitive data types)與物件型別(Object types),原始資料型別介紹請參閱上一篇,本篇即將介紹物件型別與其它常見的型別。 任務一:認識物件型別(Object types)1-1:認識物件1-2:修改物件型別中的值1-3:物件可當參數傳遞任務二:認識鴨子類型(Duck Typing)任務三:其它常見的資料類型3-1:認識Map3-2:認識Set3-3:認識Tuple元組 任務一:認識物件型別(Object types) 1-1:認識物件物件是由鍵(key)與值(value)組成。值可以是字串、數值、函數、陣列、物件等。 var myobject = { key1: “mydata”, // 字串 key2: 123, //整數 key3: function() {// 函數 console.log(“ABC“); return “BCD“ }, key4:[“arr1”, “arr2”] //陣列}//物件console.log(myobject) /*{ key1: ‘mydata’, key2: 123, key3: [Function: key3], key4: [ ‘arr1’, ‘arr2’ ]} */ //物件中的值console.log(myobject.key1) //mydata//物件中的函數console.log(myobject.key3())//ABC BCD// 1-2:修改物件型別中的值注意修改的資料值要與物件中的型別一樣 //物件var myinfo = { city: “台北“, memberid: 123, mydata: function () { } };//修改物件值myinfo.city = “高雄“; //資料要與物件中的型別一致myinfo.memberid = 999;//修改屬性值myinfo.mydata = function () { console.log(“Hello:” + myinfo.city); //hello 高雄 console.log(“Memeber:”+myinfo.memberid);//Member:999};//呼叫物件中的函數myinfo.mydata(); 1-3:物件可當參數傳遞物件也可以當作一個參數傳遞給函數Function //物件也可以當作一個參數傳遞給函數Functionvar fruit = { fruit1: “Apple“, fruit2: “Kiwi“,};var buy = function (obj: { fruit1: string, fruit2: string }) { console.log(“水果1 : ” + obj.fruit1);//水果1 :Apple console.log(“水果2 : ” + obj.fruit2);//水果2 :Kiwi}buy(fruit); 任務二:認識鴨子類型(DuckTyping) 鴨子類型是動態類型的一種,也是多態(polymorphism)的一種。 //鴨子類型DcukTypinginterface ISize { width: number height: number}//(代入參數型別):return型別function addPoints(box1: ISize, box2: ISize): ISize { var w = box1.width + box2.width var h = box1.height + box2.height return { width: w, height: h }}//呼叫型別並把參數代入var newPoint = addPoints( { width: 10, height: 35 }, { width: 25, height: 41 })console.log(newPoint); //{ width: 35, height: 76 }export { }; //使用 ES Module 任務三:其它常見的資料類型 3-1:認識MapMap是ES6中新引入的一種新的類型,使用鍵(Key)值(Value)儲存資料任何值都可以作為鍵(Key)或一個值(Value)。 使用 Map類型時需要使用new 來建立Map資料 //MAP 類型var myMap = new Map([ [“key1”, “value1”], [“key2”, “value2”]]); console.log(myMap);//Map(2) { ‘key1’ => ‘value1’, ‘key2’ => ‘value2’ } 因Map 是 ES6 中新引入的一種新的類型,編譯時需要使用es6來編譯指令:tsc – -target es6 t4.ts執行:node t4.js Map常用函數及屬性 //Map常用函數及屬性var mycitymapping = new Map();//設定 Map鍵(key)值(value)mycitymapping.set(“台北“, 1);mycitymapping.set(“新竹“, 2);mycitymapping.set(“高雄“, 3);console.log(mycitymapping);//Map(3) { ‘台北’ => 1, ‘新竹’ => 2, ‘高雄’ => 3 }//抓取對應的valueconsole.log(mycitymapping.get(“高雄“));// 3//判斷是否有該鍵(key)console.log(mycitymapping.has(“新竹“));// trueconsole.log(mycitymapping.has(“宜蘭“));// false//Map大小console.log(mycitymapping.size);// 3//删除高雄console.log(mycitymapping.delete(“高雄“));// trueconsole.log(mycitymapping);//Map(2) { ‘台北’ => 1, ‘新竹’ => 2}//移除 Map mycitymapping.clear();console.log(mycitymapping);//{} 3-2:認識SetSet 陣列值是唯一不重複 //setvar mySet = new Set ( [ 1 , 2 , 2 , 4 , 4 ] ) ;console.log(mySet);//Set(3) { 1, 2, 4 } 3-3:認識Tuple元組陣列中資料通常來說類型是一樣的,如果需要存取的類型不同,就需要使用Tuple元組,也可以做為參數傳給函數。 //元組資料可以儲存不同類型var mytuple = [“John“,32]; console.log(mytuple)//[ ‘John’, 32 ]console.log(mytuple[0])//Johnconsole.log(mytuple[1])//32console.log(“長度:”+mytuple.length)//2mytuple.push(“ABC“)//新增一個元素console.log(mytuple)//[ ‘John’, 32, ‘ABC’ ]console.log(mytuple.pop()+” 刪除了“)//刪除最後元素console.log(mytuple)//[ ‘John’, 32 ]mytuple[0] = “Mary“//更新元素console.log(mytuple)//[ ‘Mary’, 32 ] 加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧! 不同頻道,不同知識! Facebook Instagram Youtube 分享此文:分享到 Twitter(在新視窗中開啟)按一下以分享至 Facebook(在新視窗中開啟)按一下以分享到 Telegram(在新視窗中開啟)按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)請按讚:喜歡 正在載入... 相關