1.Array对象常用API
数组都是Array的实例化对象，它提供了一下常用的一些方法让我们快速处理数据
1.1.indexOf方法
indexOf()方法返回的是在一个数组中第一次出现的我们自己规定元素的下标，如果不存在的话就会返回-1
基础语法：
数组.indexOf(要查找的元素)// 存在返回具体下标，不存在返回 -1
举例说明：
// 1. 数字数组
const nums = [1,2,3,4,5]
// 查找3的索引
let index = nums.indexOf(3)
// 2. 字符串数组
const foods = ['西兰花','西葫芦','西兰花']
//查找西兰花的索引
let index1 = foods.indexOf('西兰花') // 0
// 查找 西兰的索引
let index2 = foods.indexOf('西兰') // -1
1.2.join方法
join()方法将数组中的数据用逗号或者自己指定的分隔符来将这些数据进行每一项的拼接到一起。如果在()里面什么都不填的话就默认用逗号进行拼接
基本语法
数组.join('分隔符') //基于传入的分割符 将这些数组中的每一项进行拼接在一起
举例说明：
const elements = ['花菜','西兰花','菜花']
console.log(elements.join()) //默认用逗号分隔开，结果为： 花菜,西兰花,菜花
console.log(elements.join('')) // 结果：花菜西兰花菜花 直接拼接
console.log(elements.join('-')) // 结果：花菜-西兰花-菜花 用 - 拼接
多学一招：字符串中的方法split的作用是相反的
split() 方法根据传入的内容将字符串分隔为数组
//语法：
字符串.split(分隔符)// 返回切割之后的数组
// 1. 切割为数组
const branchFilter: string = ' 全部分路 | 对抗路 | 中路 | 发育路 | 游走 | 打野 '
console.log(JSON.stringify(branchFilter.split('|')))
//结果：[" 全部分路 "," 对抗路 "," 中路 "," 发育路 "," 游走 "," 打野 "]
const tabFilter: string = ' 所有段位 - 巅峰赛1350+ - 顶端排位 - 赛事 '
console.log(JSON.stringify(tabFilter.split('-')))
//结果：[" 所有段位 "," 巅峰赛1350+ "," 顶端排位 "," 赛事 "]
// 2. 获取日期
const dateStr:string = '2024-04-27'
console.log(JSON.stringify(dateStr.split('-')))
//结果：["2024","04","27"]
//说明：如果split('')这个表示里面没有使用任何分隔符进行分割，默认为逗号,分割开
1.3.forEach方法
forEach() 方法会遍历数组，并且将数组的每一项作为参数传入到回调函数中，无返回值 举例：
// 接口
interface HeroInfo {
id: number
name: string
title: string
}
// 数组
const arr: HeroInfo[] = [
{ id: 105, name: '廉颇', title: '正义爆轰' },
{ id: 106, name: '小乔', title: '恋之微风' },
{ id: 107, name: '赵云', title: '苍天翔龙' },
{ id: 108, name: '墨子', title: '和平守望' },
]
// 结果
arr.forEach((item)=>{
console.log(item.name,item.title)
})
1.4.mapf方法
map() 方法可以基于一个数组（原数组） ，创建一个新数组并返回，该方法常用。
它的两种写法：
// .map是一个泛型方法，有两种写法
// 1. 指定返回值类型写法 - 不省略<>泛型参数
数组.map<返回值类型>((item:数组项类型,index:number)=>{ return xxx })
// 2. 简写 - 编译器能自动推断出返回值类型，可以省略泛型参数
数组.map((item:数组项类型,index:number)=>{return xxx})
写法1：
interface HeroInfo {
id: number
name: string
title: string
}
const arr: HeroInfo[] = [
{ id: 105, name: '廉颇', title: '正义爆轰' },
{ id: 106, name: '小乔', title: '恋之微风' },
{ id: 107, name: '赵云', title: '苍天翔龙' },
{ id: 108, name: '墨子', title: '和平守望' },
]
需求：基于arr这个原始数组，通过map处理之后得到 ['廉颇','小乔','赵云','墨子']
let newArr = arr.map((item: HeroInfo, index: number) => {
return item.name
})
需求2：基于arr这个原始数组，通过map处理之后得到 [{name:'廉颇'},{name:'小乔'},{name:'赵云'},{name:'墨子'}]
interface iRes {
name: string
}
// ✨✨ 由于我们需要得到一个复杂类型的数组，所以需要显示指定map的泛型参数类型(表示return 后面的数据类型是什么)
let newArr1 = arr.map<iRes>((item: HeroInfo, index: number) => {
return { name: item.name }
})
console.log(JSON.stringify(newArr1))
说明：
- 如果我们需要通过一个数组得到一个简单类型的新数组，map可以不需要显示指定泛型
- 如果返回的是一个复杂类型的数组，则必须通过interface来定义类型，并要在 map方法的return 后面返回符合这个接口类型的对象
1.5.filter方法
filter()根据回调函数的执行结果，筛选出符合要求的元素，返回一个新的数组，包括简单的数组和对象数组。
数组.filter((数组项:类型,索引:number)=>{
return true // 或者可以解析为 true 的值 需要这一项
return false // 或者可以解析为 false 的值 不需要这一项
})
需求一： filter基本使用 01 - 筛选出大于 5 的数
// filter基本使用 01 - 筛选出大于 5 的数
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const res1 = nums.filter((item: number, index: number) => {
if (item > 5) {
return true //大于5的就留下
} else {
return false //false表示其余的丢弃
}
})
console.log('筛选之后的结果是：', res1)
需求二：filter基本使用 02 - 筛选出 战士
const heroList: Hero[] = [
{
id: 116,
avatar: $r('app.media.ic_avatar_116'),
name: '阿轲',
title: '信念之刃',
type: '刺客'
},
{
id: 117,
avatar: $r('app.media.ic_avatar_117'),
name: '钟无艳',
title: '野蛮之锤',
type: '战士'
},
{
id: 118,
avatar: $r('app.media.ic_avatar_118'),
name: '孙膑',
title: '逆流之时',
type: '辅助'
},
{
id: 119,
avatar: $r('app.media.ic_avatar_119'),
name: '扁鹊',
title: '善恶怪医',
type: '法师'
},
{
id: 120,
avatar: $r('app.media.ic_avatar_120'),
name: '白起',
title: '最终兵器',
type: '坦克'
},
{
id: 121,
avatar: $r('app.media.ic_avatar_121'),
name: '芈月',
title: '永恒之月',
type: '法师'
},
{
id: 123,
avatar: $r('app.media.ic_avatar_123'),
name: '吕布',
title: '无双之魔',
type: '战士'
},
{
id: 132,
avatar: $r('app.media.ic_avatar_132'),
name: '马可波罗',
title: '远游之枪',
type: '射手'
},
{
id: 133,
avatar: $r('app.media.ic_avatar_133'),
name: '狄仁杰',
title: '断案大师',
type: '射手'
},
]
const res3 = heroList.filter((item: Hero, index: number) => {
if (item.type == '战士') {
return true
} else {
return false
}
//或者这样写：
//return item.type.indexOf('战士') != -1
})
// 复杂类型的数据（对象，对象数组），可以通过 JSON.stringify()转为 字符串进行打印
console.log('类型是战士的:', JSON.stringify(res3))
//结果：{id:117,avatar:$r('app.media.ic_avatar_117'),name: '钟无艳',title: '野蛮之锤',type: '战士'}
//{id: 123,avatar: $r('app.media.ic_avatar_123'),name: '吕布',title: '无双之魔',type: '战士'}
1.6.sort方法
sort方法对数组的元素进行排序，并返回对相同数组的引用。会改变原数组的内容排列顺序 语法
// 自定义排序规则
数组.sort((第一个比较元素a,第二个比较元素b)=>{
return a-b如果是正数 // a 会调换到 b 的后面 //正序
return a-b如果是 负数 // a 会继续留在 b 的前面 //倒序
return a-b如果是 0 // a和b的位置保持不变 //不变
})
举例：
//1.数值数组进行排列
const arr = [5, 12, 8, 130, 44]
arr.sort((a,b)=>{
// return a-b //正序排列
return b-a //倒序排列
})
console.log(arr.toString())
//2.对象数组进行排序
const foods:Food[] = [
{
name: '西兰花',
price: 6
},
{
name: '西红柿',
price: 3
},
{
name: '榴莲',
price: 30
},
{
name: '葱花',
price: 1
}
]
foods.sort((a,b)=>{
return a.price-b.price
})
console.log(JSON.stringify(foods))
1.7.reduce方法
reduce方法的作用是求和，他会逐个遍历数组元素，每一步都将当前元素的值与前一步的结果相加，最后返回一个值
语法：
// 数组求和 -> 遍历数组 用 初始值 和 当前元素值相加 得到累加结果
数组.reduce((累加结果，当前元素值)=>{}, 初始值)
举例：
// 1.数值数组求和
const arr = [1,2,3,4]
const res = arr.reduce((a, b) => {
// return a-b
return a + b
},0)
console.log('res:', res) //结果：10
//说明：a为每次累加的结果，b为每次去遍历的那一个对象，0为初始的值
// 2.对象数组求和 -> 求和所有菜数量count的总数
interface Food {
name: string
price: number
count: number
}
const foods: Food[] = [
{
name: '西兰花',
price: 6,
count: 2
},
{
name: '西红柿',
price: 3,
count: 3
},
{
name: '榴莲',
price: 30,
count: 2
},
{
name: '葱花',
price: 1,
count: 10
}
]
const total = foods.reduce((a, b) => {
return a + b.count
}, 0)
console.log('total:', total)
@Entry
@Component
struct ReducePage {
build() {
}
}
1.8.findIndex方法
findIndex() 方法返回数组中满足自己提供的要求函数的第一个元素的索引值。若没有找到对应元素则返回 -1。
语法：
// 索引，如果用不上可以省略不写
数组.findIndex((数组项:类型,索引:number)=>{
return true // 找到了需要的元素
return false // 或者可以解析为 false 的值 不是这一项
})
举例：
// 1. 字符串数组
const arr = ['西兰花', '西葫芦', '西兰花']
let index =arr.findIndex((item: string, index: number) => {
if (item == '西葫芦') {
return true
} else {
return false
}
})
console.log('',index) //结果：1
说明：注意是返回的是出现满足要求的第一个的索引，后面在满足要求的元素不在返回
// 2. 对象数组
interface Champion {
id: number
name: string
title: string
}
const championList: Champion[] = [
{
id: 116,
name: '阿轲',
title: '信念之刃',
},
{
id: 117,
name: '钟无艳',
title: '野蛮之锤',
},
{
id: 118,
name: '孙膑',
title: '逆流之时',
},
{
id: 119,
name: '扁鹊',
title: '善恶怪医',
},
{
id: 120,
name: '白起',
title: '最终兵器',
},
{
id: 121,
name: '芈月',
title: '永恒之月',
},
{
id: 123,
name: '吕布',
title: '无双之魔',
},
{
id: 132,
name: '马可波罗',
title: '远游之枪',
},
{
id: 133,
name: '狄仁杰',
title: '断案大师',
},
]
let newarr = championList.findIndex(index => index.name == '钟无艳')
console.log(JSON.stringify(newarr)) //结果：1
1.9.find方法
find() 方法返回通过测试（函数内判断）的数组的第一个元素的值，注意返回满足要求的这个值是一整个对象，找不到返回 undefined
语法：
// 索引，如果用不上可以省略不写
数组.find((数组项:类型,索引:number)=>{
return true // 找到了需要的元素
return false // 或者可以解析为 false 的值 不是这一项
})
举例：
// 1. 从字符串数组中查找 西葫芦 这个项
const strArr1 = ['西兰花','西葫芦','西红柿']
let res = strArr1.find((item)=>{
return item == '西葫芦'
})
console.log(JSON.stringify(res))//结果：“西葫芦”
//说明：跟findindex返回的是索引，find返回的是具体的值
// 2.对象数组
interface Good{
id:number
name:string
price:number
color:ResourceColor
}
const goods:Good[]= [
{
id: 1,
name: "苹果",
price: 2.5,
color: Color.Red// 红色
},
{
id: 2,
name: "香蕉",
price: 1.8,
color: Color.Yellow// 黄色
},
{
id: 3,
name: "蓝莓",
price: 3.0,
color: Color.Blue// 蓝色
},
{
id: 4,
name: "草莓",
price: 4.5,
color: Color.Pink// 粉红色
},
{
id: 5,
name: "橙子",
price: 2.0,
color: Color.Orange// 橙色
},
{
id: 6,
name: "李子",
price: 1.2,
color: Color.Green// 黄色
}
]
//找出 名字叫做 橙子 的水果
let newarr1 = goods.find(index => index.name == '橙子')
console.log(JSON.stringify(newarr1))//结果：{"id":5,"name":"橙子","price":2,"color":"#ffffa500"}
//说明：它返回了“橙子”这个对象里面的全部的属性。
2.0. every方法
every 方法测试一个数组内的【所有元素】是否都能通过指定函数的测试。它返回一个布尔值true/false
语法：
// 索引，如果用不上可以省略不写
const res = 数组.every((数组项:类型,索引:number)=>{
return true // 当前元素符合要求 返回 true
return false // 当前元素不符合要求 返回 false
})
// res 可以获取是否每个元素都符合要求
举例：
// 1. 数值数组 判断是否每个元素都大于 2
const numArr = [2,4,6,8,10]
let isgt2 = numArr.every((item: number) => {
return item > 2
})
console.log('',isgt2) //结果：false
// 2. 字符串数组 判断是否每个元素里面都有绿字
const foodArr = ['绿茶','绿豆','绿色能源','绿色心情','茉莉奶绿']
let res = foodArr.every((item:string)=>{
return item.includes('绿')
})
console.log('',res) //结果：true
2.1.some方法
some 方法测试数组中是否【至少有一个元素】通过了由提供的函数实现的测试。它返回一个布尔值true/false
语法：
// 索引，如果用不上可以省略不写
const res = 数组.every((数组项:类型,索引:number)=>{
return true // 当前元素符合要求 返回 true
return false // 当前元素不符合要求 返回 false
})
// res 可以获取是否 【至少有一个元素】符合要求
举例：
// 1. 数值数组 判断是否有等于 5 的元素
const numList = [2, 4, 6, 8, 10]
let newarr = numList.some(index => index == 5)
console.log(JSON.stringify(newarr)) //结果：false
// 2. 对象数组
interface Laptop {
id: number
name: string
ram: number // 内存
storage: number // 硬盘
price: number // 价格
}
const laptops: Laptop[] = [
{
id: 1,
name: "Dell XPS 13",
ram: 16,
storage: 512,
price: 9999
},
{
id: 2,
name: "MacBook Air",
ram: 8,
storage: 256,
price: 8999
},
{
id: 3,
name: "HP Pavilion 15",
ram: 12,
storage: 1024,
price: 7999
},
{
id: 4,
name: "Lenovo ThinkPad X1 Carbon",
ram: 16,
storage: 512,
price: 10999
},
{
id: 5,
name: "Asus ROG Zephyrus G14",
ram: 32,
storage: 1000,
price: 12999
},
{
id: 6,
name: "Acer Swift 3",
ram: 16,
storage: 512,
price: 4999
}
]
let newarr = laptops.some(index => index.ram == 8 )
console.log(JSON.stringify(newarr)) //结果：ture
//说明：some方法只要其中有一个满足要求就会返回一个true
2.箭头函数的化简
满足以下要求就可以对箭头函数进行化简处理:
简写条件:
- 函数体只有一行，可以省略大括号
- 省略大括号时，如果有 return，也需要一起省略
- 参数只有一个，且不需要写类型，可以省略小括号
举例：
const numArr = [1, 2, 3, 4]
//完整写法
numArr.forEach((item: number) => {
console.log('', item)
})
//化简后
numArr.forEach(item => console.log('', item))
//完整写法
const res = numArr.map((item: number) => {
return item * 2
})
//化简后
const res = numArr.map(item => item * 2)
//完整写法
const res2 = numArr.filter((item: number) => {
if (item > 2) {
return true
} else {
return false
}
})
//化简后
const res2 = numArr.filter(item => item > 2)
