Array 对象常用 API
数组都是 Array 的实例化对象，它提供了很多的 方法来帮助我们快速处理数据。
下表列出了一些较为常用方法：
| 方法名 | 作用 |
|---|---|
| indexof | 判断元素在数组中的索引，不存在返回-1 |
| join | 根据传入内容拼接数组，默认为，返回拼接结果，字符串 |
| forEach | 遍历数组，并且将数组的每一项作为参数传入到回调函数中,无返回值 |
| map | 基于原数组，创建一个新数组 |
| filter | 根据回调函数的执行结果，筛选出符合要求的元素,返回一个新数组 |
| find | 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined |
| findIndex | 返回数组中满足条件第一个元素的索引。若没有找到则返回 -1。 |
| every | 返回数组中是否每一个元素都符合要求。 |
| some | 返回数组中是否有一个元素符合要求。 |
| sort | 方法的作用是对原数组的元素进行排序 |
| reduce | 数组求和 |
indexof方法
indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。
语法：数组.indexof(要查找的元素)// 存在返回具体下标，不存在返回 -1
// 1. 数字数组
const nums = [1,2,3,4,5]
// 查找3的索引
let index = nums.indexOf(3) //2
// 2. 字符串数组
const foods = ['西兰花','西葫芦','西兰花']
//查找西兰花的索引
let index1 = foods.indexOf('西兰花') // 0
// 查找 西兰的索引
let index2 = foods.indexOf('西兰') // -1
join 方法
join()方法将数组用逗号或指定的分隔符,将数组的每一项拼接到一起
语法：
数组.join('分隔符') // 基于传入的分隔符 将数组的每一项拼接到一起
数组.join() // 使用【逗号】将数组的每一项 拼接到一起
const elements = ['花菜', '西兰花', '菜花']
console.log(elements.join()) // 花菜,西兰花,菜花 默认用逗号拼接
console.log(elements.join('')) // 花菜西兰花菜花 直接拼接
console.log(elements.join('-')) // 花菜-西兰花-菜花 用 - 拼接
【✨常用】forEach方法
forEach() 方法会遍历数组，并且将数组的每一项作为参数传入到回调函数中，无返回值
语法：
数组.forEach((数组项:类型，索引:number)=>{ // 逻辑 })
数组.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('name:',item.name,'title:',item.title)
})
【✨常用】map 方法
map() 方法可以基于一个数组（原数组） ，创建一个新数组并返回
语法：
// .map是一个泛型方法，有两种写法
// 1. 指定返回值类型写法 - 不省略<>泛型参数
数组.map<返回值类型>((item:数组项类型,index:number)=>{ return xxx })
// 2. 简写 - 编译器能自动推断出返回值类型，可以省略泛型参数
数组.map((item:数组项类型,index:number)=>{return xxx})
// 接口
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: '和平守望' },
]
//返回一个简单数组
let newArr = arr.map((item:HeroInfo)=>{
return item.name
})
console.log('newArr：',newArr.join('|'))
//返回一个复杂类型的数组
interface IRes{
name:string
}
let newArr2 = arr.map<IRes>((item:HeroInfo)=>{
return {name:item.name}
})
console.log('newArr2：',JSON.stringify(newArr2))
map练一练
// map 基本使用01-
// 需求：基于numArr返回新数组，每一个数组翻倍后返回一个新数组
const numArr: number[] = [1, 2, 3, 4, 5]
let newArr1 = numArr.map((item)=>{
return item*2
})
console.log('newArr1：',newArr1)
// map 基本使用02
// 需求1. 基于 foodArr 返回新数组['西兰花','西葫芦','西红柿']
// 需求2. 基于 foodArr返回新数组
/*[
{id:1,name:'西兰花',price:5},
{id:2,name:'西葫芦',price:4},
{id:3,name:'西红柿',price:3}
]
*/
interface FoodInfo {
name: string
price: number
}
const foodArr: FoodInfo[] = [
{name:'西兰花',price:5},
{name:'西葫芦',price:4},
{name:'西红柿',price:3}
]
//需求1. 基于 foodArr 返回新数组['西兰花','西葫芦','西红柿']
let newArr2 = foodArr.map((item:FoodInfo)=>{
return item.name
})
console.log('newArr2：',JSON.stringify(newArr2))
//需求2. 基于 foodArr返回新数组
interface iRes extends FoodInfo{
id:number
}
let newArr3 = foodArr.map<iRes>((item:FoodInfo,index:number)=>{
return {id:index+1,name:item.name,price:item.price}
})
console.log('newArr3：',JSON.stringify(newArr3))
filter 方法
根据回调函数的执行结果，筛选出符合要求的元素,返回一个新数组
数组.filter((数组项:类型,索引:number)=>{
return true // 或者可以解析为 true 的值 需要这一项
return false // 或者可以解析为 false 的值 不需要这一项
})
//使用
let arr = [50, 48, 60, 88, 90]
let arr1 = arr.filter((item) => {
return item >= 60
})
console.log(JSON.stringify(arr1)) // [60,88,90]
filter练一练
// 筛选条件: 全部、战士、法师、坦克、刺客、射手、辅助
// filter基本使用 03 - 筛选出类型为 战士 的英雄
interface Hero {
id: number
name: string
title: string
type: string
avatar: ResourceStr
}
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: '射手' },
]
let newheroList = heroList.filter((item:Hero)=>{
if(item.type.includes('战士')){ //includes(查询的字符串)判断字符串是否存在
return true
}else {
return false
}
})
console.log(JSON.stringify(newheroList))
sort 方法
sort方法对数组的元素进行排序，并返回对相同数组的引用。会改变原数组的内容排列顺序
//语法：
数组.sort((第一个比较元素a,第二个比较元素b)=>{
return a-b如果是正数 // a 会调换到 b 的后面
return a-b如果是 负数 // a 会继续留在 b 的前面
return a-b如果是 0 // a和b的位置保持不变
})
//使用：
const arr = [2, 3, 1]
let arr1 = arr.sort((a, b) => { // 小到大
return a - b
})
console.log('arr1',JSON.stringify(arr1))
let arr2 = arr.sort((a, b) => { //大到小
return b - a
})
console.log('arr2',JSON.stringify(arr2))
interface Food{
name:string
price:number
}
// 对象数组排序 - 按照价格降序排列
const foods:Food[] = [
{
name: '西兰花',
price: 6
},
{
name: '西红柿',
price: 3
},
{
name: '榴莲',
price: 30
},
{
name: '葱花',
price: 1
}
]
let arr3 = foods.sort((a,b)=>{
return b.price - a.price
})
console.log('arr3',JSON.stringify(arr3))
reduce方法
reduce方法的作用是求和，他会逐个遍历数组元素，每一步都将当前元素的值与前一步的结果相加，最后返回。
语法：数组.reduce((累加结果，当前元素值)=>{}, 初始值)
// 数值数组求和
const arr = [1,2,3,4]
const res = arr.reduce((a, b) => {
return a + b
},0)
console.log('res:', res) // 10
【✨常用】findIndex 方法
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
数组.findIndex((数组项:类型,索引:number)=>{
return true // 找到了需要的元素
return false // 或者可以解析为 false 的值 不是这一项
})
//使用
const arr = ['西兰花', '西葫芦', '西兰花']
let index =arr.findIndex((item: string, index: number) => {
if (item == '西葫芦') {
return true
} else {
return false
}
})
console.log('',index) // 1
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))//['西葫芦']
every 方法
every 方法测试一个数组内的【所有元素】是否都能通过指定函数的测试。它返回一个布尔值true/false
const res = 数组.every((数组项:类型,索引:number)=>{
return true // 当前元素符合要求 返回 true
return false // 当前元素不符合要求 返回 false
})
//使用
// 1. 数值数组 判断是否每个元素都大于 2
const numArr = [2,4,6,8,10]
let isgt2 = numArr.every((item: number) => {
return item > 2
})
console.log('',isgt2)
some 方法
some 方法测试数组中是否【至少有一个元素】通过了由提供的函数实现的测试。
const res = 数组.every((数组项:类型,索引:number)=>{
return true // 当前元素符合要求 返回 true
return false // 当前元素不符合要求 返回 false
})
//使用
// 1. 数值数组 判断是否有等于 5 的元素
const numList = [2, 4, 6, 8, 10]
