原创匠心独运教程 js 工具函数 16 阅读 5 小时前
原生 JavaScript 仿通讯录排序 (数据)
js 手机通讯录排序, 对象数组排序 (按拼音首字母排序, 按指定字段分组排序)
此方法只操作数据, 通过改变获取到的原始数据的顺序和格式, 实现排序功能;
适用于 js 模板引擎, angular,vue 等动态循环加载数据;
由于拼音首字母排序方法和按字段排序方法的区别, 分别封装了两个函数:
- ABCSort(data)// 按拼音首字母排序
- timeSort(data,timeStr)// 按传入字段排序
处理前后的数据对比在 PinYin.html 中 (也可打开控制台查看), 详细注释在 PinYin.js 中
Html 部分
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JavaScript 对文字按照拼音排序 </title>
- </head>
- <body>
- <script src="PinYin.js"></script>
- <script>
- // 服务器取回的原始数组
- var data=[{
- "name": "刘利康",
- "age": 26,
- "sex": "男",
- "groupName":"一组",
- "content": "webtwo ipsum dolor sit amet, eskobo chumby doostang bebo. Bubbli greplin stypi prezi mzinga heroku wakoopa, shopify airbnb dogster dopplr gooru jumo, reddit plickers edmodo stypi zillow etsy.",
- "photo":"views/man/img/2.jpg",
- "interest":["爱好 1", "爱好 2"]
- },{
- "name": "范佩瑶",
- "age": 21,
- "sex": "女",
- "groupName":"三组",
- "content":"I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly chalk and cheese. Lancashire.",
- "photo":"views/man/1.jpg",
- "interest":["爱好 1", "爱好 2", "爱好 3"]
- },
- {
- "name": "吕锦程",
- "age": 25,
- "sex": "男",
- "groupName":"二组",
- "content": "Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.",
- "photo":"views/man/3.jpg",
- "interest":["爱好 1", "爱好 2", "爱好 3"]
- }, {
- "name": "王萌",
- "age": 23,
- "sex": "女",
- "groupName":"二组",
- "content": "Scratch the furniture spit up on light gray carpet instead of adjacent linoleum so eat a plant, kill a hand pelt around the house and up and down stairs chasing phantoms run in circles, or claw drapes. Always hungry pelt around the house and up and down stairs chasing phantoms.",
- "photo":"views/man/1.jpg",
- "interest":["爱好 1", "爱好 2"]
- },{
- "name": "王点",
- "age": 26,
- "sex": "女",
- "groupName":"三组",
- "content": "Webtwo ipsum dolor sit amet, eskobo chumby doostang bebo. Bubbli greplin stypi prezi mzinga heroku wakoopa, shopify airbnb dogster dopplr gooru jumo, reddit plickers edmodo stypi zillow etsy.",
- "photo":"views/man/2.jpg",
- "interest":["爱好 1", "爱好 2"]
- },{
- "name": "小样",
- "age": 26,
- "sex": "女",
- "groupName":"一组",
- "content": "eeeeee",
- "interest":["爱好 1", "爱好 2"]
- }
- ];
- // 排序转换后的数组
- // var data=[
- // {
- // "sorts":"L",
- // "details":[
- // {
- // "name": "吕锦程",
- // "age": 21,
- // "sex": "男",
- // "photo":"images/1.jpg",
- // "interest":["爱好 1", "爱好 2", "爱好 3"],
- // "time":"技术一组"
- // },
- // {
- // "name": "刘利康",
- // "age": 26,
- // "sex": "男",
- // "photo":"images/2.jpg",
- // "interest":["爱好 1", "爱好 2"],
- // "time":"一组"
- // }
- // ]
- // }
- // ...
- // ]
- // 汉字转拼音
- var pinyin = codefans("你好吗");
- console.log("汉字转拼音:"+pinyin);
- // 按字母排序
- console.log("按拼音首字母排序:\n"+ABCSort(data));
- // 按组名分类 (time); 如需组名排序, 可遍历数组 sorts 的值, 调用 sort 函数
- var timeStr="groupName";
- console.log("按指定字段分组排序:\n"+timeSort(data,timeStr));// 参数 1: 原始数据; 参数 2: 分类字段
- </script>
- </body>
- </html>
Js 部分
- //!!! 此处要加入汉字拼音字典表, 请到下方 github 链接中下载源码添加
- //var PinYin = {"a":"\u554a\u963f\u9515",...}
- function codefans(l1) {
- var l2 = l1.length;
- var I1 = "";
- var reg = new RegExp('[a-zA-Z0-9\- ]');
- for (var i=0;i<l2;i++) {
- var val = l1.substr(i,1);
- var name = arraySearch(val,PinYin);
- if(reg.test(val)) {
- I1 += val;
- } else if (name!==false) {
- I1 += name;
- }
- }
- I1 = I1.replace(//g,'-');
- while (I1.indexOf('--')>0) {
- I1 = I1.replace('--','-');
- }
- return I1;
- }
- function arraySearch(l1,l2){
- for (var name in PinYin){
- if (PinYin[name].indexOf(l1)!=-1) {
- return ucfirst(name); break;
- }
- }
- return false;
- }
- function ucfirst(l1){
- if (l1.length>0) {
- var first = l1.substr(0,1).toUpperCase();
- var spare = l1.substr(1,l1.length);
- return first + spare;
- }
- }
- /****************************
- 汉字转拼音
- *****************************/
- // 按拼音首字母排序 (支持中英文混搭)
- function ABCSort(data){// 参数: 原始数据
- var arr=[],firstName;
- for(var i=0;i<data.length;i++){
- // 获取姓名拼音首字母
- firstName=data[i].sorts=codefans(data[i].name).substr(0,1);
- // 统一转大写字母 (适用于英文字母排序)
- arr.push(firstName.toUpperCase());
- }
- // 拼音首字母数组去重
- var arrlist=[];// 数组用于排序
- for(i=0;i<arr.length;i++){
- if(arrlist.indexOf(arr[i])==-1){
- arrlist.push(arr[i]);
- }
- }
- // 数据按拼音首字母分类重组
- var dataSort=[];
- for(var i=0;i<arrlist.length;i++){
- dataSort[i]={sorts:arrlist[i]};
- dataSort[i].details=[];
- for(var j=0;j<data.length;j++){
- if(data[j].sorts.toUpperCase()==dataSort[i].sorts){
- dataSort[i].details.push(data[j]);
- }
- }
- }
- for(var i = 0; i<dataSort.length-1; i++){
- for(var j = 1; j<dataSort.length-i; j++){
- if(dataSort[j-1].sorts> dataSort[j].sorts){
- var a = dataSort[j];
- dataSort[j] = dataSort[j - 1];
- dataSort[j - 1] = a;
- }
- }
- }
- return dataSort;
- }
- /********************************************/
- // 按照传入组名分类 (不排序)
- function timeSort(data,teamStr){// 参数 1: 原始数据; 参数 2: 分类字段
- var arr=[];
- for(var i=0;i<data.length;i++){
- for(var key in data[i]){
- if(key==teamStr){
- arr.push(data[i][key]);
- }
- }
- }
- //sorts 去重
- var arrlist=[];
- for(i=0;i<arr.length;i++){
- if(arrlist.indexOf(arr[i])==-1){
- arrlist.push(arr[i]);
- }
- }
- // 数组按传入字段重组
- var dataSort=[];
- for(var i=0;i<arrlist.length;i++){
- dataSort[i]={sorts:arrlist[i]};
- dataSort[i].details=[];
- for(var j=0;j<data.length;j++){
- for(var key in data[j]){
- if(data[j][key]==dataSort[i].sorts){
- dataSort[i].details.push(data[j]);
- }
- }
- }
- }
- return dataSort;
- }
完整代码可到 github 上下载
github 完整代码下载 https://github.com/LvJinCheng/abcSort
来源: http://www.qdfuns.com/article/50942/43bfec29c91e5b4e58bae9439cf55c51.html