js中Array.sort()利用零值多维排序

 更新时间:2023年05月19日 09:24:59   作者:JohnsonW  
本文主要介绍了js中Array.sort()利用零值多维排序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

多维排序

要求:先按数字顺序依次倒序排列,最后按字母排序

let arr = ["apple 55 33 11", "orange 55 40 18", "banana 33 40 15", "watermeion 33 40 17", "peach 33 40 17"]
const compareName = (a, b) => a > b ? 1 : -1
let result = arr.map(item => item.split(' ')).sort((a, b) => {
  return (+b[1]) - (+a[1]) || (+b[2]) - (+a[2]) || (+b[3]) - (+a[3]) || compareName(a[0], b[0])
})
console.log(result)
// [
//   [ 'orange', '55', '40', '18' ],
//   [ 'apple', '55', '33', '11' ],
//   [ 'peach', '33', '40', '17' ],
//   [ 'watermeion', '33', '40', '17' ],
//   [ 'banana', '33', '40', '15' ]
// ]

Array.sort()实现原理:

1. 插入排序

insertionSort.gif

从左往右遍历数组,每次将遍历的项插入到前面的已经排序好的有序数组中,通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。

const insertionSort = function(callback) {
  arr = this
  const len = arr.length
  let preIndex, current
  for (let i = 1; i < len; i++) {
    preIndex = i - 1
    current = arr[i]
    while(preIndex >= 0 && (callback(current, arr[preIndex]) < 0)){
      //callback:将第i个值,和前面已排好的i-1个值进行比较
      arr[preIndex + 1] = arr[preIndex]
      preIndex--
    }
    arr[preIndex + 1] = current
  }
  return arr
}
Array.prototype.insertionSort = insertionSort

调用

let arr = ["apple 55 33 11", "orange 55 40 18", "banana 33 40 15", "watermeion 33 40 17", "peach 33 40 17"]
const compareName = (a, b) => a > b ? 1 : -1
arr.map(item => item.split(' ')).insertionSort((a, b) => {
  return (+b[1]) - (+a[1]) || (+b[2]) - (+a[2]) || (+b[3]) - (+a[3]) || compareName(a[0], b[0])
})
console.log(arr)
// [
//   [ 'orange', '55', '40', '18' ],
//   [ 'apple', '55', '33', '11' ],
//   [ 'peach', '33', '40', '17' ],
//   [ 'watermeion', '33', '40', '17' ],
//   [ 'banana', '33', '40', '15' ]
// ]

2. 快速排序

quickSort.png

基本思想

  • 在数据集之中,选择一个元素作为"基准"(pivot)。
  • 所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。
  • 对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

算法步骤

定义一个quickSort函数

  • 检查数组的元素个数,如果小于等于1,就返回。
  • 选择"基准"(pivot),并将其与原数组分离,再定义两个空数组,用来存放一左一右的两个子集。
  • 开始遍历数组,小于"基准"的元素放入左边的子集,大于基准的元素放入右边的子集。
  • 递归重复
const quickSort = function (callback) {
  let arr = this
  if (arr.length <= 1) { return arr; }
  // 获取基准值得索引
  let pivotIndex = Math.floor(arr.length / 2);
  // 获得索引值
  let pivot = arr.splice(pivotIndex, 1)[0];
  // 定义左右两个空数组
  let left = [];
  let right = [];
  // 分组
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], pivot) < 0) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  // 递归
  return [...left].quickSort(callback).concat([pivot], [...right].quickSort(callback));
};
Array.prototype.quickSort = quickSort

数组长度小于等于 10 的用插入排序InsertionSort,比10大的数组则使用快速排序 QuickSort

参考文档: Array.sort()方法和实现机制

到此这篇关于js中Array.sort()利用零值多维排序的文章就介绍到这了,更多相关js Array.sort()多维排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序开发之toast等弹框提示使用教程

    微信小程序开发之toast等弹框提示使用教程

    弹框提示是我们在开发中经常用的一个效果,下面这篇文章主要给大家介绍了微信小程序开发之toast等弹框提示实现的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 微信小程序实现预览图片功能

    微信小程序实现预览图片功能

    这篇文章主要为大家详细介绍了微信小程序实现预览图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js中document.referrer实现移动端返回上一页

    js中document.referrer实现移动端返回上一页

    本文主要介绍了document.referrer实现移动端返回上一页的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js 利用image对象实现图片的预加载提高访问速度

    js 利用image对象实现图片的预加载提高访问速度

    我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度,一些浏览器试图通过在本地缓存中保存这些图片来解决此问题,感兴趣的朋友可以了解下
    2013-03-03
  • JavaScript实现左侧菜单效果

    JavaScript实现左侧菜单效果

    这篇文章主要为大家详细介绍了JavaScript实现左侧菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 浏览器缓存技术实现浅析

    浏览器缓存技术实现浅析

    这篇文章主要为大家介绍了浏览器缓存技术实现浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • js控制当再次点击按钮时的间隔时间

    js控制当再次点击按钮时的间隔时间

    这篇文章主要介绍通过js如何控制当再次点击按钮是的间隔时间,需要的朋友可以参考下
    2014-06-06
  • js返回顶部实例分享

    js返回顶部实例分享

    本文主要分享了js返回顶部的实例代码。可复制直接运行,方便快捷。有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • js实现iframe自动自适应高度的方法

    js实现iframe自动自适应高度的方法

    这篇文章主要介绍了js实现iframe自动自适应高度的方法,涉及javascript操作iframe框架的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 使用JavaScript实现图片放大镜功能

    使用JavaScript实现图片放大镜功能

    图片放大镜(Image Zoom)效果在许多电子商务网站、在线画廊和产品展示页面中得到广泛应用,它允许用户通过鼠标悬停在图片上,查看图片的详细局部放大效果,本文将详细介绍如何使用 JavaScript 实现一个基本的图片放大镜功能,需要的朋友可以参考下
    2024-12-12

最新评论