在js中数组相关用法解说

数组

uniqueArray

简单数组去重

1. /**
2. * 简单数组去重
3. * @param arr
4. * @returns
5. */
6. export const uniqueArray = <T>(arr: T[]) => [...new Set(arr)];
8. const arr1 = [1,1,1,1 2, 3];
10. uniqueArray(arr); // [1,2,3]

复制代码

uniqueArrayByKey

根据 key 数组去重

1. /**
2. * 根据key数组去重
3. * @param arr
4. * @param key
5. * @returns
6. */
7. export function uniqeArrayByKey(arr: any[], key: string) {
8.   const obj: Record<string, any> = {}
9.   return arr.reduce((prev, item) => {
10.     obj[item[key]] ? '' : (obj[item[key]] = true && prev.push(item))
11.     return prev
12.   }, [])
13. }
15. const arr = [
16.   { id: 1, parentid: 0 },
17.   { id: 2, parentid: 1 },
18.   { id: 3, parentid: 1 },
19.   { id: 3, parentid: 1 },
20. ]
22. uniqeArrayByKey(arr, 'id')
24. /**
25. * [
26.   { id: 1, parentid: 0 },
27.   { id: 2, parentid: 1 },
28.   { id: 3, parentid: 1 },
29. ];
30. *
31. */

复制代码

sortCompare

数组根据 key 排序

1. /**
2. * 排序
3. * arr: 所需排序的数组
4. * prop：排序的依据字段
5. * order：默认true -> 正序（小 -> 大） / false -> 倒序（大 -> 小）
6. */
7. export const sortCompare = (arr: any[], prop: string | number, order = true) => {
8.   return arr.sort(compare(prop, order))
9. }
11. function compare(prop: string | number, order: boolean) {
12.   return (obj1: Record<string, any>, obj2: Record<string, any>) => {
13.     let val1 = obj1[prop]
14.     let val2 = obj2[prop]
15.     if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
16.       val1 = Number(val1)
17.       val2 = Number(val2)
18.     }
19.     if (order) {
20.       if (val1 < val2) return -1
21.       else if (val1 > val2) return 1
22.       else return 0
23.     } else {
24.       if (val1 > val2) return -1
25.       else if (val1 < val2) return 1
26.       else return 0
27.     }
28.   }
29. }
31. const arr = [
32.   { order: 1, name: '1' },
33.   { order: 10, name: '10' },
34.   { order: 3, name: '3' },
35. ]
37. const sortArr = sortCompare(arr, order)
39. /**
40. * [
41.   { order: 1, name: '1' },
42.   { order: 3, name: '3' },
43.   { order: 10, name: '10' },
44. ];
45. *
46. */

复制代码

multiFieldSort

数组根据多个字段排序

1. /**
2. * multiFieldSort(data, [{ field: 'age', order: 'desc' }, { field: 'name' }, { field: 'salary', order: 'desc' }])
3. * @param {*} arr
4. * @param {*} sortFields
5. * @returns
6. */
7. export function multiFieldSort(arr, sortFields) {
8.   return arr.sort((a, b) => {
9.     for (let i = 0; i < sortFields.length; i++) {
10.       let field = sortFields[i].field
11.       let order = sortFields[i].order || 'asc'
13.       if (a[field] < b[field]) {
14.         return order === 'asc' ? -1 : 1
15.       }
16.       if (a[field] > b[field]) {
17.         return order === 'asc' ? 1 : -1
18.       }
19.     }
20.     return 0
21.   })
22. }

复制代码

getArrayLabelByValue

根据数组和 value 获取数组中的 label,没有返回 undefined

1. interface IParams {
2.   arr: any[]
3.   value: any
4.   valueKey?: string
5.   labelKey?: string
6.   defaultValue?: string | number
7. }
9. /**
10. * 根据数组获取数组中的值
11. * @param param
12. * @returns
13. */
14. export function getArrayLabelByValue({
15.   arr,
16.   value,
17.   valueKey = 'value',
18.   labelKey = 'label',
19.   defaultValue = undefined,
20. }: IParams) {
21.   if (!Array.isArray(arr)) {
22.     throw new Error('Type requires an array')
23.   }
24.   const obj = arr.find(item => String(item[valueKey]) === String(value))
25.   return obj ? obj[labelKey] : defaultValue
26. }
28. /**
29. * {
30.   arr,
31.   value,
32.   valueKey = 'value',
33.   labelKey = 'label',
34.   defaultValue = undefined,
35. }
36. */
38. const arr = [
39.   {
40.     label: 'Tom',
41.     value: '1',
42.   },
43.   {
44.     label: 'Lily',
45.     value: '2',
46.   },
47. ]
49. getArrayLabelByValue({ arr, value: '2' }) // Lily

