Array对象

indexof 方法

找目标元素下标 ，找到返回目标元素的下标 ，未找到 返回 -1

数组.indexof(要查找的元素)// 存在返回具体下标，不存在返回 -1

join 方法

将数组用逗号或指定的分隔符, 将所有元素连接成一个字符串并返回这个字符串

数组.join('分隔符') // 基于传入的分隔符 将数组的每一项拼接到一起
数组.join() // 使用【逗号】将数组的每一项 拼接到一起

forEach 方法

循环遍历数组 无返回值

数组.forEach((数组项:类型，索引:number)=>{
  // 逻辑
})

// 类型如果能推断出来，可以省略不写
// 索引如果用不上，可以省略
数组.forEach(数组项=>{
  // 逻辑
})

map 方法

map() 返回一个新数组 - 基于原数组，创建一个新数组（映射）

数组.map<返回值类型>((数组项,索引)=>{ return 结果 })
// 如果返回值的类型编译器无法推断，就需要自行设置

// map 基本使用01- 基于numArr返回新数组，每一个数组翻倍
const numArr: number[] = [1, 2, 3, 4, 5]
const newArr: number[] = numArr.map((item: number, index: number) => {
  return item * 2
})
console.log('newArr', JSON.stringify(newArr)) // [2,4,6,8,10]


// map 基本使用02 - 基于 foodArr 返回新数组，每一项 都是一个对象
// name 为食物名，price 为5-10 的随机价格 ，比如{ name:'西兰花',price:10 }
interface FoodInfo {
  name: string
  price: number
}
const foodArr: string[] = ['西兰花', '西葫芦', '西红柿', '西北风']
const mewfoodArr: FoodInfo[] = foodArr.map<FoodInfo>((item: string, index: number) => {
  return { name: item, price: Math.floor(Math.random() * 6) + 5 }
})

filter 方法

filter 筛选 - 将符合条件的元素放到新数组, 返回一个新数组

数组.filter((数组项:类型,索引:number)=>{
  return 条件  // 或者可以解析为 true 的值   需要这一项
})

sort 方法

sort 排序 - 对数组的元素进行排序，排序是改变原数组

// 自定义排序规则
数组.sort((第一个比较元素,第二个比较元素)=>{
  return 0 // 不变
})
// 升序或降序
数组.sort((a,b)=>{
  return a-b(大于0 值)  //  升序
  return b-a(小于0 值)  //  降序 
})

reduce 方法

reduce 求和 - 他会逐个遍历数组元素，每一步都将当前元素的值与前一步的结果相加

// 纯数值类数组求和
数组.reduce((上一次累加结果,当前元素值)=>{})
// 对象数组求和
数组.reduce((上一次累加结果，当前元素值)=>{}, 初始值)

findindex 方法

查找元素 找到返回元素下标 未找到 返回-1

// 索引，如果用不上可以省略不写
数组.findIndex((数组项:类型,索引:number)=>{
  return 条件  // 条件满足 找到了 条件不满足没有找到
})

find 方法

find() 找元素 - 查找数组的第一个符合条件的元素, 找到了返回该元素，找不到返回 undefined

// 索引，如果用不上可以省略不写
数组.find((数组项:类型,索引:number)=>{
  return 条件  // 找到了需要的元素
})

every 方法

every 元素是否都能符合条件 - 符合返回 true, 不符合返回 false

// 索引，如果用不上可以省略不写
数组.every((数组项:类型,索引:number)=>{
  return 条件  // 当前元素符合要求 返回 true
})
// res 可以获取是否每个元素都符合要求

some 方法

some 元素至少1个符合条件 - 符合返回true, 不符合返回false。

// 索引，如果用不上可以省略不写
数组.some((数组项:类型,索引:number)=>{
  return 条件 // 当前元素符合要求 返回 true
})
// res 可以获取是否 【至少有一个元素】符合要求

include 方法

includes 是否包含指定的值 - 包含返回true, 不包含返回false

const res = 数组.includes(值) // 返回布尔值

函数进阶

回调函数

一个函数作为实参传入给另一个函数，此函数被称为 回调函数

箭头函数简写

:::success
简写条件:

1. 函数体只有一行，可以省略大括号
2. 省略大括号时，如果有 return，也需要一起省略
3. 参数只有一个，且不需要写类型，可以省略小括号

:::

案例-热度榜单

英雄筛选

:::success
核心步骤：

1. 筛选条件切换时：
   1. 根据当前分路筛选数据并复制给【英雄数组】
   2. 还原 排序索引为 0
2. 特殊情况：
   1. 如果索引为 0【全部分路】，不需要筛选

.onClick(() => {
  this.selectedIndex = index
  // 英雄筛选
  // 写法一
  /*if (item === '全部分路') {
    this.heroList = heroList.filter((ele:Hero)=>{
      return true
    })
  } else {
    this.heroList = heroList.filter((ele:Hero)=>{
      return ele.branchRoads.includes(item)
    })
  }*/
  // 写法二
  this.heroList = heroList.filter(ele => item === '全部分路' ? true : ele.branchRoads.includes(item))

利用filter方法在heroList数组中进行筛选，筛选出来数据返回到this.heroList数组中进行页面渲染
以Item作为判断条件，如果Item等于“全部分路”，无需筛选，判断条件为true，直接返回heroList数组中的全部数据；item不等于“全部分路”时，利用includes方法，找到heroList数组中branchRoads参数中含有当前选中的Item，并返回到this.heroList数组中进行渲染

数据排序

:::success
核心步骤：

1. 切换排序索引时，重新【排序数组】并【重新赋值】

:::

.onClick(() => {
  this.activeIndex === index
  // 排序
  this.heroList.sort((a: Hero, b: Hero) => {
    if (this.activeIndex === 0) {
      return a.orderNum - b.orderNum
    } else if (this.activeIndex === 1) {
      return a.winRate - b.winRate
    } else if (this.activeIndex === 2) {
      return a.showRate - b.showRate
    } else {
      return a.banRate - b.banRate
    }
  })
})

利用sort方法进行排序

排序条件渲染

:::success
核心步骤：

1. 基于数据【渲染列表】
2. 定义状态变量记录【高亮筛选】条件
3. 点击【修改】状态变量的值
   :::

ForEach(this.heroList, (item: Hero, index: number) => {
  ListItem() {
    Row({ space: 14 }) {
      // 头像
      Image(item.heroIcon).width(40) .borderRadius(10)
      // 昵称+分类
      Column({ space: 5 }) {
        Text(item.heroName)
        Text(item.heroCareer).fontSize(10).fontColor(Color.Gray)
      }.width(85).alignItems(HorizontalAlign.Start)
      
      // 热度 胜率 登场率 Ban 率  // 高亮 '#37bdee' 默认 Color.Black
      Text(item.tRank.toUpperCase())
        .fontWeight(900)
        .fontColor(this.activeIndex === 0 ? '#37bdee' : '#000') 
      Text((item.winRate * 100).toFixed(1)
        .toString() + '%')
        .width(45)
        .fontSize(15)
        .fontColor(this.activeIndex === 1 ? '#37bdee' : '#000') 
      Text((item.showRate * 100).toFixed(1)
        .toString() + '%')
        .width(45)
        .fontSize(15)
        .fontColor(this.activeIndex === 2 ? '#37bdee' : '#000') 
      Text((item.banRate * 100).toFixed(1)
        .toString() + '%')
        .width(45)
        .fontSize(15)
        .fontColor(this.activeIndex === 3 ? '#37bdee' : '#000') 
    }.width('100%')
  }.padding(10) .height(60)
})