1.数组
数组:用于存放多个数据的集合
let names: string[] = ['张三', '李四', '王五']
注:数组中,通常是相同类型的数据
1.创建数组
let names: string[] = []
表示一个空数组,数组的类型注解是由两部分组成:类型+[],此处表示字符串类型的数组(只能出现字符串类型)
let names: string[] = ['张三','李四']
console.log(names)
语法二
let ages: number[] =new Array(20,30)
console.log(ages)
2.数组长度和索引
数组长度:表示数组中元素的个数,通过数组的length属性来获取
获取数组的长度
console.log(ages.length) // 2
数组索引:数组的序号(下标),数组中元素与索引意义对应
注意:数组索引是从0开始的
// 数组名称[索引]
console.log(ages[1]) // 30
3.存值和取值
如果要修改数组中某个元素的值,就要使用数组存值
ages[1] = 40
console.log(ages) // 20, 40
先获取,再存值
添加元素
存值的语法是:数组名称[索引] = 新值,根据索引是否存在,有两种可能:1修改元素 2添加元素
ages[ages.length] = 200
console.log(ages) // 20,40,200
4.遍历数组
遍历数组,就是把数组中的所有元素挨个取值一次
for(let i:number = 0; i< ages.length; i++) {
console.log(ages[i])
}
案例:求数组元素和
let nums: number[] = [1,2,3,4,5,6]
let sum: number = 0
for(let i: number=0;i<nums.length;i++) {
sum += nums[i]
}
console.log(sum) // 21
案例:找出数组中的最大值
let nums2: number[] = [11, 23, 4 ,45, 6]
let max: number = nums[0]
for(let i = 1; i<nums2.length;i++) {
max = nums2[i] > max ? nums2[i] : max
}
console.log(max) // 45
2.函数
使用函数来封装相似的代码,在需要的时候调用函数,相似的代码不再重复写
函数的使用分为两步: 1.声明函数 2.调用函数
声明函数
function 函数名称() {
函数体
}
函数名称:推荐以动词开头,因为函数表示做一件事情,实现一个功能
函数体: 表示要实现功能的代码,复用的代码
调用函数
函数名称()
只有调用函数之后,函数才会执行
函数参数
函数参数可以增加函数的灵活性、通用性,针对相同的功能,能够适应更多的数据(值)
形参和实参
1.形参:声明函数时指定的参数,放在声明还是的小括号中
function getMax(nums: number[]){}
指定函数可接收的数据
2.实参:调用函数时传入的参数,放在调用函数的小括号中
getMax([1,2,3,4])
根据具体的功能,函数参数可以有多个,参数之间使用逗号(,)来分隔
实参和形参按照顺序,一一对应
实参必须符合形参的类型要求,否则会报错
function fn(name: string, age: number) {
console.log(name, age)
}
fn('张三', 20)
function getMax(nums: number[]): void {
let max: number = nums[0]
for(let i = 1; i<nums2.length;i++) {
max = nums[i] > max ? nums[i] : max
}
console.log(max)
}
let nums2: number[] = [11, 23, 4 ,45, 6]
getMax(nums2)
函数返回值
将函数内部计算的结果返回,以便于使用改结果继续参与其他的计算
如果没有指定函数的返回值,那么,函数返回值的默认类型就是void,空
function fn(): 类型注解 {
return 返回值
}
return 关键字
1.将函数内部的计算结果返回
2.终止函数代码执行,return后面的代码不会执行
3.return只能在函数中使用,否则会报错
4.return可以单独使用(后面可以不跟内容),用来刻意终止函数的执行
案例: 打印两个数组中最大值的和
function getMax(nums: number[]): number {
let max: number = nums[0]
for(let i = 1; i<nums2.length;i++) {
max = nums[i] > max ? nums[i] : max
}
// console.log(max)
return max
}
let nums1: number[] = [11, 23, 4 ,45, 6]
let nums2: number[] = [11, 99, 4 ,45, 6]
let sums: number = getMax(nums1) + getMax(nums2)
console.log(sums)
变量的作用域
一个变量的作用域指的是:代码中定义变量的区域,它决定了变量的使用范围
在TS(或JS)中,函数可以形成作用域,叫做函数作用域
根据范文的不同,变量可以分为两种:局部变量与全局变量
局部变量:表示在函数内部声明的变量,该变量只能在函数内部使用
全局变量:表示在函数外部声明的变量,可以全局使用
2.对象
1.对象基本使用
TS中的对象,也是由特征和行为组成的,有各自专业的名称:属性(特征)和方法(行为)
理解TS中对象:一组相关属性和方法的集合,并且是无序的
{
name: '张三',
age: 20,
sing: funtion() {
console.log('张三在唱歌')
}
}
对象在描述事物(一组相关数据)时,更加清晰,明了
let 对象名 = {
键1: 值1,
键2: 值2
}
如果一个函数是单独出现的,没有与对象关联,称为函数;否则称为方法
接口
对象的类型注解: 建立一种七月,约束对象的结构
let person: {
name: string
age: number
} = {
name: '张三',
age: 20
}
console.log(person)
对象方法的类型注解
let person: {
name: string
age: number
sing: () => void
sum: (num1: number, num2:number) => number
} = {
name: '张三',
age: 20,
sing: function() {
console.log(this.name+'在唱歌')
},
sum: function(num1: number, num2:number) => {
return num1 + num2
}
}
console.log(person)
TS中的对象是结构化的,结构简单来说就是对象有什么属性或方法
在使用对象前,就可以根据需求,提前设计好对象的结构
2.接口的使用
直接在对象名称后面写类型注解的坏处:1.代码结构不简洁 2.无法复用类型注解
接口:为对象的类型注解命名,并为代码建立契约来约束对象的结构
interface IUser {
name: string
age: number
}
let p1: IUser = {
name: '张三',
age: 22
}
interface表示接口,接口名称约定以I开头
推荐:使用接口来作为对象的类型注解
3.对象取值和存值
获取对象中的属性,称为:访问属性
获取对象中的方法,称为:访问方法
通过点语法(.),就可以访问对象的属性
interface IUser {
name: string
age: number
sing: (name: string) => void
}
let p1: IUser = {
name: '张三',
age: 20,
sing: function(name) {
console.log(name + '在唱歌')
}
}
console.log(p1.name)
p1.sing(p1.name)
设置新的值,必须符合该属性的类型要求
3.内置对象
编程语言自带或第三方提供
1.数组对象
1.length属性:获取数组长度
let names: string[] = ['张三', '李四']
console.log(names.length) // 2
2.push方法,往数组中添加一个元素
names.push('王五')
3.数组对象-forEach
遍历数组
names.forEach(function(item, index){
// item 元素
// index 索引
})
// 此处的回调函数,作为forEach的实参传入 实参不应该指定类型注解
4.数组对象-some
遍历数组,查找是否有一个满足条件的元素(如果有,就可以停止循环)
循环特点:根据回调函数的返回值,决定是否停止循环,如果返回true,就停止,返回false,继续循环
let has: boolean = name.some(function(){
return name === '张三'
})
4.类型推论
在TS中,某些没有明确指出类型的地方,类型推论会被帮助提供类型
发生类型推论的两种场景 1.声明变量并初始化时 2.决定函数返回值时
let age: number = 18 -> let age = 18
function getMax(num1: number, num2: number) {
return num1 + num2
}
5.类型断言
浏览器中只能运行JS,无法直接运行TS,因此,需要将TS转化为JS然后再运行
类型断言,来手动指定更加具体的类型
值 as 更具体的类型
let img = document.querySelector('#image') as HTMLImageElement
通过console.dir()打印DOM对象,来查看该元素的类型