本例主要实现 中文汉字按拼音排序的方法和英文按照首字母排序的方法。

要排序的数据:

//要排序的数据
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() 方法

定义和用法

用本地特定的顺序来比较两个字符串。

语法

stringObject.localeCompare(target)
参数 描述
target 要以本地特定的顺序与 stringObject 进行比较的字符串。

返回值

说明比较结果的数字。如果 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~z

     data.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~z

    data.sort((a, b) => a.english.charCodeAt(0) - b.english.charCodeAt(0)); //a~z 排序    

完整演示代码:

//要排序的数据
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));
// data.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);

控制台输出效果(英文从a~z的效果):

js中json对象数组按对象属性排序(sort方法)---2(根据拼音排序汉字和排序英文)的更多相关文章

  1. js中json与数组字符串的相互转化

    <SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'richar ...

  2. JS中如何判断对象是对象还是数组

    JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...

  3. js 数组、对象转json 以及 json转 数组、对象

    let jsonObj = $.parseJSON(jsonStr); //json字符串转化成json对象(jq方法) var jsonObj = JSON.parse(jsonStr); //js ...

  4. JS中有趣的内置对象-JSON

    前言 在以前的web开发中,我们多数选择纯文本或XML作为我们的提交的数据格式,大多数是XML,少数纯文本.其实从AJAX(Asynchronous JavaScript and XML)的命名我们也 ...

  5. js中Json字符串如何转成Json对象(4种转换方式)

    js中Json字符串如何转成Json对象(4种转换方式) 一.总结 一句话总结:原生方法(就是浏览器默认支持的方法) 浏览器支持的转换方式(Firefox,chrome,opera,safari,ie ...

  6. js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数)

    js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数) 一.总结 1.JSON解析:JSON.parse(myJS ...

  7. js中 json对象与json字符串相互转换的几种方式

    以下总结js中 json对象与json字符串相互转换的几种方式: 一.JSON对象转化为JSON字符串 1.使用JSON.stringify()方法进行转换 该方法不支持较老版本的IE浏览器,比如:i ...

  8. js中的伪数组

    一, 伪数组 1. 具有length属性 2. 按索引方式存储数据 3. 不具有数组的方法, 比如push(),pop()等 二, 生成伪数组的方法 在js中生成伪数组的方法比较多 1. functi ...

  9. js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么

    js课程 3-10  js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么 一.总结 一句话总结:js中是对象点方法的形式,这些方法都是对象的方法,而在php.java中却不是这样. 1.j ...

  10. Js中的数据属性和访问器属性

    Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...

随机推荐

  1. mongodb系列~配置文件的优化与处理

    一 简介:讲讲如何优化mongo配置文件二 常规参数     port= //端口     fork=true//守护进程方式启动mongo     logpath=shard.log //mongo ...

  2. Flask图书管管理表

    后端的读写 from flask import Flask,render_template,request from flask_sqlalchemy import SQLAlchemy #导入时间模 ...

  3. windows 10下sublime text3环境的搭建以及配置python开发环境

    1 - 安装Sublime Text 3 到官网下载对应的版本,如下: OS X (10.7 or later is required) Windows - also available as a p ...

  4. valueForKeyPath用途

    可能大家对- (id)valueForKeyPath:(NSString *)keyPath方法不是很了解. 其实这个方法非常的强大,举个例子: NSArray *array = @[@"n ...

  5. python 各种推导式玩法

    推导式套路 除了最简单的列表推导式和生成器表达式,其实还有字典推导式.集合推导式等等. 下面是一个以列表推导式为例的推导式详细格式,同样适用于其他推导式. variable = [out_exp_re ...

  6. 【转】Python标准模块--importlib

    [转]Python标准模块--importlib 作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 P ...

  7. vc++基础班[28]---动态数组及动态链表的讲解

    C++中也有相应的动态数组.动态链表.映射表的模板类,就是STL中的:vector.list.map 他们属于C++标准中的一部分,对于程序的移植性来说也是不错的,但是在MFC编程中使用 CArray ...

  8. 蓝皮书:异象石 【dfs序+lca】

    题目详见蓝皮书[算法竞赛:进阶指南]. 题目大意: 就是给你一颗树,然后我们要在上面进行三种操作:  1.标记某个点  或者  2.撤销某个点的标记  以及   3.询问标记点在树上连通所需的最短总边 ...

  9. TCP、消息分包和协议设计

    TCP是一种流式协议 TCP是一种面向连接的.可靠的.基于字节流的传输层通信协议. 流式协议的特点是什么?就像流水连续不断那样,消息之间没有边界.例如send了3条消息(这里的“消息”是指应用层的一个 ...

  10. 使用OneNote2016发送博客

    本人使用的是博客园的博客,其他的博客设置应该大同小异,OneNote使用的是2016版本,系统为Win10家庭中文版. 传统的在web端编辑发布博客的方式是在是心累,图文编辑麻烦,不便于存储,编辑的时 ...