按首字母排序分组(类通讯录)

news2024/11/20 14:31:30

移动端开发过程中,有遇到按首字母分组排序的,仿通讯录效果

那实现过程中,我们需要安装插件

npm i --save js-pinyin  

安装后使用:

在页面中引用

import Pinyin from 'js-pinyin'

调用

const sortByFirstLetter = (origin) => {
    // 将目标数据进行排序
    origin = origin.sort((pre, next) => Pinyin.getFullChars(pre.name).localeCompare(Pinyin.getFullChars(next.name)))
    const newArr = []
    origin.map(item => {
        // 取首字母
        const key = Pinyin.getFullChars(item.name).charAt(0)
        const index = newArr.findIndex(subItem => subItem.key === key)
        if (index < 0) {
            newArr.push({
                key: key,
                list: [item]
            })
        } else {
            newArr[index].list.push(item)
        }
    })
    return newArr
}

返回结果

原文链接:前端开发中按照汉字首字母排序分组_前端按字母排序_zenos_zhou的博客-CSDN博客

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

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

相关文章

笔记本电脑的电池健康:确保长时间使用和优异性能的关键

笔记本电脑已经成为我们日常生活中不可或缺的工具&#xff0c;无论是办公、学习还是娱乐&#xff0c;我们都依赖着它的便携性和高效性能。而在所有的硬件组件中&#xff0c;电池健康被认为是确保长时间使用和良好性能的关键因素之一。一块健康的电池不仅能提供持久的续航时间&a…

从零开始的抢购脚本开发-油猴开发教程(多快好省)

文章目录 前言为何学习 JavaScript&#xff1f; JS简介JavaScript 能够改变 HTML 内容 JavaScript 能够改变 HTML 属性JavaScript 能够改变 HTML 样式 (CSS)JavaScript 能够隐藏 HTML 元素JavaScript 能够显示 HTML 元素JS的使用外部脚本外部 JavaScript 的优势外部引用JavaScr…

【JavaEE】了解JVM

JVM的基本认识 文章目录 【JavaEE】了解JVM1. JVM中的内存区域划分1.1 JVM的核心区域1.2 JVM内存城防图 2. JVM的类加载机制2.1 loading2.2 verification2.3 preparation2.4 resolution2.5 initialization2.6 类加载触发的时机2.7 双亲委派模型 3. JVM中的垃圾回收策略3.1 JVM释…

cmake 提前结束处理命令: return

有时候,我们有这样的需求,当处理到某个地方的时候,后面的我们都不想处理或者不需要处理的时候,就可以提前结束当前的处理逻辑,回到父级去处理.在C/C中,我们有break关键字跳出当前循环,continue关键字进入下一次循环,return关键字返回当前处理的函数. cmake也提供了break(),con…

浅谈电脑城的衰退是好是坏社会现象_kaic

在过去很长一段时间里&#xff0c;想要购买电子设备都逃不开一个叫“电脑城”的地方&#xff0c;那里鱼龙混杂良莠不齐&#xff0c;是令许多人记忆深刻分外难忘之处。 但是随着时代发展电商兴起&#xff0c;采用传统线下销售的电脑城却逐渐衰退甚至面临消失&#xff0c;对此你怎…

7-3 打怪升级

B0->途经堡垒1->...->B 总耗费能量 武器总价值输入样例: 6 12 1 2 10 5 2 3 16 20 3 1 4 2 2 4 20 22 4 5 2 2 5 3 12 6 4 6 8 5 6 5 10 5 6 1 20 25 1 5 8 5 2 5 2 1 2 6 8 5 4 2 3 6 5输出样例: 5 5->2 2 1 5->1->3 12 7 5->4->6 10 7 5 0 0#inclu…

目标检测——R-CNN网络基础

目录 Overfeat模型RCNN模型算法流程候选区域生成CNN网络提取特征目标分类&#xff08;SVM&#xff09;目标定位预测过程 算法总结 Fast RCNN模型算法流程ROI Pooling目标分类和回归 模型训练模型总结 Overfeat模型 RCNN模型 算法流程 候选区域生成 CNN网络提取特征 目标分类&am…

osg osgText::Text 中文乱码问题修复 解决中

osg osgText::Text 中文乱码问题修复 解决中 #include <osgDB/ConvertUTF>osg::Camera* osgWidget::createTextHUD() { osgText::Font* fontHei osgText::readFontFile("Fonts/simkai.ttf");text->setFont(fontHei);// 步骤二&#xff1a;设置 文字颜…

浅谈分布式系统 - 架构演进