复制代码

shuffle

洗牌算法随机

1. /**
2. * 洗牌算法随机
3. * @param arr
4. * @returns
5. */
6. export function shuffle(arr: any[]) {
7.   let result: any[] = [],
8.     random: number
9.   while (arr.length > 0) {
10.     random = Math.floor(Math.random() * arr.length)
11.     result.push(arr[random])
12.     arr.splice(random, 1)
13.   }
14.   return result
15. }
17. const arr = [1, 2, 3]
19. shuffle(arr) // [2,3,1]

复制代码

compact

去除数组中的无效/无用值

1. /**
2. * 去除数组中的无效/无用值
3. * @param arr
4. * @returns
5. */
6. export function compact(arr: any[]) {
7.   return arr.filter(Boolean)
8. }
10. compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])
12. // [ 1, 2, 3, 'a', 's', 34 ]

复制代码

countOccurrences

检测数值出现次数

1. /**
2. * 检测数值出现次数
3. * @param arr
4. * @param val
5. * @returns
6. */
7. export function countOccurrences(arr: any[], val: any) {
8.   return arr.reduce((a, v) => (v === val ? a + 1 : a), 0)
9. }
11. countOccurrences([1, 1, 2, 1, 2, 3], 1) // 3

复制代码

flatten

指定深度扁平化数组

1. /**
2. * 指定深度扁平化数组
3. * @param arr
4. * @param depth
5. * @returns
6. */
7. export function flatten(arr: any[], depth = 1): any[] {
8.   return arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), [])
9. }
11. flatten([1, [2], 3, 4]) // [1, 2, 3, 4]
12. flatten([1, [2, [3, [4, 5], 6], 7], 8], 2) // [1, 2, 3, [4, 5], 6, 7, 8]

复制代码

deepFlatten

递归扁平化数组

1. /**
2. * 递归扁平化数组
3. * @param arr
4. * @returns
5. */
6. export function deepFlatten(arr: any[]): any[] {
7.   return [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)))
8. }
10. deepFlatten([1, [2], [[3], 4], 5]) // [1,2,3,4,5]

复制代码

difference

查找两个数组之间的差异

1. /**
2. * 查找两个数组之间的差异
3. * @param a
4. * @param b
5. * @returns
6. */
7. export const difference = (a: any[], b: any[]) => {
8.   const s = new Set(b)
9.   return a.filter(x => !s.has(x))
10. }
12. difference([1, 2, 3], [1, 2, 4]) // [3]

复制代码

indexOfAll

返回数组中某值的所有索引

1. /**
2. * 返回数组中某值的所有索引
3. * @param arr
4. * @param val
5. * @returns
6. */
7. export const indexOfAll = (arr: any[], val: any) => arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), [])
9. indexOfAll([1, 2, 3, 1, 2, 3], 1) // [0,3]
10. indexOfAll([1, 2, 3], 4) // []

复制代码

intersection

两数组的交集

1. /**
2. * 两数组的交集
3. * @param a
4. * @param b
5. * @returns
6. */
7. export const intersection = (a: any[], b: any[]) => {
8.   const s = new Set(b)
9.   return a.filter(x => s.has(x))
10. }
12. intersection([1, 2, 3], [4, 3, 2]) // [2, 3]

复制代码

intersectionBy

两数组都符合条件的交集
可用于在对两个数组的每个元素执行了函数之后，返回两个数组中存在的元素列表。

1. /**
2. * 两数组都符合条件的交集
3. * @param a
4. * @param b
5. * @param fn
6. * @returns
7. */
8. export const intersectionBy = (a: any[], b: any[], fn: (arg0: any) => unknown) => {
9.   const s = new Set(b.map(fn))
10.   return a.filter(x => s.has(fn(x)))
11. }
13. intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor) // [2.1]

复制代码

intersectionWith

先比较后返回交集

1. /**
2. * 先比较后返回交集
3. * @param a
4. * @param b
5. * @param comp
6. * @returns
7. */
8. export const intersectionWith = (a: any[], b: any[], comp: (arg0: any, arg1: any) => any) =>
9.   a.filter(x => b.findIndex(y => comp(x, y)) !== -1)
11. intersectionWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)) // [1.5, 3, 0]

复制代码

addDeepProperty

给树结构每一层添加一层 deep 用以区分

1. export function addDeepProperty(tree, deep = 1) {
2.   // 添加属性 deep 到当前层级
3.   tree.deep = deep
5.   // 递归处理子节点
6.   if (tree.children && tree.children.length > 0) {
7.     tree.children.forEach(child => {
8.       addDeepProperty(child, deep + 1)
9.     })
10.   }
12.   return tree
13. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。