在js中数组相关用法讲解

数组

uniqueArray

简单数组去重

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

uniqueArrayByKey

根据 key 数组去重

/*** 根据key数组去重* @param arr* @param key* @returns*/
export function uniqeArrayByKey(arr: any[], key: string) {const obj: Record<string, any> = {}return arr.reduce((prev, item) => {obj[item[key]] ? '' : (obj[item[key]] = true && prev.push(item))return prev}, [])
}const arr = [{ id: 1, parentid: 0 },{ id: 2, parentid: 1 },{ id: 3, parentid: 1 },{ id: 3, parentid: 1 },
]uniqeArrayByKey(arr, 'id')/*** [{ id: 1, parentid: 0 },{ id: 2, parentid: 1 },{ id: 3, parentid: 1 },
];**/

sortCompare

数组根据 key 排序

/*** 排序* arr: 所需排序的数组* prop:排序的依据字段* order:默认true -> 正序(小 -> 大) / false -> 倒序(大 -> 小)*/
export const sortCompare = (arr: any[], prop: string | number, order = true) => {return arr.sort(compare(prop, order))
}function compare(prop: string | number, order: boolean) {return (obj1: Record<string, any>, obj2: Record<string, any>) => {let val1 = obj1[prop]let val2 = obj2[prop]if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {val1 = Number(val1)val2 = Number(val2)}if (order) {if (val1 < val2) return -1else if (val1 > val2) return 1else return 0} else {if (val1 > val2) return -1else if (val1 < val2) return 1else return 0}}
}const arr = [{ order: 1, name: '1' },{ order: 10, name: '10' },{ order: 3, name: '3' },
]const sortArr = sortCompare(arr, order)/*** [{ order: 1, name: '1' },{ order: 3, name: '3' },{ order: 10, name: '10' },
];**/

multiFieldSort

数组根据多个字段排序

/*** multiFieldSort(data, [{ field: 'age', order: 'desc' }, { field: 'name' }, { field: 'salary', order: 'desc' }])* @param {*} arr* @param {*} sortFields* @returns*/
export function multiFieldSort(arr, sortFields) {return arr.sort((a, b) => {for (let i = 0; i < sortFields.length; i++) {let field = sortFields[i].fieldlet order = sortFields[i].order || 'asc'if (a[field] < b[field]) {return order === 'asc' ? -1 : 1}if (a[field] > b[field]) {return order === 'asc' ? 1 : -1}}return 0})
}

getArrayLabelByValue

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

interface IParams {arr: any[]value: anyvalueKey?: stringlabelKey?: stringdefaultValue?: string | number
}/*** 根据数组获取数组中的值* @param param* @returns*/
export function getArrayLabelByValue({arr,value,valueKey = 'value',labelKey = 'label',defaultValue = undefined,
}: IParams) {if (!Array.isArray(arr)) {throw new Error('Type requires an array')}const obj = arr.find(item => String(item[valueKey]) === String(value))return obj ? obj[labelKey] : defaultValue
}/*** {arr,value,valueKey = 'value',labelKey = 'label',defaultValue = undefined,
}*/const arr = [{label: 'Tom',value: '1',},{label: 'Lily',value: '2',},
]getArrayLabelByValue({ arr, value: '2' }) // Lily

shuffle

洗牌算法随机

/*** 洗牌算法随机* @param arr* @returns*/
export function shuffle(arr: any[]) {let result: any[] = [],random: numberwhile (arr.length > 0) {random = Math.floor(Math.random() * arr.length)result.push(arr[random])arr.splice(random, 1)}return result
}const arr = [1, 2, 3]shuffle(arr) // [2,3,1]

compact

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

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

countOccurrences

检测数值出现次数

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

flatten

指定深度扁平化数组

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

deepFlatten

递归扁平化数组

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

difference

查找两个数组之间的差异

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

indexOfAll

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

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

intersection

两数组的交集

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

intersectionBy

两数组都符合条件的交集

可用于在对两个数组的每个元素执行了函数之后,返回两个数组中存在的元素列表。

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

intersectionWith

先比较后返回交集

