基于uniapp与uview做一个按拼音首字母排序的通讯录页面

效果图：

第一步导入pinyin库并应用，用于区分汉字的拼音首字母

npm i pinyin

import pinyin from "pinyin"

完整算法：

function getListByPinyinFirstLetter(data) {
		const newList = {};
		for (const item of data) {
			let firstLetter;
			if (/[a-zA-Z]/.test(item.name.charAt(0))) {
				// 如果是英文字母开头的直接使用大写首字母
				firstLetter = item.name.charAt(0).toUpperCase();
			} else {
				const pinyinArray = pinyin(item.name, {
					style: pinyin.STYLE_FIRST_LETTER, // 提取拼音首字母
				});
				if (pinyinArray.length > 0) {
					firstLetter = /[a-zA-Z]/.test(pinyinArray[0][0].toUpperCase()) ? pinyinArray[0][0].toUpperCase() :
						"#"; // 获取拼音首字母并转换为大写
				} else {
					// 如果没有拼音首字母，则归类为#
					firstLetter = "#";
				}
			}

			if (!newList[firstLetter]) {
				newList[firstLetter] = [];
			}
			newList[firstLetter].push(item);
		}
		// 将键按字母顺序排序
		const sortedKeys = Object.keys(newList).sort((a, b) => {
			if (a === '#') return 1;
			if (b === '#') return -1;
			return a.localeCompare(b);
		});

		const sortedNewList = {};
		for (const key of sortedKeys) {
			sortedNewList[key] = newList[key];
		}
		console.log(sortedNewList, sortedKeys);
		indexList.value = sortedKeys
		list.value = sortedNewList;
	}

完整代码（样式自己定义）：