TypeScript：对象

let name: string = ‘周杰伦’

let gender: string = ‘男’

let height: number = 175

function sing() { … }

缺点：一个变量只能存储一个数据，多个变量之间没有任何关联（相关性）。

方案二：使用数组，一次可以存储多个数据：

[‘周杰伦’, ‘男’, 175, function sing() { … }]

缺点：不知道数组中的每个元素表示什么。

正确姿势：使用对象，对象在描述事物（一组相关数据）时，结构更加清晰、明了。

{ name: ‘周杰伦’, gender: ‘男’, height: 175, sing: function () { … }}

总结：

对象：一组相关属性和方法的集合，并且是无序的。

在 TS 中，如果要描述一个事物或一组相关数据，就可以使用对象来实现。

2. 创建对象

===================================================================

注意：先学习对象的基本使用，再学习对象的类型注解（对象的类型注解类似于对象自身的语法）。

对象的语法：

let person = {}

此处的 {}（花括号、大括号）表示对象。而对象中没有属性或方法时，称为：空对象。

对象中的属性或方法，采用键值对的形式，键、值之间使用冒号（:）来配对。

键（key）→ 名称 ，值（value）→ 具体的数据。

多个键值对之间，通过逗号（,）来分隔（类比数组）。

现在，对象person具有两个属性：

let person = { name: ‘刘老师’, age: 18 }

属性和方法的区别：值是不是函数，如果是，就称为方法；否则，就是普通属性。

let person = {

sayHi: function () {

console.log(‘大家好，我是一个方法’)

}

}

注意：函数用作方法时可以省略function后面的函数名称，也叫做匿名函数。

函数没有名称，如何调用？ 此处的sayHi相当于函数名称，将来通过对象的sayHi就可以调用了。

如果一个函数是单独出现的，没有与对象关联，我们称为函数；否则，称为方法。

总结：

对象中的属性或方法，采用键值对的形式，因此，对象是无序键值对的集合。

• 使用什么符号创建对象？花括号（{}）

• 键（key）、值（value）之间通过什么符号配对？ 冒号（:）

• 多个属性或方法之间使用什么符号分隔？ 逗号（,）

• 属性和方法的区别？值是不是函数

3. 接口

=================================================================

3.1 对象的类型注解

---

TS 中的对象是结构化的，结构简单来说就是对象有什么属性或方法。

在使用对象前，就可以根据需求，提前设计好对象的结构。

比如，创建一个对象，包含姓名、年龄两个属性。

思考过程：1 对象的结构包含姓名、年龄两个属性 2 姓名  字符串类型，年龄 → 数值类型 3 创建对象。

这就是对象的结构化类型（左侧），即：对该对象值（右侧）的结构进行类型约束。

或者说：建立一种契约，约束对象的结构。

语法说明：

对象类型注解的语法类似于对象自身的语法。

注意：键值对中的值是类型！（因为这是对象的类型注解）。

注意：多个键值对之间使用分号（;）分隔，并且分号可省略。

总结：

TS 中的对象是结构化的，在使用对象前，就可以根据需求，提前设计好对象的结构。

对象的结构化类型（类型注解）：建立一种契约，约束对象的结构。

注意点：类型注解中键值对的值为类型！

3.2 对象方法的类型注解

---

问题：如何给对象中的方法，添加类型注解？

技巧：鼠标放在变量名称上，VSCode就会给出该变量的类型注解。

let person: {

sayHi: () => void

sing: (name: string) => void

sum: (num1: number, num2: number) => number

}

箭头（=>）左边小括号中的内容：表示方法的参数类型。

箭头（=>）右边的内容：表示方法的返回值类型。

方法类型注解的关键点：1 参数 2 返回值。

注意：技巧是辅助，更重要的是理解。

3.3 接口的使用

---

直接在对象名称后面写类型注解的坏处：1 代码结构不简洁 2 无法复用类型注解。

接口：为对象的类型注解命名，并为你的代码建立契约来约束对象的结构。

语法：

interface 表示接口，接口名称约定以I开头。

推荐：使用接口来作为对象的类型注解。

4. 存值和取值

====================================================================

4.1 取值

---

取值，即：拿到对象中的属性或方法并使用。

获取对象中的属性，称为：访问属性。

获取对象中的方法并调用，称为：调用方法。

• 访问属性

let jay = { name: ‘周杰伦’, height: 175 }

需求：获取到对象（jay）的name属性。

console.log(jay.name)

说明：通过点语法（.）就可以访问对象中的属性。

技巧：在输入点语法时，利用VSCode给出来的提示，利用上下键快速选择要访问的属性名称。

• 调用方法

let jay = {

sing: function () {

console.log(‘故事的小黄花 从出生那年就飘着’)

}

}

需求：调用对象（jay）的sing方法，让他唱歌。

jay.sing()

说明：通过点语法（.）就先拿到方法名称，然后，通过小括号调用方法。

补充说明：

console.log(参数1, 参数2, …)

实际上，console是一个对象，而log是该对象提供的一个方法。

并且，log方法可以有多个参数。

console.log(‘我叫’, jay.name)

总结：

• 通过什么符号，来访问对象中的属性或方法？ 点语法（.）

• 注意：方法需要调用，所以，通过点语法拿到方法名称后，不要忘记使用小括号调用！

• 技巧：通过点语法，访问对象属性时，利用VSCode出来的提示，快速选择要访问的属性或方法。

• 该技巧很实用，特别是访问别人创建的对象时（比如：console对象）。

4.2 存值

---

存值，即修改（设置）对象中属性的值。

let jay = { name: ‘周杰伦’, height: 175 }

需求：将对象（jay）的name属性的值修改为’周董’。

jay.name = ‘周董’

解释：先通过点语法获取到name属性，然后，将新值’周董’赋值给该属性。

console.log(jay.name) // 周董

注意：设置的新值，也必须符合该属性的类型要求！

注意：几乎不会修改对象中的方法。

4.3 总结

---

对象是对现实生活中具体事物（特征和行为）的抽象，可以使用对象来描述这些具体的事物。

对象包含：1 属性 2 方法。

简单来说：对象就是无序键值对的集合。

对象是结构化的，它的类型注解就是从对象的结构（属性、方法）出发，进行类型约束和检查。

推荐：使用接口来作为对象的类型注解，建立一种契约，约束对象的结构。

TS中的数据类型分为两大类：1 原始类型（基本数据类型） 2 对象类型（复杂数据类型）。

常用的基本数据类型有 5 个：number / string / boolean / undefined / null。

复杂数据类型：object（对象、数组）、function（函数）。

5. 内置对象

===================================================================

5.1 概述

---

对象的两种来源：1 自己创建 2 其他人创建（编程语言自带或第三方）。

内置对象，是 TS/JS 自带的一些基础对象，提供了TS开发时所需的基础或必要的能力。

已经用过的内置对象：数组。

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。