Maison  >  Article  >  interface Web  >  Comment implémenter le tri A-Z du Pinyin chinois dans js

Comment implémenter le tri A-Z du Pinyin chinois dans js

php中世界最好的语言
php中世界最好的语言original
2018-04-11 16:07:552843parcourir

Cette fois, je vais vous montrer comment implémenter le tri A-Z du Pinyin chinois en js Quelles sont les précautions pour implémenter le tri A-Z du Pinyin chinois en js. Ce qui suit est un exemple pratique. cas, jetons un coup d'oeil.

Pour implémenter le chinois selon la méthode A-Z, vous pouvez écrire dans les méthodes de vue :

methods:{
        pySort:function(arr,empty){
          var $this = this;
          if(!String.prototype.localeCompare)
            return null;
          var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split('');
          var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');
          var arrList = [];
          for(var m =0;m<arr.length;m++){
            arrList.push(arr[m].name);
          }
          var result = [];
          var curr;
          for(var i=0;i<letters.length;i++){
            curr = {letter: letters[i], data:[]};
            if(i!=26){
              for(var j =0;j<arrList.length;j++){
                var initial = arrList[j].charAt(0);//截取第一个字符
                if(arrList[j].charAt(0)==letters[i]||arrList[j].charAt(0)==letters[i].toLowerCase()){  //首字符是英文的
                  curr.data.push(arrList[j]);
                }else if(zh[i]!=&#39;*&#39;&&$this.isChinese(initial)){   //判断是否是无汉字,是否是中文
                  if(initial.localeCompare(zh[i]) >= 0 &&(!zh[i+1]||initial.localeCompare(zh[i+1]) <0)) {  //判断中文字符在哪一个类别
                    curr.data.push(arrList[j]);
                  }
                }
              }
            }else{
              for(var k =0;k<arrList.length;k++){
                var ini = arrList[k].charAt(0);      //截取第一个字符
                if(!$this.isChar(ini)&&!$this.isChinese(ini)){
                  curr.data.push(arrList[k]);
                }
              }
            }
            if(empty || curr.data.length) {
              result.push(curr);
              //curr.data.sort(function(a,b){
              //  return b.localeCompare(a);    //排序,英文排序,汉字排在英文后面
              //});
            }
          }
          return result;
        },
        isChinese:function(temp){
          var re=/[^\u4E00-\u9FA5]/;
          if (re.test(temp)){return false;}
          return true ;
        },
        isChar:function(char){
          var reg = /[A-Za-z]/;
          if (!reg.test(char)){return false ;}
          return true ;
        }
       }

Convertissez le jsonobject obtenu à partir de php en array et appelez-le directement dans vue ->this.pySort(arr); au format A-Z

Le format affiché dans la sortie de la console est le suivant :

La valeur clé A-Z

est stockée dans la lettre data : stocke le tableau trié

Quant à la vue qui doit être placée sur la page, utilisez v-for loop v-for="(key, value) in arr"

Pour obtenir la valeur du tableau de données, continuez à utiliser v-for="tmp in (key.data)" pour parcourir les éléments que vous souhaitez saisir

C'est relativement simple à écrire, et cette méthode est également courante en js

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. Site Web chinois PHP !

Lecture recommandée :

Comment gérer la superposition d'options de sélection

Le framework d'interface utilisateur mobile Vue implémente la prise de menu latérale -en vigueur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn