之前得到的歌手数据是用forEach遍历添加的  没有顺序性  我们希望得到的数据是title:"热门"的数据在最上面  title为字母的数据按字母从低到高顺序排列

var hot=[]
var ret=[]
for(let key in map){
let val=map[key] //在对象map中 键为key 对应的键值
if(val.title.match(\[a-zA-Z]\)){
ret.push(val)
}else if(val.title==="热门"){
hot.push(val)
}
//将ret数组中的对象按首字母大小排列
ret.sort((a,b)=>{
return a.title.charCodeAt(0)-b.title.charCodeAt(0)
})
} return hot.concat(ret)

用Vue来实现音乐播放器(十五):处理得到的歌手数据的更多相关文章

  1. 用Vue来实现音乐播放器(二十一):歌手详情数据抓取

    第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...

  2. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

  3. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  4. 用Vue来实现音乐播放器(三十八):歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  5. 用Vue来实现音乐播放器(十六):滚动列表的实现

    滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件     <template> < ...

  6. 用Vue来实现音乐播放器(十四):歌手数据接口抓取

    第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/j ...

  7. Vue实战:音乐播放器(一) 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  8. 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置

    state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...

  9. 用Vue来实现音乐播放器(十八):右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  10. 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯

    1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 ...

随机推荐

  1. MySQL: InnoDB的并发控制,锁,事务模型

    一.并发控制 为啥要进行并发控制? 并发的任务对同一个临界资源进行操作,如果不采取措施,可能导致不一致,故必须进行并发控制(Concurrency Control). 技术上,通常如何进行并发控制? ...

  2. Django 调试models 输出的SQL语句 定位查看结果

    django 调试models变得更为简单了,不用像之前的版本, 手工去调用django query, 才能打印出之前的代码是执行的什么SQL语句. 1.3开始只需在settings.py里,配置如下 ...

  3. 通过编写串口助手工具学习MFC过程——(六)添加Edit编辑框控件

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  4. 《CSS权威指南》双鱼书概述——第一章CSS和文档

    前言:CSS即层叠样式表 主要是影响一个或者一组文档的表现,没有文档,CSS毫无用处. 一.web的衰落 完全结构化的文本太过古板,太平常,虽然有N个理由要求使用结构化标记,但HTML已然走到了今天. ...

  5. jQuery进阶第四天(2019 10.13)

    1 初识面向对象(面向对象是一种思维方式) 以前写的代码 var name = '莉莉'; var sex = '女'; var age = 18; var name1 = '小明'; var sex ...

  6. MyBatis中返回List

    一般情况下,我们需要返回一个List 在Dao层定义: List<TbAddress> selectAll(); 那么在对应的mapper文件中,应该如下: <select id=& ...

  7. web框架-(二)Django基础

    上面我们已经知道Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessi ...

  8. IntelliTrace调试

    当您进行调试时,IntelliTrace 将在后台收集有关托管应用程序的数据,其中包括来自许多框架组件(例如 ADO.NET.ASP.NET 和 System.XML)的信息.这些 IntelliTr ...

  9. 正确重写hashCode方法

    https://blog.csdn.net/HD243608836/article/details/87367763 到这里,对象写完了,开始描述问题. 计算hashCode的注意事项: 1.不能包含 ...

  10. 【NOIP2015模拟11.3】IOIOI卡片占卜

    题目 K理事长很喜欢占卜,经常用各种各样的方式进行占卜.今天,他准备使用正面写着"I",反面写着"O"的卡片为今年IOI的日本代表队占卜最终的成绩. 占卜的方法 ...