共计 10959 个字符，预计需要花费 28 分钟才能阅读完成。
伸手请间接跳到【办法合集】~
列表 List（包含数组和 Set 或者各种类数组构造都能够是列表）数据的作为系列数据的载体能够说是随处可见了，必然在我的项目开发中是少不了对列表的解决，或多或少的也会有对列表解决办法的封装，这次咱们就来看看有那些常见的列表处理函数。
如果你感觉文章对你有所帮忙，心愿你能够慷慨解囊地给一个赞~
List 构造转 Map 构造
这个能够说是最惯例的，也是最频繁的解决了，当咱们有一系列对象时，常常会遇到依据对象的 id 来查找对应的对象，当列表比拟大或者查找次数比拟多的时候，间接应用 Array.find 来查找老本就会很高，于是将其转成 id 作为 key，对象自身作为 vulue 的 Map 构造了。
// prop 指定应用哪个属性的值作为 key
function transformListToMap<T = any>(list: T[], prop: keyof T) {const map = {} as Record<string, T>
if (!prop) return map
list.forEach(item => {
// 这里丢到 String 里躲避一下 ts 的类型限度
map[String(item[prop])] = item
})
return map
}不过咋一看，这办法如同薄弱的一些，不能笼罩一些绝对简单的状况。
比方当须要一些组合值或者计算值作为 key 时，那单传一个 prop 是不能满足状况的。
再比方，当须要作为 value 的局部不是对象自身，而是一些特定的属性或者一些属性的组合或计算，那显然目前的参数也是无奈反对的。
于是咱们再加亿点细节，欠缺一下这个函数：
// 这是上一期写的 is 系列函数，在文章最底部有链接
import {isDefined, isFunction} from './is'
// 第二个参数同时反对传入一个函数，以反对返回任意解决的值作为 key
// 减少第三个参数，拓展反对传入一个函数以解决任意的值作为 value
function transformListToMap<T = any, K = T>(list: T[],
prop: keyof T | ((item: T) => any),
accessor: (item: T) => K = v => v as any
): Record<string, K> {const map = {} as Record<string, any>
if (!isDefined(prop)) return map
// 对立解决成读取函数
const propAccessor = isFunction(prop) ? prop : (item: T) => item[prop]
list.forEach(item => {const key = propAccessor(item)
// 避免传入不标准函数呈现 null 或 undefined，让其静默生效
if (isDefined(key)) {map[key] = accessor(item)
}
})
return map
}移除 List 中的特定元素
我先贴一段代码，我置信大伙应该没少写过：
const list: any[] = [/* ... */]
const removedId = 'removedId'
const index = list.findIndex(item => item.id === removedId)
if (index !== -1) {list.splice(index, 1)
}没错，依据条件删除列表中的特定元素也是很常见的需要了，于是咱们也能够来封装一下：
function removeArrayItem<T = any>(array: T[],
item: T | ((item: T) => boolean), // 老样子反对传入一个函数适配简单状况
isFn = false // 用来批示列表里的元素是否是函数，以适配极少数状况
): T | null {
let index = -1
if (isFn || typeof item !== 'function') {index = array.findIndex(current => current === item)
} else {index = array.findIndex(item as (item: T) => boolean)
}
if (~index) {return array.splice(index, 1)[0]
}
return null
}不过有时候，咱们可能须要同时删除多个元素，那下面的办法是无奈笼罩的，于是咱们还须要再革新一下：
// 在解决上，会间接操作源列表，并返回被移除的元素汇合
function removeArrayItems<T = any>(array: T[],
items: T | T[] | ((item: T) => boolean),
isFn = false
): T[] {const multiple = Array.isArray(items)
// 针对删除单个元素独自解决
if (!multiple && (isFn || typeof items !== 'function')) {const index = array.findIndex(current => current === items)
if (~index) {return array.splice(index, 1)
}
} else {let filterFn: (item: T) => boolean
if (multiple) {const removedSet = new Set(items)
filterFn = item => removedSet.has(item)
} else {filterFn = items as (item: T) => boolean
}
// 浅克隆源列表，用来遍历解决
const originArray = Array.from(array)
const removedItems: T[] = []
// 用源列表来贮存删除后的后果以达到间接操作源列表的目标
array.length = 0
originArray.forEach(item => (filterFn(item) ? removedItems : array).push(item))
return removedItems
}
return []}函数的后半局部的解决可能有一些形象，能够缓缓屡一下。
这个函数尽管涵盖了多元素删除的状况，不过当应用自定义函数来进行删除时，可能本来只是心愿删除一个元素，但却会对整个列表进行残缺的遍历，从而损失了一些性能。
对 List 中的元素进行归类（GroupBy）
例如有上面这样一组数据：
const list = [{ type: 'a', name: 'x', count: 10},
{type: 'a', name: 'y', count: 11},
{type: 'a', name: 'x', count: 12},
{type: 'a', name: 'y', count: 13},
{type: 'b', name: 'x', count: 14},
{type: 'b', name: 'y', count: 15}
]当初须要针对同 type 且同 name 的数量进行求和，那这里就会须要咱们把数据依照 type 和 name 两个属性进行归类，也就是很经典的 GroupBy 问题了。
其实第一个案例的将 List 转 Map 构造实质也是一个 GroupBy 问题，只不过是最简略的一维归类。
当然如果咱们晓得只会依据两个属性进行归类的话，间接用一个两层的 Map 来贮存后果是没问题的：
const record = {}
arr.forEach(({type, name, count}) => {if (!record[type]) {record[type] = {}}
const typeRecord = record[type]
if (!typeRecord[name]) {typeRecord[name] = 0
}
typeRecord[name] += count
})
record.a.x // 22不过咱们封装通用的工具函数，必定是要思考尽量笼罩可能呈现的状况的（十倍准则），所以咱们出发点是要反对有限层级的分组（只有内存够用），这里就间接上齐全体代码了：
function groupByProps<T = any>(list: T[],
// 能够传入一个数组按程序指定要 groupBy 的属性
props: Array<string | ((item: T) => any)> | string | ((item: T) => any) = []) {
// 如果传入了单个属性或者函数，先对立解决成数组
if (typeof props === 'string' || typeof props === 'function') {props = [props]
}
const propCount = props.length
const zipData: Record<string, any> = {}
for (const item of list) {
// 须要一个变量用来记录以后属性对应的分组层级的 record 对象
// 这里的类型推断须要额定定义不少变量，省事来个 any
let data: any
for (let i = 0; i < propCount; ++i) {
const isLast = i === propCount - 1
const prop = props[i]
const value = typeof prop === 'function' ? prop(item) : item[prop as keyof T]
if (!data) {if (!zipData[value]) {
// 如果到最初一层时，应该初始化一个数组来贮存分组后的后果
zipData[value] = isLast ? [] : {}
}
data = zipData[value]
} else {if (!data[value]) {data[value] = isLast ? [] : {}
}
data = data[value]
}
}
data.push(item)
}
return zipData
}这个函数返回后果的类型推断目前没想到特地好的方法，只能先用
Record<string, any>解决。
依据条件对 List 的元素进行排序
这是这次的最初一个函数了（并不是），也是一个跟高频的场景。
依据我集体以往的教训，凡是遇到须要用表格展现数据的场合，都会呈现依据某列对数据进行排序的需要。
对于只针对繁多属性的排序，我置信大家应该 倒着写 都能写进去了，对于一个通用函数当然是须要反对多列的排序了（作为最初一个函数，我间接上残缺代码给大家本人读一读）：
import {isObject} from './is'
// 反对细粒度定制某个属性的排序规定
interface SortOptions<T = string> {
key: T,
method?: (prev: any, next: any) => number, // 排序的办法
accessor?: (...args: any[]) => any, // 读取属性的办法
type?: 'asc' | 'desc',
params?: any[] // 传入读取器的额定参数}
// 默认的排序办法
const defaultSortMethod = (prev: any, next: any) => {if (Number.isNaN(Number(prev) - Number(next))) {return String(prev).localeCompare(next)
}
return prev - next
}
function sortByProps<T = any>(list: T[],
props: keyof T | SortOptions<keyof T> | (keyof T | SortOptions<keyof T>)[]) {
if (
!list.sort ||
(isObject<SortOptions>(props) && !props.key) ||
!(props as string | SortOptions[]).length
) {return list}
const sortedList = Array.from(list)
if (!Array.isArray(props)) {props = [props]
}
const formattedProps = props
.map(
value =>
(typeof value === 'string'
? {
key: value,
method: defaultSortMethod,
type: 'asc'
}
: value) as SortOptions<keyof T>
)
.map(value => {if (typeof value.accessor !== 'function') {value.accessor = (data: T) => data[value.key]
}
if (typeof value.method !== 'function') {value.method = defaultSortMethod}
value.params = Array.isArray(value.params) ? value.params : []
return value as Required<SortOptions>
})
sortedList.sort((prev, next) => {
let lastResult = 0
for (const prop of formattedProps) {const { method, type, accessor, params} = prop
const desc = type === 'desc'
const result = method(accessor(prev, ...params), accessor(next, ...params))
lastResult = desc ? -result : result
// 若不为 0 则无需进行下一层排序
if (lastResult) break
}
return lastResult
})
return sortedList
}List 构造与 Tree 构造的互转
这里援用一下我在两年多前的一篇文章：js 将扁平构造数据转换为树形构造
外面解析了将列表数据转树形构造的几种形式，不过是 js 写的，最初的合集会贴上 ts 版本。
而后在合集里会付上将树形构造展平成列表构造的办法，采纳的是循环取代递归的形式，树展平的应用场景绝对较少，就不细说了。
办法合集
没有粗疏校对，如果有一丢丢小错自行修复一下~
import {isDefined, isObject, isFunction} from './is'
/**
* 依据数组元素中某个或多个属性的值转换为映射
* @param list - 须要被转换的数组
* @param prop - 须要被转换的属性或提供一个读取办法
* @param accessor - 映射的值的读取办法，默认返回元素自身
*/
export function transformListToMap<T = any, K = T>(list: T[],
prop: keyof T | ((item: T) => any),
accessor: (item: T) => K = v => v as any
): Record<string, K> {const map = {} as Record<string, any>
if (!isDefined(prop)) return map
const propAccessor = isFunction(prop) ? prop : (item: T) => item[prop]
list.forEach(item => {const key = propAccessor(item)
if (isDefined(key)) {map[key] = accessor(item)
}
})
return map
}
/**
* 移除数组中的某个元素
* @param array - 须要被移除元素的数组
* @param item - 须要被移除的元素, 或一个查找办法，如果元素为函数时则须要做一层简略包装
* @param isFn - 标记数组的元素是否为函数
*/
export function removeArrayItem<T = any>(array: T[],
item: T | ((item: T) => boolean),
isFn = false
): T | null {
let index = -1
if (isFn || typeof item !== 'function') {index = array.findIndex(current => current === item)
} else {index = array.findIndex(item as (item: T) => boolean)
}
if (~index) {return array.splice(index, 1)[0]
}
return null
}
/**
* 移除数组中的某个或多个元素
* @param array - 须要被移除元素的数组
* @param items - 须要被移除的元素, 或一个查找办法
* @param isFn - 标记数组的元素是否为函数
*/
function removeArrayItems<T = any>(array: T[],
items: T | T[] | ((item: T) => boolean),
isFn = false
): T[] {const multiple = Array.isArray(items)
if (!multiple && (isFn || typeof items !== 'function')) {const index = array.findIndex(current => current === items)
if (~index) {return array.splice(index, 1)
}
} else {let filterFn: (item: T) => boolean
if (multiple) {const removedSet = new Set(items)
filterFn = item => removedSet.has(item)
} else {filterFn = items as (item: T) => boolean
}
const originArray = Array.from(array)
const removedItems: T[] = []
array.length = 0
originArray.forEach(item => (filterFn(item) ? removedItems : array).push(item))
return removedItems
}
return []}
/**
* 依照肯定程序的属性对数据进行分组
* @param list - 须要分数的数据
* @param props - 须要按程序分组的属性
*/
export function groupByProps<T = any>(list: T[],
props: Array<string | ((item: T) => any)> | string | ((item: T) => any) = []): Record<string, T[]> {if (typeof props === 'string' || typeof props === 'function') {props = [props]
}
const propCount = props.length
const zipData: Record<string, any> = {}
for (const item of list) {
let data
for (let i = 0; i < propCount; ++i) {
const isLast = i === propCount - 1
const prop = props[i]
const value = typeof prop === 'function' ? prop(item) : item[prop as keyof T]
if (!data) {if (!zipData[value]) {zipData[value] = isLast ? [] : {}
}
data = zipData[value]
} else {if (!data[value]) {data[value] = isLast ? [] : {}
}
data = data[value]
}
}
data.push(item)
}
return zipData
}
export interface TreeOptions<T = string> {
keyField?: T,
childField?: T,
parentField?: T,
rootId?: any
}
/**
* 转换扁平构造为树形构造
* @param list - 须要转换的扁平数据
* @param options - 转化配置项
*/
export function transformTree<T = any>(list: T[], options: TreeOptions<keyof T> = {}) {
const {
keyField = 'id' as keyof T,
childField = 'children' as keyof T,
parentField = 'parent' as keyof T,
rootId = null
} = options
const hasRootId = isDefined(rootId) && rootId !== ''
const tree: T[] = []
const record = new Map<T[keyof T], T[]>()
for (let i = 0, len = list.length; i < len; ++i) {const item = list[i]
const id = item[keyField]
if (hasRootId ? id === rootId : !id) {continue}
if (record.has(id)) {(item as any)[childField] = record.get(id)!
} else {(item as any)[childField] = []
record.set(id, (item as any)[childField])
}
if (item[parentField] && (!hasRootId || item[parentField] !== rootId)) {const parentId = item[parentField]
if (!record.has(parentId)) {record.set(parentId, [])
}
record.get(parentId)!.push(item)
} else {tree.push(item)
}
}
return tree
}
/**
* 转换树形构造为扁平构造
* @param tree - 须要转换的树形数据
* @param options - 转化配置项
*/
export function flatTree<T = any>(tree: T[], options: TreeOptions<keyof T> = {}) {
const {
keyField = 'id' as keyof T,
childField = 'children' as keyof T,
parentField = 'parent' as keyof T,
rootId = null
} = options
const hasRootId = isDefined(rootId) && rootId !== ''
const list: T[] = []
const loop = [...tree]
let idCount = 1
while (loop.length) {const item = loop.shift()!
let id
let children: any[] = []
const childrenValue = item[childField]
if (Array.isArray(childrenValue) && childrenValue.length) {children = childrenValue}
if (item[keyField]) {id = item[keyField]
} else {id = idCount++}
if (hasRootId ? item[parentField] === rootId : !item[parentField]) {(item as any)[parentField] = rootId
}
for (let i = 0, len = children.length; i < len; ++i) {const child = children[i]
child[parentField] = id
loop.push(child)
}
list.push(item)
}
return list
}
export interface SortOptions<T = string> {
key: T,
method?: (prev: any, next: any) => number,
accessor?: (...args: any[]) => any,
type?: 'asc' | 'desc',
params?: any[] // 传入读取器的额定参数}
const defaultSortMethod = (prev: any, next: any) => {if (Number.isNaN(Number(prev) - Number(next))) {return String(prev).localeCompare(next)
}
return prev - next
}
/**
* 依据依赖的属性逐层排序
* @param list - 须要排序的数组
* @param props - 排序依赖的属性 key- 属性名 method- 排序办法 accessor- 数据获取办法 type- 升降序
*/
export function sortByProps<T = any>(list: T[],
props: keyof T | SortOptions<keyof T> | (keyof T | SortOptions<keyof T>)[]) {
if (
!list.sort ||
(isObject<SortOptions>(props) && !props.key) ||
!(props as string | SortOptions[]).length
) {return list}
const sortedList = Array.from(list)
if (!Array.isArray(props)) {props = [props]
}
const formattedProps = props
.map(
value =>
(typeof value === 'string'
? {
key: value,
method: defaultSortMethod,
type: 'asc'
}
: value) as SortOptions<keyof T>
)
.map(value => {if (typeof value.accessor !== 'function') {value.accessor = (data: T) => data[value.key]
}
if (typeof value.method !== 'function') {value.method = defaultSortMethod}
value.params = Array.isArray(value.params) ? value.params : []
return value as Required<SortOptions>
})
sortedList.sort((prev, next) => {
let lastResult = 0
for (const prop of formattedProps) {const { method, type, accessor, params} = prop
const desc = type === 'desc'
const result = method(accessor(prev, ...params), accessor(next, ...params))
lastResult = desc ? -result : result
// 若不为 0 则无需进行下一层排序
if (lastResult) break
}
return lastResult
})
return sortedList
}往期传送门：
【封装小技巧】is 系列办法的封装
正文完