对数组中的元素排序

  • 背景
  • 在进行数据展示的时候,有时候后端返回我们的数据不符合我们的要求,在数据量较小的情况下,前端去处理数据的排序可能更合适,下面是几种常用的数据排序方式。

  • 字符串数组排序
  • 简单回顾下数组的sort方法,默认排序顺序是升序,也就是将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列,比如说['March', 'jan', 'Feb', 4, 3, 'dec'].sort()返回的是[3, 4, 'Feb', 'March', 'dec', 'jan'],数字的单元值 < 大写英文字母 < 小写英文字母

    因此对于格式一致的英文单词排序,直接用sort方法即可

    const months = ['March', 'Jan', 'Feb', 'Dec'];// 升序: ['Dec', 'Feb', 'Jan', 'March']months.sort()// 倒序: ['March', 'Jan', 'Feb', 'Dec']months.sort().reverse()

  • 数值数组排序
  • 由于sort方法是按照字符串的单元值排的,因此直接对数字进行排序不能达到我们的效果,比如说[1, 30, 4, 21, 100000].sort()返回的是[1, 100000, 21, 30, 4]。这时候可以给sort方法传一个compareFunction:

    sort((firstEl, secondEl) => { /* ... */ } )
    // 升序:[1, 4, 21, 30, 100000][1, 30, 4, 21, 100000].sort((firstEl, secondEl) => firstEl - secondEl)// 降序:[100000, 30, 21, 4, 1][1, 30, 4, 21, 100000].sort((firstEl, secondEl) => secondEl - firstEl)

  • 对象数组排序
  • 同样的对于对象数组,我们直接使用localeCompare比较元素的返回值。

    referenceStr.localeCompare(compareString)本身会返回一个数字,表示引用字符串是在比较字符串顺序之前、之后还是与给定字符串相同。如果是之前出现,则为负数;如果是之后,则为正;如果它们相等,则为 0。

    const arr = [{name: 'Jamf'}, {name: 'Bodine'}, {name: 'Prentice'}]// [{name: 'Bodine'}, {name: 'Jamf'}, {name: 'Prentice'}]arr.sort((a, b) => a.name.localeCompare(b.name))

    对于中文排序也同样适用

    // ['李四', '王五', '小二', '张山']['小二', '张山', '李四', '王五'].sort((a, b) => a.localeCompare(b))

    补充资料1:localeCompare使用方法
    补充资料2:数组的sort方法

    对数组中的元素排序首发于聚享小站,如果对您有帮助,不要忘记点赞支持一下呦🎉

    ©著作权归作者所有,转载或内容合作请联系作者
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    推荐阅读更多精彩内容