之前得到的歌手数据是用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. 0ctf 2017 kernel pwn knote write up

    UAF due to using hlist_add_behind() without checking. There is a pair locker(mutex_lock) at delete_n ...

  2. javascript 输入框监听事件

    <div class="coupon-exchange clearfix"> <div class="code-input"> < ...

  3. spring服务器接收参数格式

    注:@RequestParam 或@RequestBody等注解是否添加有什么区别 不加:参数可有可无,无参数时为null,但当参数类型是 数字基本类型(int.double)时会报错: 加上@Req ...

  4. python 快速排序实现

    # -*- coding: utf-8 -*- def quicksort(array): # 基线条件:为空或只包含一个元素的数组是"有序"的 if len(array) < ...

  5. 划水日记之大哥带我走渗透I

    5/24/19 周五 access注入 先测试是否有漏洞 or nor and 1=1 and 1=2 2. Order by 猜字表端,发现一共有22个 3..然后使用 union select 1 ...

  6. [转载]MAC、IP头、TCP头、UDP头帧格式、详解

    原文地址:MAC.IP头.TCP头.UDP头帧格式.详解作者:iTudu 转自:http://zoufengfu168.blog.163.com/blog/static/546105520099133 ...

  7. CIC许可更新

    打开IA软件,点击软件中的[License],可以查看当前许可是否可用或者过期,如果过期,点击下方的[Load License],选择最新的I3许可文件加载,重启电脑.

  8. Java并发(具体实例)——几个例子

    一步步优化页面渲染功能                                                           本节将模拟一个简单的页面渲染功能,它的作用是将HTML页面绘 ...

  9. hdu 1059 Dividing bitset 多重背包

    bitset做法 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a ...

  10. GUI学习之二十三——QComboBox学习总结

    我们在前面分别介绍了两种输入控件:纯键盘文本输入和步长调节器,下面我们来学习下组合框(下拉选择输入). 一.简介 1.下拉框是一个组合控件(包含一个文本显示控件和一个按钮).它默认显示最小的控件给用户 ...