/*** 先比较后返回交集* @param a* @param b* @param comp* @returns*/
export const intersectionWith = (a: any[], b: any[], comp: (arg0: any, arg1: any) => any) =>a.filter(x => b.findIndex(y => comp(x, y)) !== -1)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 用以区分

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/900351.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RT-Thread ulog 日志组件深度分析

一、ulog 组件核心功能解析 轻量化与实时性 • 资源占用&#xff1a;ulog 核心代码仅需 ROM<1KB&#xff0c;RAM<0.2KB&#xff0c;支持在资源受限的MCU&#xff08;如STM32F103&#xff09;中运行。 • 异步/同步模式&#xff1a;默认采用异步环形缓冲区&#xff08;rt_…

T113s3远程部署Qt应用(dropbear)

T113-S3 是一款先进的应用处理器&#xff0c;专为汽车和工业控制市场而设计。 它集成了双核CortexTM-A7 CPU和单核HiFi4 DSP&#xff0c;提供高效的计算能力。 T113-S3 支持 H.265、H.264、MPEG-1/2/4、JPEG、VC1 等全格式解码。 独立的硬件编码器可以编码为 JPEG 或 MJPEG。 集…

12.青龙面板自动化我的生活

安装 docker方式 docker run -dit \ -v /root/ql:/ql/data \ -p 5700:5700 \ -e ENABLE_HANGUPtrue \ -e ENABLE_WEB_PANELtrue \ --name qinglong \ --hostname qinglong \ --restart always \ whyour/qinglongk8s方式 https://truecharts.org/charts/stable/qinglong/ he…

Maven 远程仓库推送方法

步骤 1&#xff1a;配置 pom.xml 中的远程仓库地址 在项目的 pom.xml 文件中添加 distributionManagement 配置&#xff0c;指定远程仓库的 URL。 xml 复制 <project>...<distributionManagement><!-- 快照版本仓库 --><snapshotRepository><id…

Spring Boot 日志 配置 SLF4J 和 Logback

文章目录 一、前言二、案例一&#xff1a;初识日志三、案例二&#xff1a;使用Lombok输出日志四、案例三&#xff1a;配置Logback 一、前言 在开发 Java 应用时&#xff0c;日志记录是不可或缺的一部分。日志可以记录应用的运行状态、错误信息和调试信息&#xff0c;帮助开发者…

JS API 事件监听

焦点事件案例&#xff1a;搜索框激活下拉菜单 事件对象 事件对象存储事件触发时的相关信息 可以判断用户按键&#xff0c;点击元素等内容 如何获取 事件绑定的回调函数中的第一个形参就是事件对象 一般命名为e,event 事件对象常用属性 type类型 click mouseenter client…

DDD与MVC扩展能力对比

一、架构设计理念的差异二、扩展性差异的具体表现三、DDD扩展性优势的深层原因四、MVC扩展性不足的典型场景五、总结&#xff1a;架构的本质与选择六、例子1&#xff09;场景描述2&#xff09;MVC实现示例&#xff08;三层架构&#xff09;3&#xff09;DDD实现示例&#xff08…

针对 SQL 查询中 IN 子句性能优化 以及 等值 JOIN 和不等值 JOIN 对比 的详细解决方案、代码示例及表格总结

以下是针对 SQL 查询中 IN 子句性能优化 以及 等值 JOIN 和不等值 JOIN 对比 的详细解决方案、代码示例及表格总结&#xff1a; 问题 1&#xff1a;IN 的候选值过多&#xff08;如超过 1000 个&#xff09; 问题描述 当 IN 列表中的值过多时&#xff0c;SQL 会逐个比较每个值…

手部穴位检测技术:基于OpenCV和MediaPipe的实现

手部穴位检测是医学和健康管理领域的重要技术之一。通过准确识别手部的关键穴位,可以为中医诊断、康复治疗以及健康监测提供支持。本文将介绍一种基于OpenCV和MediaPipe的手部穴位检测方法,展示如何利用计算机视觉技术实现手部关键点的检测,并进一步标注手部的穴位位置。 技…

