资讯专栏INFORMATION COLUMN

VUE QQ音乐 歌手列表数据结构变更处理

habren / 2018人阅读

引入pinyin
groupBy详见

import pinyin from "pinyin"

export function formatList(arr, keyword) {
  arr.forEach((item,index)=>{
    item.nameFirstChat = pinyin(item[keyword], {
        // heteronym: true, // 启用多音字模式
        // segment: true, // 启用分词,以解决多音字问题。
        style: pinyin.STYLE_NORMAL
    })[0][0].charAt(0).toUpperCase();
  })

  arr = arr.groupBy("nameFirstChat");

  return arr;
}

Array.prototype.groupBy = function (prop) {
  return this.reduce(function (groups, item) {
    var val = item[prop];
    groups[val] = groups[val] || [];
    groups[val].push(item);
    return groups;
  }, {});
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108680.html

相关文章

  • 如何用vue打造一个移动端音乐播放器

    摘要:写在前面没错,这就是慕课网上的那个音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合提升的好项目,做这个项目除了想写一个比较大并且功能复杂的项目,主要原因是要拿它来应对面试,也确实对我的业务能 写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vu...

    lanffy 评论0 收藏0
  • Vue全家桶+Mint-Ui打造高仿QQMusic,搭配详细说明

    摘要:简介最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个音乐的简易版。核心文件则是在在这里使用统一管理页面切换动画,歌曲播放状态,歌曲进度等信息。所有对于歌曲的操作都通过来进行全局管理,然后对相应的变化做出全局改变。 Vue-QQMusic 简介: 最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个QQ音乐的简易版。顺便进一步加深下自己对移动端的知...

    haoguo 评论0 收藏0
  • vue-music(1)音乐播发器 项目开发记录

    摘要:在中新建组件许文瑞正在吃屎。。。。在中添加如下代码三歌手组件开发歌手首页开发数据获取数据获取依旧从音乐官网获取歌手接口创建我们和以前一样,利用我们封装的等发放,来请求我们的接口,返回给。 Vue-Music 跟学一个网课老师做的仿原生音乐APP跟学的笔记,记录点滴,也希望对学习vue初学小伙伴有点帮助 showImg(https://segmentfault.com/img/remot...

    happen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<