js根据汉字拼音首字母排序分组

最近有一个需求,就是做一个类似通讯录的玩意。这里其实前端的话网上挺多轮子的,直接改改就好了,但是有一点就是在得到汉字之后如何根据拼音的首字母排序并且分组就是一个小问题,当然解决起来也是挺简单的啰。由于我实在小程序中的实现,所以就用的是js。

首先我们需要去github上找到一个开源的汉字库,其实说白了就是一个码表,自己也可以弄,但是没有必要重复造轮子的。

首先,我找的是这个库,star人挺多的 github传送门
也有那种带声标的,但是没必要,这个库就很OK了。由于小程序这边安卓是不能使用localCompare的,所以我们还是使用码表吧。(ps:推荐使用码表,因为localCompare存在兼容性问题,与其碰到问题,不如直接就使用没问题的解决方案)

然后就很简单了,将开源库下面的那个index.js复制到你的util工具包的一个类当中,在需要的页面引入
import Pinyin from '../../utils/pinyin'
引入之后的核心工具方法如下(需要传入需要排序的中文字符数组,变量命名有点随意,不喜勿喷)

function pinyinSort(name) {
  var pinyinArray = new Array()
  for (var bukn = 0; bukn < name.length; bukn++) {
    var o = new Object()
    var ken = Pinyin.getSpell(name[bukn], function (charactor, spell) {
      console.log(charactor, spell);
      return spell[1];
    });
    o.name = name[bukn]
    o.pinyin = ken.split(',').join('')
    pinyinArray.push(o)
  }
  console.log("pinyinArray")
  console.log(pinyinArray)
  // pinyinArray = pinyinArray.sort(compare("pinyin"))
  let map = {
    title: '',
    datas: []
  }
  pinyinArray.forEach((item, index) => {
    if (!map[item.pinyin[0].toUpperCase()]) {
      map[item.pinyin[0].toUpperCase()] = {
        title: item.pinyin[0].toUpperCase(),
        datas: []
      }
    }
    map[item.pinyin[0].toUpperCase()].datas.push({
      name: item.name,
      pinyin: item.pinyin
    })
  }
  )
  console.log("map")
  console.log(map)
  var turn = new Array()
  var letters = "*ABCDEFGHIJKLNMOPQRSTUVWXYZ".split('');
  for (var i = 1; i < letters.length; i++) {
    if (map[letters[i]]) {
      var obj = new Object()
      //自己改改命名改成自己需要的
      obj.title = letters[i]
      obj.datas = map[letters[i]].datas
      turn.push(obj)
    }
  }
  console.log("trun")
  console.log(turn)
  return turn;
}


之后前端的那个界面什么的就可以直接去git上面找了啰。关键一步都搞完了,只需要将排序好的怼上去即可。

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js-pinyin 是一个 JavaScript 拼音转换库,可以将中文转换成拼音,它可以帮助我们实现数组某字段拼音字母排序。 首先,我们需要使用 js-pinyin 将中文转换成拼音,然后提取每个拼音的首字母,最后按照首字母进行排序。 下面是一个示例代码: ```javascript // 引入 js-pinyin 库 import pinyin from 'js-pinyin'; // 假设我们有如下的数组 const arr = [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }, ]; // 将数组按照 name 字段的拼音字母排序 arr.sort((a, b) => { const pinyinA = pinyin.getFullChars(a.name); // 获取 a 的拼音 const pinyinB = pinyin.getFullChars(b.name); // 获取 b 的拼音 const initialA = pinyinA.charAt(0); // 获取 a 的拼音字母 const initialB = pinyinB.charAt(0); // 获取 b 的拼音字母 if (initialA < initialB) { return -1; } if (initialA > initialB) { return 1; } return 0; }); console.log(arr); // 输出排序后的数组 ``` 在上面的代码中,我们先引入了 js-pinyin 库,然后定义了一个数组 arr,包含了一些对象,每个对象都有 name 和 age 两个字段。 接着,我们使用数组的 sort 方法进行排序,sort 方法的参数是一个函数,这个函数接受两个参数 a 和 b,分别表示数组中的两个元素。 在排序函数中,我们首先使用 pinyin.getFullChars 方法将 name 字段转换成拼音,然后使用 charAt(0) 方法获取拼音的首字母,最后按照首字母进行比较,返回 -1、1 或 0,以确定两个元素的顺序。 最后,我们输出排序后的数组。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值