【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

16 声望
6 粉丝
0 条评论
推荐阅读
一文搞懂原型和原型链
在了解原型和原型链之前首先得明确它俩是什么东西:原型:prototype又称显示原型1、原型是一个普通对象2、只有构造函数才具备该属性3、公有属性可操作隐式原型:__proto__1、只有对象(普通对象、函数对象)具备2...

兔子先森阅读 58

Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.8k评论 81

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen153阅读 18k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.7k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan48阅读 3.4k评论 14

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