tft每日頭條

 > 生活

 > object方法怎麼理解

object方法怎麼理解

生活 更新时间:2024-08-28 01:13:28

typeScript 中引入了 object 類型,用于表示非原始類型。在 JS 中被叫做原始類型的有:number、string、boolean、bigint、symbol、null 和 undefined 。

object方法怎麼理解(抽空三分鐘讀懂)1

剛接觸 TS 可能會對 object、Object 和 { } 很困惑,不知道它們之間有什麼區别, 本篇文章就讓我們來詳細學習下吧!

一、學習 object、Object 和 {}

1.1、object

object 是非原始類型,不能夠讓原始的基礎數據類型的數據賦值給它,不能夠作為他的一個類型值得具體值。因此 object 可以是任意的非原始類型,如對象、方法、數組。

// 對象類型 let obj: object = { name:'前端代碼女神' }; //方法 let fun: object = function () { } //數組 let arr: object=[]

如果賦值給一個原始數據類型時:

let num: object=1

錯誤提示:

object方法怎麼理解(抽空三分鐘讀懂)2

1.2、Object

Object 代表的是所有擁有 toString() 和 hasOwnProperty() 方法的類型,也就是包含原始類型和非原始類型。因此可以把任意的數據類型值賦值給 Object 類型值,如:

// 對象類型 let obj: Object = { name:'前端代碼女神' }; //方法 let fun: Object = function () { } // array 類型 let arr: Object = [1, 2, 3] // number 類型 let num: Object = 1;

如果是 undefined 和 null 時:

let und: Object = undefined let nul: Object = null

此時報錯信息:

object方法怎麼理解(抽空三分鐘讀懂)3

如果此時将 tsconfig.json 文件中的 strict 嚴格模式設置為 false 時,就不會報錯了。因此在嚴格模式下,不能将 undefined 和 null 賦值給 Object 類型的值。

同理,對應的 object 也是一樣的結果。

1.3、{}

{ } 即空類型,描述了一個沒有成員的對象。當你視圖訪問這樣的一個對象的任意屬性時,typeScript 會産生一個編譯錯誤。

let obj = { } obj.name = "哈哈"

錯誤提示:

object方法怎麼理解(抽空三分鐘讀懂)4

對象字面量 { } 限制對象時,最大優點就是能夠對對象中的屬性有更好的限制引用數據類型。

let obj: { name: string, age: number } = { name: '前端程序員', age:20 } console.log(obj.name) //前端程序員 console.log(obj.age)//20

如果修改對象中的屬性時:

obj.name = "abc" console.log(obj.name) // abc // error obj.name = 123

但是仍然可以使用 Object 類型上的所有屬性和方法,這些屬性和方法可以通過 JS 的原型鍊隐式的使用:

console.log(obj.toString());//[object Object]

二、object、Object 和 { } 三者之間區别

object 、Object 和 { } 我們對這三者之間的區别與聯系做一個總結,分别有:

  • 類型描述差異:object 是 ts 引入的新類型,表示非原始類型;Object 類型包含原始和非原始類;{} 描述的是空類型。
  • object 與 Object 關系:使用 object 類型,可以更好地表示類似 Object.create 這樣的 API 。object 可以 替換 Object,但是它兩不完全等價。
  • Object 包括了所有類型,在嚴格模式下不能夠讓 null 和 undefined 賦值給我們的 Object 的類型;object 是非原始數據類型,在嚴格模式下 undefined 和 null 不能夠賦值給 object 類型。
  • Object 和 { } 一樣,代表所有擁有的 toString() 和 hasOwnProperty() 方法的類型,包含原始和非原始類型。
,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved