数组常用方法
一、 Array 对象常用 API
作用：数组都是 Array 的实例化对象，它提供了很多的 方法来帮助我们快速处理数据。
常用方法：
1.1、indexof方法
作用：返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。
语法：数组.indexof(要查找的元素)// 存在返回具体下标，不存在返回 -1
代码演示：
//使用 indexof 方法来获取元素下标
let num:number[] = [1,2,3,4,5,6]
let numindex = num.indexOf(5)
console.log('',numindex)//4
1.2、join方法
作用：将数组用逗号或指定的分隔符,将数组的每一项拼接到一起。
语法：数组.join('分隔符') // 基于传入的分隔符 将数组的每一项拼接到一起。
代码演示：
let names:string[] = ['张','王','李','刘']
console.log(names.join())//打印结果张,王,李,刘(默认逗号分隔)
console.log(names.join(''))//打印结果张王李刘(直接拼接)
console.log(names.join('-'))//打印结果张-王-李-刘（-分隔）
1.3、forEach方法
作用：forEach() 方法会遍历数组，并且将数组的每一项作为参数传入到回调函数中，无返回值。
语法：数组.forEach((数组项:类型，索引:number)=>{ // 逻辑 })
代码演示：
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、map方法
作用：可以基于原有数组中的数据，生成一个新数组。
语法：数组.map<返回数据的类型>( (数组中的每一项:项类型)=>{ return 你需要的数据 } )
代码演示：
//原对象数组
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: '和平守望' },
]
//如果我们需要通过一个数组得到一个简单类型的新数组，map可以不需要显示指定泛型
let newarr = arr.map((item:HeroInfo)=>{
return item.name
})
console.log(newarr.toString())//打印结果廉颇,小乔,赵云,墨子
console.log(JSON.stringify(newarr))//打印结果["廉颇","小乔","赵云","墨子"]
//如果返回的是一个复杂类型的数组，则必须通过interface来定义类型，并要在 map方法的return 后面返回符合这个接口类型的对象
interface nam{
name:string
}
let Newarr = arr.map<nam>((item:HeroInfo)=>{
return {name:item.name}
})
console.log(JSON.stringify(Newarr))//打印结果[{"name":"廉颇"},{"name":"小乔"},{"name":"赵云"},{"name":"墨子"}]
小案例：
// map 基本使用01-
// 需求：基于numArr返回新数组，每一个数组翻倍后返回一个新数组
const numArr: number[] = [1, 2, 3, 4, 5]
let numarr = numArr.map((item:number)=>{
return item*2
})
console.log(numarr.toString())
// 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
let fooda = foodArr.map((item:FoodInfo)=>{
return item.name
})
console.log(JSON.stringify(fooda))
//需求2
interface food{
id:number
name:string
price:number
}
let foodarr = foodArr.map<food>((item:FoodInfo,index:number)=>{
return {id:index+1,name:item.name,price:item.price}
})
console.log(JSON.stringify(foodarr))
1.5、filter 方法
作用：根据回调函数的执行结果，筛选出符合要求的元素,返回一个新数组。
语法：数组.filter((数组项:类型,索引:number)=>{
return true // 或者可以解析为 true 的值 需要这一项
return false // 或者可以解析为 false 的值 不需要这一项
})
代码演示：
//filter按需求获得一个新数组
let num = [34,66,75,47,99,59,80]
let num1 = num.filter((item)=>{
return item>=60
})
console.log(num1.toString())//打印结果66,75,99,80
1.6、sort 方法
作用：sort方法对数组的元素进行排序，并返回对相同数组的引用。会改变原数组的内容排列顺序。
语法：数组.sort((第一个比较元素a,第二个比较元素b)=>{
return a-b如果是正数 // a 会调换到 b 的后面
return a-b如果是 负数 // a 会继续留在 b 的前面
return a-b如果是 0 // a和b的位置保持不变
//正序第一个参数减去第二个参数，倒序用第二个参数减去第一个参数
})
代码演示：
// 数值数组正序排序
const arr = [5, 12, 8, 130, 44]
arr.sort((a,b)=>{
return a-b
})
console.log(arr.toString())
// 对象数组排序 - 按照价格降序排列
interface Food{
name:string
price:number
}
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((累加结果，当前元素值)=>{}, 初始值)
代码演示：
let arr = [1,2,3,4,5]
let Arr = arr.reduce((a,b)=>{
return a + b
},0)
console.log(Arr.toString())
1.8、findindex
作用：
语法：
代码演示：
let arr = [1,2,3,4,5]
let arr1 = arr.findIndex((item:number)=>{
return item == 4
})
console.log(arr1.toString())
1.9、find方法
作用：find() 方法返回通过测试（函数内判断）的数组的第一个元素的值，找不到返回 undefined。
语法：数组.find((数组项:类型,索引:number)=>{
return true // 找到了需要的元素
return false // 或者可以解析为 false 的值 不是这一项
})
代码演示：
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// 黄色
}
];
// 2.1 找出 名字叫做 橙子 的水果
let czname = goods.find((item:Good)=>{
return item.name == '橙子'
})
console.log(JSON.stringify(czname))
// 2.2 找出价格大于等于 3 元的第一个水果
let pr = goods.find((item:Good)=>{
return item.price == 3
})
console.log(JSON.stringify(pr))
// 2.3 找出粉色的水果
let pin = goods.find((item:Good)=>{
return item.color == Color.Pink
})
console.log(JSON.stringify(pin))
1.11、 every 方法
作用：every 方法测试一个数组内的【所有元素】是否都能通过指定函数的测试。它返回一个布尔值true/false。
语法：const res = 数组.every((数组项:类型,索引:number)=>{
return true // 当前元素符合要求 返回 true
return false // 当前元素不符合要求 返回 false
})
代码演示：
// 1. 数值数组 判断是否每个元素都大于 2
const numArr = [2,4,6,8,10]
let num = numArr.every((item)=>{
return item > 2
})
console.log(JSON.stringify(num))
案例：
interface Animal{
id:number
name:string
color:ResourceColor // 颜色
diet:string // 饮食习性
}
const animals:Animal[] = [
{
id:1,
name:'狮子',
color:Color.Yellow,
diet:'肉食动物'
},
{
id:2,
name:'老虎',
color:Color.Yellow,
diet:'肉食动物'
},
{
id:3,
name:'黄鼠狼',
color:Color.Yellow,
diet:'肉食动物'
},
{
id:4,
name:'柴犬',
color:Color.Yellow,
diet:'杂食动物'
},
]
// 3.1 判断是否每个动物的颜色都是黄色
let an = animals.every((item)=>{
return item.color == Color.Yellow
})
console.log(JSON.stringify(an))
1.12、some 方法
作用：some 方法测试数组中是否【至少有一个元素】通过了由提供的函数实现的测试。
语法：const res = 数组.every((数组项:类型,索引:number)=>{
return true // 当前元素符合要求 返回 true
return false // 当前元素不符合要求 返回 false
})
代码演示：
// 1. 数值数组 判断是否有等于 5 的元素
const numList = [2, 4, 6, 8, 10]
let n = numList.some((item)=>{
return item == 5
})
console.log('',n)
二、函数补充
2.1、回调函数
概念：作为实参传入另一个函数，并在该函数内被调用，用来完成某些任务的函数，称之为回调函数。
比如：
2.2、 箭头函数化简
箭头函数在日常使用中，如果满足一些特定的条件，可以写的更为简洁。
简写条件:
- 函数体只有一行，可以省略大括号
- 省略大括号时，如果有 return，也需要一起省略
- 参数只有一个，且不需要写类型，可以省略小括号
