Vue 汉字转拼音；根据拼音首字母排序转二维数组；提取拼音首字母排序。

一、基本使用

下载依赖

cnpm i js-pinyin

使用:

import Pinyin from 'js-pinyin';

console.log(Pinyin.getFullChars('管理员')); // GuanLiYuan
console.log(Pinyin.getCamelChars('管理员')); // GLY;

二、根据拼音首字母排序转二维数组

原数组：

const newIndexList = [
  { username: '张三' },
  { username: '张四' },
  { username: '李四' },
  { username: '王五' }
[

根据拼音首字母排序转二维数组：

// 创建一个空对象，用于存储分组
const grouped = {};
// 遍历原始数组并进行分组 
newIndexList.forEach(item => {
  const username = item.username;
  const pinyin = Pinyin.getFullChars(username);
  const firstLetter = pinyin.charAt(0).toUpperCase();
  if (!grouped[firstLetter]) {
    grouped[firstLetter] = [];
  }
  grouped[firstLetter].push(item);
});
// 将分组后的对象转换为数组
// 获取分组后的键（首字母），并排序
const groupedKeys = Object.keys(grouped).sort();
// 创建一个按首字母排序的结果数组
const sortedGroupedArray = groupedKeys.map(key => grouped[key]);
return sortedGroupedArray
/* 
[
  [
    {username: '王五'},
  ],
  [
    {username: '李四'},
  ],
  [
    {username: '张三'},
    {username: '张四'},
  ]
]
*/

如果需要非汉字或英文的分到 # 组中：
正则表达式 /^[a-zA-Z\u4e00-\u9fa5]/ 来判断 username 头开是否为汉字或英文。如果是，则使用 Pinyin.getFullChars(username).charAt(0).toUpperCase() 获取首字母；否则，将其分到 # 组中

// 创建一个空对象，用于存储分组
const grouped = {};
// 遍历原始数组并进行分组 
newIndexList.forEach(item => {
  const username = item.username;
  const isChineseOrEnglish = /^[a-zA-Z\u4e00-\u9fa5]/.test(username); // 判断是否为汉字或英文
  const firstLetter = isChineseOrEnglish ? 
  Pinyin.getFullChars(username).charAt(0).toUpperCase() : '#';
  if (!grouped[firstLetter]) {
    grouped[firstLetter] = [];
  }
  grouped[firstLetter].push(item);
});
// 将分组后的对象转换为数组
// 获取分组后的键（首字母），并排序
const groupedKeys = Object.keys(grouped).sort();
// 将不为汉字或英文的元素放在同一组 # 中，并确保 # 组放在最后
if (groupedKeys.includes('#')) {
  groupedKeys.splice(groupedKeys.indexOf('#'), 1);
  groupedKeys.push('#');
}
// 创建一个按首字母排序的结果数组
const sortedGroupedArray = groupedKeys.map(key => grouped[key]);
return sortedGroupedArray
/* 
[
  [
    {username: '王五'},
  ],
  [
    {username: '李四'},
  ],
  [
    {username: '张三'},
    {username: '张四'},
  ]
]
*/

三、提取拼音首字母排序:

// 创建一个空数组，用于存储拼音首字母
const pinyinFirstLetters = [];
// 遍历原始数组并获取拼音首字母
newIndexList.forEach(item => {
  const username = item.username;
  const pinyin = Pinyin.getFullChars(username);
  const firstLetter = pinyin.charAt(0).toUpperCase();
  if (!pinyinFirstLetters.includes(firstLetter)) {
    pinyinFirstLetters.push(firstLetter);
  }
});
// 过滤出英文字母，然后在最后加一个 '#'
 let lettersArray = pinyinFirstLetters.sort().filter(item => /[a-zA-Z]/.test(item));
 lettersArray.push('#')
return lettersArray  // ['W','L','Z','#']