【TS】object类型

object是一个对象,在ts中定义对象类型的语法为:let 变量名 :object = { }
在object类型中,对象内部定义的值是不受类型约束的,只要是一个object类型即可,例如:

let obj : object = {
    name : '艺术概论',  // 字符串
    price : 999   // 数字
}
console.log(obj);   // {name: '艺术概论', price: 999}

object 类型在函数中的使用

// 定义一个函数,参数是object类型,返回值也是object类型
function getObj (obj:object) : object {
    console.log(obj);
    return {
        name : '东方不败',
        age : 100
    }
}

定义object类型,传入的值必须是object类型,否则会报错

console.log(getObj({name : '孙悟空',age : 1000}));  // 正确
// console.log(getObj(123)); // 错误的

某些方法本质是一个对象,所以也可以传入,比如 new String

console.log(getObj(new String('艺术概论')));  // 正确

打印 console.log(new String) 的话可以看到 string是一个对象
在这里插入图片描述


#### new String为什么是一个对象?

通常定义字符串的方法有这些

let str = '东方不败'  // 字符串
let str2 = String('东方不败')  // 字符串
let str3 = new String('东方不败')  // 对象 String{}

前两种方法是基础类型的,str为直接定义基础字符串类型,str2String方法转换值为字符串,本质还是一个基础类型字符串,str3则为对象,为了验证结果,对这几个变量进行类型检测

// 检测类型
console.log(typeof str);  // string
console.log(typeof str2);  // string
console.log(typeof str3);  // object

在这里插入图片描述
对象类型是可以直接 obj.xxx = xxx 来新增属性的

// str.name = '东方求败'   // 报错  字符串无法 .name
// str2.name = '东方求败'  // 报错  字符串无法 .name
str3.name = '东方求败'   // 成功

str3打印的结果
在这里插入图片描述

js中变量存储有两种方式

1、基础类型存储 : String , Boolean , Number , Undefined , Null
2、引用类型存储 : Object(Array,Date,RegExp,Function)

  • js的定义的变量都是保存在堆和栈中的
  • 基础类型保存在栈内存中,值与值之间独立存在,互补干扰,因此不存在修改了一个变量导致原始变量值发生改变的问题。
  • 对象类型保存在堆中,创建对象会在堆内存中开辟一个新空间,变量保存的是对象的内存地址,而不是保存的值,也就是栈(变量)中存的是堆的指针,如果两个变量保存的是同一个地址,那么他们的指针指向的是同一个,所以通过a变量修改属性时,b变量也会受到影响。
  • 两个基础类型的数据比较时,比较的是值。
  • 两个引用类型的数据比较时,比较的是内存地址,如果两个变量一模一样,但是内存地址不同,也会返回false

在此处str3中,new String() 实际上是创建了一个新的对象,将值存到了实例对象的堆中,所以我们可以给str3添加属性。


案例源码:https://gitee.com/wang_fan_w/ts-seminar

如果觉得这篇文章对你有帮助,欢迎点亮star

43 声望
6 粉丝
0 条评论
推荐阅读
前端换肤,聊一聊主题切换那些事
一些网站通常会提供白天、夜间模式,以及自定义主题等等,这种主题切换也就是本文说的前端换肤。这次案例用的是白天和夜间模式的切换,在做换肤之前,得先知道一件事情:css的变量定义,对变量定义不熟悉的同学请...

兔子先森阅读 283

「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.8k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.3k评论 5

封面图
vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.9k评论 17

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco22阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.7k评论 1

封面图
43 声望
6 粉丝
宣传栏