之前得到的歌手数据是用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. webpack4+vue打包简单入门

    前言 最近在研究使用webpack的使用,在查阅了数篇文章后,学习了webpack的基础打包流程. 本来就可以一删了之了,但是觉得未免有点可惜,所以就有了这篇文章,供大家参考. webpack打包的教 ...

  2. CSP2019

    $CSP\space S$ 格雷码 $solution:$ 直接模拟即可. 时间复杂度 $O(n)$ . #include<iostream> #include<cstring> ...

  3. C#设计模式:解释器模式(Interpreter Pattern)

    一,C#设计模式:解释器模式(Interpreter Pattern) 1,解释器模式的应用场合是Interpreter模式应用中的难点,只有满足“业务规则频繁变化,且类似的模式不断重复出现,并且容易 ...

  4. git基本命令和仓库操作

    首先git是什么?git是github上的一个代码托管工具,是一款代码版本管理工具,github上的代码是基于git来进行托管的.github是全球的开源社区.Git 保存的不是文件的变化或者差异,而 ...

  5. css秘密花园一

    css秘密花园 1.透明边框 <style> div{ width: 120px; height: 60px; margin: 30px auto; background: pink; b ...

  6. webpack 中如何使用 vue

    1. 安装vue的包: cnpm i vue -S 2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的 loader cnpm i vu ...

  7. 浅析DES、AES、RSA、MD5加密算法及其应用场景

    对称加密算法DES 算法:一种典型的块加密方法,将固定长度的明文通过一系列复杂的操作变成同样长度的密文,块的长度为64位.同时,DES 使用的密钥来自定义变换过程,因此算法认为只有持有加密所用的密钥的 ...

  8. 2019-11-22-Roslyn-在多开发框架让-msbuild-的-Target-仅运行一次

    title author date CreateTime categories Roslyn 在多开发框架让 msbuild 的 Target 仅运行一次 lindexi 2019-11-22 09: ...

  9. 使用Tensorflow搭建回归预测模型之二:数据准备与预处理

    前言: 在前一篇中,已经搭建好了Tensorflow环境,本文将介绍如何准备数据与预处理数据. 正文: 在机器学习中,数据是非常关键的一个环节,在模型训练前对数据进行准备也预处理是非常必要的. 一.数 ...

  10. SpringBoot项目优化和Jvm调优

    https://www.cnblogs.com/jpfss/p/9753215.html 项目调优 作为一名工程师,项目调优这事,是必须得熟练掌握的事情. 在SpringBoot项目中,调优主要通过配 ...