数组的用法
- 数组的定义
// 数组的第一种定义（类型 + 方括号）
let list: number[] = [1, 2, 3, 4, 5];
let list: string[] = ['1', '2', '3', '4', '5']
let list: any[] = [1, 2, 4, { a: 1 }, '23']
// 数组的第二种定义（数组泛型）
let list: Array<number> = [1, 2, 3, 4, 5]
let list: Array<string> = ['1', '2', '3', '4', '5']
let list: Array<any> = ['1', '2', { a: 1 }, 4, 5, true, false]
- 遍历数组
let dataList: string[] = ['北京', '上海', '广州']
// 普通 for 循环
for (let i = 0; i < dataList.length; i++) {
console.log(dataList[i])
}
// for...of 循环
for (const item of dataList) {
console.log(item)
}
// forEach 循环
dataList.forEach((item, index) => {
console.log(item)
})
- 添加/删除数组元素
let dataList: string[] = ['北京', '上海', '广州']
dataList.push('杭州') // 尾部添加元素，结果为：['北京', '上海', '广州', '杭州']
dataList.pop() // 尾部删除元素，结果为：['北京', '上海', '广州']
let dataList: string[] = ['北京', '上海', '广州']
dataList.unshift('杭州') // 头部添加元素，结果为：[杭州', '北京', '上海', '广州']
dataList.shift() // 头部删除元素，结果为：['北京', '上海', '广州']
let dataList: string[] = ['北京', '上海', '广州', '杭州']
dataList.splice(2, 1) // 从索引 2 开始删除 1 个元素，结果为：['北京', '上海', '杭州']
- map() 方法 和 filter() 方法
/// 1.基本使用
const numbers = [1, 2, 3, 4, 5];
// 返回操作后的数据：使用 map 将数组中的元素都乘以 2
const newLis1 = numbers.map(item => item * 2) // 返回结果: [2, 4, 6, 8, 10]
// 返回满足条件的数据：使用 filter 过滤出大于 3 的元素
const newLis2 = numbers.filter(item => item > 3) // 返回结果: [4, 5]
/// 2.针对模型数组的使用场景
class Person {
name: string
sex: string
age: number
constructor(name: string, sex: string, age: number) {
this.name = name
this.sex = sex
this.age = age
}
}
let dataList: Person[] = [
new Person('小张', '男', 20),
new Person('小明', '男', 18),
new Person('小红', '女', 16),
]
// 返回模型数组的某个属性
const newList3 = dataList.map((item, index) => item.name) // 返回结果: ['小张', '小明', '小红']
// 返回满足条件的数据：年龄大于18的人
const newList4 = dataList.filter((item, index) => item.age > 18) // 返回结果: { 'name': '小张', 'sex': '男', 'age': 20}
- 查找数组元素
let dataList: string[] = ['北京', '上海', '广州', '杭州', '成都']
const index = dataList.indexOf('杭州') // 3
// 1.判断数组是否包含某个元素
// 方式 1
if (dataList.indexOf('杭州') != -1) {
console.log('包含：杭州')
}
// 方式 2
if (dataList.includes('杭州')) {
console.log('包含：杭州')
}
// 2.获取数组的子数组
// 获取索引 1 到 3（不包含索引 3）之间的元素； 即截取索引为 [1, 3) 区间的数据
let subList = dataList.slice(1, 3) // 返回结果: ['上海', '广州']
// 3.查找符合条件的第一个索引或其元素
const numbers = [1, 2, 5, 8, 10];
const findIndex = numbers.findIndex(item => item > 5) // 3
const findItem = numbers.find(item => item > 5) // 8
- 其它操作
let dataList: string[] = ['北京', '上海', '广州']
// 1.连接/合并两个数组
const newList = dataList.concat(['台湾']) // 返回结果: ['北京', '上海', '广州', '台湾']
// 2.将数组元素连接成字符串
const dataString = dataList.join('，') // 返回结果: '北京，上海，广州'
// 3.翻转数组元素的顺序
dataList.reverse() // 返回结果: ['广州', '上海', '北京']
// 4.检查一个变量是否为数组
if (Array.isArray(dataList)) {
console.log('是数组类型')
}
Timer (定时器)
- 延迟定时任务
// 延迟执行内容（只执行一次）
setTimeout(() => {
console.log('delay 3s')
}, 3000)
// clearTimeout(timeoutID) // 手动取消定时器
- 重复定时任务
// 重复执行内容，可设置时间延迟间隔（执行多次）
setInterval(() => {
console.log('do after 2s delay.')
}, 2000)
// clearInterval(intervalID) // 手动取消定时器
Text、Span 实现简单富文本
// 对em标签内的关键词标红显示
let name = "中国烟草总<em>公司</em>重庆市<em>公司</em>渝北分<em>公司</em>"
let textArr: string[] = []
if (name.indexOf('<em>') != -1) {
let replaceText = name.replace(/<\/em>/g, '<em>')
textArr = replaceText.split('<em>')
}
Text() {
ForEach(textArr, (text: string) => {
if (name.indexOf(`<em>${text}</em>`) != -1) {
Span(text).fontColor(Color.Red)
} else {
Span(text)
}
})
}
