js数组对象按照中文拼音排序
今天遇到一个需求如图所示,下拉框按照中文拼音排序,而我们下拉框给的都是接口传过来的对象,所以要想排序,还是稍微需要处理一下的
话不多说,我们先看一个demo,根据这个demo,我们就能完成,我们想要的了
最简单的小例子
对于数组的处理
var array = ['武汉', '北京', '上海', '天津'];
var resultArray = array.sort(function compareFunction(param1, param2) {return param1.localeCompare(param2,"zh");}
);
console.log(resultArray);
but这只是一个纯数组,我们要处理的数据往往比这复杂,别担心接着看
对于数组对象的处理
//要排序的数据
let data = [{chinese: '蔡司', english: 'Chase'},{chinese: '艾伦', english: 'Allen'}, {chinese: '左拉', english: 'Zola'},{chinese: '贝克', english: 'Baker'}, {chinese: '伯格', english: 'Berg'}, {chinese: '菲奇', english: 'Fitch'}, {chinese: '迪安', english: 'Dean'}, {chinese: '厄尔', english: 'Earle'}, {chinese: '亨利', english: 'Henry'},]//根据汉字首字母排序//使用箭头函数//【注】localeCompare() 是js内置方法data.sort((a, b)=> b.chinese.localeCompare(a.chinese, 'zh')); //z~a 排序data.sort((a, b)=> a.chinese.localeCompare(b.chinese, 'zh')); //a~z 排序 console.log(data);//根据英文排序 比较 首字母ASCLL码console.log(data[0].english.charCodeAt(0));ata.sort((a, b) => b.english.charCodeAt(0) - a.english.charCodeAt(0)); //z~a 排序data.sort((a, b) => a.english.charCodeAt(0) - b.english.charCodeAt(0)); //a~z 排序 console.log(data);
localeCompare() 方法
语法
stringObject.localeCompare(target)
返回值
说明比较结果的数字。如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target,则该方法返回大于 0 的数。如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。
说明
把 < 和 > 运算符应用到字符串时,它们只用字符的 Unicode 编码比较字符串,而不考虑当地的排序规则。以这种方法生成的顺序不一定是正确的。例如,在西班牙语中,其中字符 “ch” 通常作为出现在字母 “c” 和 “d” 之间的字符来排序。
localeCompare() 方法提供的比较字符串的方法,考虑了默认的本地排序规则。ECMAscript 标准并没有规定如何进行本地特定的比较操作,它只规定该函数采用底层操作系统提供的排序规则。
从z~a//根据汉字首字母排序//使用箭头函数//【注】localeCompare() 是js内置方法data.sort((a, b)=> b.chinese.localeCompare(a.chinese, 'zh')); //z~a 排序
从a~zdata.sort((a, b)=> a.chinese.localeCompare(b.chinese, 'zh')); //a~z 排序
根据英文首字母的ASCLL码进行排序从z~a//根据英文排序 比较 首字母ASCLL码//使用箭头函数data.sort((a, b) => b.english.charCodeAt(0) - a.english.charCodeAt(0)); //z~a 排序从a~zdata.sort((a, b) => a.english.charCodeAt(0) - b.english.charCodeAt(0)); //a~z 排序
好的,看了这么多,我们回到问题本身,我直接贴出源码
对数据的处理
从而解决上面下拉选择器的问题
js数组对象按照中文拼音排序相关推荐
- JS数组对象——英文按照首字母进行排序sort()、localeCompare()
JS数组对象--英文按照首字母进行排序(sort.localeCompare) 上期回顾 场景复现 sort()方法与localeCompare 实例应用 上期回顾 文章内容 文章链接 JS数组对象- ...
- 按照拼音对数组中的中文字符串排序的算法
按照拼音对数组中的中文字符串排序的算法,不是很难,这里直接放上代码,Demo去最下面找: 注:里面用到一个叫George的牛人写的中文转拼音首字母的函数pinyinFirstLetter,因为内容实在 ...
- php 按汉字拼音排序,php 数组按中文拼音排序
本篇文章给大家分享的内容是关于php数组按中文拼音排序,有着一定的参考价值,有需要的朋友可以参考一下 $str = "我们可以在浏览器中看到,当鼠标移到元素上时,元素开始向右移动,开始比较慢 ...
- [小结] js sort() 排序 - 升序/降序/中文拼音排序
常规 sort() 排序 - 升序 / 降序 var array = [1,2,6,5,4,3]; var resultArray = array.sort(function(param1, para ...
- ElasticSearch 2.4.X实现中文拼音排序
前言 最近接到一个需求,要求实现搜索框的搜索结果可以按照中文排序,本人灵机一动,那不很简单吗,直接按照es自带的sort功能处理下不就行了吗?两分钟的代码量,半天的喝茶时间,白赚半天的故事点,嘿嘿. ...
- js 数组对象的操作方法
js 数组对象的操作方法 在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行, ...
- 前后端分别实现集合根据中文拼音排序
java实现集合根据中文拼音排序 public static void main(String[] args){Comparator<Object> com = Collator.getI ...
- php 按汉字拼音排序,PHP数组排序关于按中文拼音排序的问题
这天做个页面,需要将图片表里面图片的标签拉出来拆分好后去重按自然排序.结果很囧,应该排序的结果是0-9-A-z-阿-中,但是中文部分就是很乱.再找问题,结果发现自然排序是按照字符编码的顺序来排列.由于 ...
- android 接收js对象数组,java怎么接收js 数组对象数组对象
java怎么接收js 数组对象数组对象 [2021-02-04 22:25:34] 简介: php数组转js数组对象的方法:首先获取[$arr]数组:然后使用函数[json_encode()]将数组 ...
最新文章
- 60. Permutation Sequence
- 操作系统中的进程与线程
- win10 自定义分辨率
- python字符串写入excel-Python向excel中写入数据的方法
- Python3 如何优雅地使用正则表达式(详解五)
- Spring 事务管理高级应用难点剖析--转
- 卖金鱼的地方_1个水族店,5个周转箱,卖鲫鱼和泥鳅,老板对水族的热爱
- pytorch创建tensor
- bootstrap-table 列属性_Bootstrap Table 列参数columns使用总结
- Java多线程(五)——多线程的多线程池
- shell中的重定向(21)
- 基于卷积网络的度量学习
- 如果Linux从未出现,我们的生活会变成怎样?
- YOLOv3的批量图片检测以及批量输出(windows下)
- python中转义符的用法_19.Python转义字符及用法
- Android 百度人脸识别问题总结
- 计算机专业应届研究生面试自我介绍,计算机专业研究生面试自我介绍
- 伪随机二进制序列(PRBS)
- 感叹之余随手记—他山之石,可以攻玉
- 禾穗HERS | 没人diss你,你就厉害了?
热门文章
- Jenkins——Jenkins介绍+基于云平台的Jenkins安装和持续集成环境配置(插件+用户权限+凭据+Maven打包)
- Power收集[单调队列+DP]
- 技术分享 | AlertManager 源码解析
- 这次,在人工智能面前,人类输得一败涂地
- PMP考试有哪些科目
- markdown的基本使用方法 1
- 苹果手机用户流失严重,竟是因为这个原因?
- 测开 - 自动化测试selenium(WebDriver API) - 细节狂魔
- 【用pandas_alive几行代码绘制竞赛动图】10.新南威尔士州 COVID 可视化(测试代码+数据集+绘图参数解析)
- 登陆weblogic console报错 The server encountered an unexpected condition which prevented it from