Day20 -自动化信息收集工具--ARL灯塔的部署

准备&#xff1a; 纯净的Docker环境 ARL的包 一、Docker的部署 00x1 更新系统包 sudo apt update 00x2 安装必要的依赖包 sudo apt install -y apt-transport-https ca-certificates curl software-properties-common 00x3 下载docker和docker-compose apt-get install do…

sqlalchemy查询json

第一种&#xff1a;字段op是json格式&#xff1a; {"uid": "cxb123456789","role": 2,"op_start_time": 1743513707504,"op_end_time": 1743513707504,"op_start_id": "op_001","op_end_id"…

搭建K8S-1.23

0、简介 这里只用3台服务器来做一个简单的集群 地址主机名192.168.160.40kuber-master-1192.168.160.41kuber-master-2192.168.160.42kuber-node-1 1、关闭三个服务 &#xff08;1&#xff09;防火墙 systemctl stop firewalld &#xff08;2&#xff09;Selinux setenf…

初阶数据结构--树

1. 树的概念与结构 树是⼀种⾮线性的数据结构&#xff0c;它是由 n&#xff08;n>0&#xff09; 个有限结点组成⼀个具有层次关系的集合。把它叫做 树是因为它看起来像⼀棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;⽽叶朝下的。 有⼀个特殊的结点&#xff0c;称…

硬件工程师面试问题(五):蓝牙面试问题与详解

蓝牙技术作为物联网与智能设备的核心无线协议&#xff0c;其硬件设计能力直接影响产品连接稳定性、功耗及兼容性。面试是评估候选人射频电路设计、天线优化、协议栈调试等综合技能的关键环节&#xff0c;尤其在BLE低功耗设计、共存抗干扰等场景中&#xff0c;硬件工程师的实践经…

Redis-基本数据类型

Redis支持的基本数据类型&#xff1a;String、hash、list、Set、Zset 一、String 特点 可以存储三种类型 int、float、string 运用场景 缓存&#xff1a;存储HTML片段、用户会话&#xff08;Session&#xff09;计数器&#xff1a;网站访问量、点赞数&#xff08;incr方法&am…

Tomcat的部署

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和 并发访问用户不是很多的场合下被普遍使用&#xff0c;Tomcat 具有处理HTML页面的功能&#xff0c;它还是一个Servlet和 JSP容器 官网:Apache Tomcat - Welco…

Linux的TCP连接数到达2万,其中tcp_tw、tcp_alloc、tcp_inuse都很高,可能出现什么问题

当 Linux 系统的 TCP 连接数达到 2 万,且 /proc/net/sockstat 中的 tcp_tw(TIME_WAIT 连接)、tcp_alloc(已分配但未完全建立的连接)和 tcp_inuse(正在使用的连接)均处于高位时,可能会引发以下问题: 一、关键指标分析 通过 /proc/net/sockstat 可以查看 TCP 连接状态:…

服务器数据恢复—Raid6阵列硬盘故障掉线,上层虚拟机数据如何恢复?

服务器数据恢复环境&故障&#xff1a; 一台由16块硬盘组成的raid6磁盘阵列。磁盘阵列中有一块硬盘因为物理故障掉线&#xff0c;导致服务器上层虚拟机无法正常使用&#xff0c;部分分区丢失&#xff0c;重启物理服务器后发现数据丢失。 服务器数据恢复过程&#xff1a; 1、…

Unhandled exception: org.apache.poi.openxml4j.exceptions.InvalidFormatException

代码在main方法里面没有报错&#xff0c;在Controller里面就报错了。 原来Controller类里面少了行代码 import org.apache.poi.openxml4j.exceptions.InvalidFormatException; 加上去就解决了。

RISC-V debug专栏2 --- Debug Module(DM)

Debug Module&#xff08;DM&#xff09;的核心功能 DM 就像一个翻译官&#xff0c;负责把调试器的抽象指令&#xff08;比如 “暂停处理器”&#xff09;转换成硬件能听懂的具体操作。它必须实现以下基本功能&#xff1a; 必要功能&#xff08;必须实现&#xff09;&#xff…