目录 1. 架构演进 1.1 单机架构 1.2 什么是分布式架构 1.3 数据库和应用分离 1.4 引入负载均衡 1.5 引入数据库读写分离 1.6 引入缓存 1.7 数据库分库分表 1.8 微服务架构 2. 分布式系统下的常见概念 1. 架构演进 1.1 单机架构 单机架构只有一台服务器, 这个服务器…

HTML+CSS+JavaScript:渲染柱形统计图

一、需求 用户输入四个季度的数据&#xff0c;根据数据生成柱形统计图&#xff0c;浏览器预览效果如下 二、完整代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&q…

Java利用POI导入Excel数据(多个sheet、模板)

需求&#xff1a;根据excel模板导入数据 sheet1&#xff1a;1-6行为固定格式&#xff0c;且需要取值({xxx});7行开始为数据集合(list) sheet2&#xff1a;都为固定格式&#xff0c;取值地方&#xff1a;{xxx} 1、数据格式&#xff08;两个Sheet&…

从零开始理解Linux中断架构(19)--中断线程化irq_thread

前面一节讲到的中断流处理流程是在hard_irq 流程上&#xff0c;工作在中断堆栈上。还有一种情况是使用中断线程的情形。request_threaded_irq参数中有两个处理函数handler,thread_fn是有区别的。handler主中断处理例程&#xff0c;运行hard_irq 流程上。而如果驱动程序填写thre…

利用R分别绘制配对连线散点图、云雨图、山脊图

大家好&#xff0c;我是带我去滑雪&#xff01; 精美的科研绘图总会给人眼前一亮&#xff0c;今天学习利用R绘制多组配对连线散点图、云雨图、山脊图&#xff0c;这三幅图最近都曾出现在Nature Communications (IF 16.6)中&#xff0c;比如配对连线散点图&#xff0c;如下所示&…

AI智能助手的未来:与人类互动的下一代人工智能技术

自我介绍⛵ &#x1f4e3;我是秋说&#xff0c;研究人工智能、大数据等前沿技术&#xff0c;传递Java、Python等语言知识。 &#x1f649;主页链接&#xff1a;秋说的博客 &#x1f4c6; 学习专栏推荐&#xff1a;人工智能&#xff1a;创新无限、MySQL进阶之路、C刷题集、网络安…

AIGC文生图:使用ControlNet 控制 Stable Diffusion

1 ControlNet介绍 1.1 ControlNet是什么&#xff1f; ControlNet是斯坦福大学研究人员开发的Stable Diffusion的扩展&#xff0c;使创作者能够轻松地控制AI图像和视频中的对象。它将根据边缘检测、草图处理或人体姿势等各种条件来控制图像生成。 论坛地址&#xff1a;Adding…

操作系统进行设备控制的方式

一.I/O控制方式 上一篇的博客介绍了设备管理的一些概念基础知识点&#xff0c;其中I/O控制方式这一块没有详细说明。设备管理的主要任务之一是控制设备和内存或CPU之间的数据传送。外围设备和内存之间的输入/输出控制方式有4种&#xff0c;下面分别加以介绍。 二.程序直接控制…

ITIL 4—事件管理实践

1 关于本文 本文档提供事件管理实践实用指南。分为五个主要部分&#xff0c;内容包括&#xff1a; 本实践的一般信息实践的流程和活动及其在服务价值链中的作用参与实践的组织和人员支持实践的信息和技术对实践的合作伙伴和供应商的考虑。 1.1 ITIL4 认证方案 本文档的部分…

Ubuntu 安装 Docker

本文目录 1. 卸载旧版本 Docker2. 更新及安装工具软件2.1 更新软件包列表2.2 安装几个工具软件2.3 增加一个 docker 的官方 GPG key2.4 下载仓库文件 3. 安装 Docker3.1 再次更新系统3.2 安装 docker-ce 软件 4. 查看是否启动 Docker5. 验证是否安装成功 1. 卸载旧版本 Docker …

图片文字对齐 图片文字居中对齐

方法一: 用 vertical-align: middle; <view class="container"><view class="search"><image src="../../images/icon/search.png" alt="" /><text class="tex">搜索</text></view>&…

手写对象浅比较(React中pureComponent和Component区别)

PureComponent和Component的区别 PureComponent会给类组件默认加一个shouldComponentUpdate这样的周期函数 //PureComponent类似自动加了这段shouldComponentUpdate(nextProps,nextState){let { props, state } this;// props/state:修改之前的属性状态// nextProps/nextState…