百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

抽空三分钟,读懂 Object 、 object 和 「 」 三者之间区别

myzbx 2025-06-30 18:48 4 浏览

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

刚接触 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

错误提示:

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

此时报错信息:

如果此时将 tsconfig.json 文件中的 strict 严格模式设置为 false 时,就不会报错了。因此在严格模式下,不能将 undefined 和 null 赋值给 Object 类型的值。

同理,对应的 object 也是一样的结果。

1.3、{}

{ } 即空类型,描述了一个没有成员的对象。当你视图访问这样的一个对象的任意属性时,typeScript 会产生一个编译错误。

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

错误提示:

对象字面量 { } 限制对象时,最大优点就是能够对对象中的属性有更好的限制引用数据类型。

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() 方法的类型,包含原始和非原始类型。

相关推荐

使用 Siemens Teamcenter Digital Reality Viewer 打造逼真的数字孪生

现代产品通常由数百万个部件组成,需要复杂的设计和协作。工业世界在管理复杂性方面面临重大挑战,传统的可视化工具无法渲染这些大型的多CAD组件,从而无法充分利用数字孪生的优势。为了解决这些难题,西门子...

如何在JavaScript中实现数字输入框的范围限制?

在JavaScript语言中,实现数字输入框的范围限制可以通过多种方式实现,最常见的方式是利用JavaScript的事件监听机制,和通过JavaScript的条件判断语句来实现范围限制。以...

2.3.8.J速算24点终极挑战(速算24点题目及答案)

各位数学高手、脑力达人,今天给大家带来一道超烧脑的**24点挑战**!**数字:2、3、8、J(J=11规则很简单:**用加减乘除和括号,把四个数字组合成24!每个数字只能用一次!****看起...

分布式系统进阶二十一之短链接生成原理

前言短链接(ShortURL)是一种通过缩短网页链接长度来方便分享的技术。相比于传统的长链接,短链接更简洁明了,更易于在社交媒体等平台上分享和传播。在本文中,我们将会详细解释短链接的定义、作用及其构...

一、SpringBoo中Mybatis多数据源动态切换

我们以一个实例来详细说明一下如何在SpringBoot中动态切换MyBatis的数据源。一、需求1、用户可以界面新增数据源相关信息,提交后,保存到数据库2、保存后的数据源需要动态生效,并且可以由用户动...

「JS 逆向百例」层层嵌套!某加速商城 RSA 加密

声明本文章中所有内容仅供学习交流,敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!逆向目标目标:某加速商城登录接口主页:a...

Spring Data Jpa 介绍和详细入门案例搭建

1.SpringDataJPA的概念在介绍SpringDataJPA的时候,我们首先认识下Hibernate。Hibernate是数据访问解决技术的绝对霸主,使用O/R映射(Object-Re...

SpringBoot 开发 Web 系统,快速入门指南!

01、背景介绍在之前的文章中,我们简单的介绍了SpringBoot项目的创建过程,了解了SpringBoot开箱即用的特性,本篇文章接着上篇的内容继续介绍SpringBoot用于we...

Nacos3.0重磅来袭!全面拥抱AI,单机及集群模式安装详细教程!

之前和大家分享过JDK17的多版本管理及详细安装过程,然后在项目升级完jdk17后又发现之前的注册和配置中心nacos又用不了,原因是之前的nacos1.3版本的,版本太老了,已经无法适配当前新的JD...

golang语言的魅力精华之玩转通道channel 值得你反复阅读100遍

通道用例大全在阅读本文之前,请先阅读通道一文。那篇文章详细地解释了通道类型和通道值,以及各种通道操作的规则细节。一个Go新手程序员可能需要反复多次阅读那篇文章和当前这篇文章来精通Go通道编程。本文...

2小时快速搭建一个高可用的IM系统

“笔者2019年参加了一次Gopher大会,有幸听探探的架构师分享了他们2019年微服务化的过程。图片来自Pexels本文快速搭建的IM系统也是使用Go语言来快速实现的,这里先和...

分库分表以后,如何管理几万张分片表?

大家好,我是小富~ShardingSphere实现分库分表,如何管理分布在不同数据库实例中的成千上万张分片表?上边的问题是之前有个小伙伴看了我的分库分表的文章,私下咨询我的,看到他的提问我第一感觉就是...

Spring Boot JDBC 与 JdbcTemplate 全面指南(万字保姆级教程)

一、SpringBootJDBC基础1.1JDBC简介与演进JDBC(JavaDatabaseConnectivity)是Java语言中用来规范客户端程序如何访问数据库的应用程序...

Flink SQL 知其所以然(六)| 维表 join 的性能优化之路(上)

废话不多说,咱们先直接上本文的目录和结论,小伙伴可以先看结论快速了解博主期望本文能给小伙伴们带来什么帮助:背景及应用场景介绍:博主期望你能了解到,flinksql提供了轻松访问外部存储的loo...

大数据Hadoop之——Flink Table API 和 SQL(单机Kafka)

一、TableAPI和FlinkSQL是什么TableAPI和SQL集成在同一套API中。这套API的核心概念是Table,用作查询的输入和输出,这套API都是批处理和...