数组的用法

数组的定义

// 数组的第一种定义（类型 + 方括号）
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)
    }
  })
}