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

要排序的数据:

//要排序的数据
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. AOP 横行切面编程和 纵向编程 介绍

    1 aop:面向切面(方面)编程,扩展功能不修改源代码实现 2 AOP采取横向抽取机制,取代了传统纵向继承体系重复性代码3 aop底层使用动态代理实现(1)第一种情况,有接口情况,使用动态代理创建接口 ...

  2. linux 文件搜索命令

  3. CNN学习入门

    https://blog.csdn.net/ice_actor/article/details/78648780

  4. Iterables vs. Iterators vs. Generators

    Reprinted from: Iterables vs. Iterators vs. Generators Occasionally I've run into situations of conf ...

  5. dubbo源码分析8——服务暴露概述

    从上文中可知,com.alibaba.dubbo.config.spring.ServiceBean类是负责解析<dubbo:service/>的配置的,下面是它的类图 从类图上可知它继承 ...

  6. 浅谈2017noip信息奥赛普及组试题

    [话前叨叨] 一些日常刷题策略(转载): PS:本题的题目信息来自洛谷平台 下面就是进入正题了(其实这也是我第一次在csdn写博客,所以写的不好的地方也请大家多多谅解和提点/微笑/) 一.score ...

  7. web页面加载、解析、渲染过程

    仅做学习参考,侵权删 原文链接:风吹De麦浪   https://www.cnblogs.com/CandyManPing/p/6635008.html 一.浏览器 浏览器的主要功能是将用户选择的we ...

  8. python 函数 动态参数 和嵌套

    1.动态参数 是可以接收任意的参数.一种方式, 1,位置的动态传参, 写法是: *参数名 接收的参数是tuple类型举个例子:def yue(*food): print(food)yue(" ...

  9. JS中的进制转换

    1 前言 js的进制转换, 分为2进制,8进制,10进制,16进制之间的相互转换, 我们直接利用 对象.toString()即可实现. 仅作为记录. 2 代码 //10进制转为16进制 (10).to ...

  10. docker的安装及项目部署

    Making Docker and Deployment Process Step: set up your docker environment build a image of activeMQ ...