深入理解js数组的sort排序

yizhihongxing

关于“深入理解js数组的sort排序”,我可以提供以下攻略:

一、sort排序的基本用法

sort是JavaScript中数组的一种方法,用于给数组排序。基本用法如下:

array.sort(compareFunction)

其中,array是需要排序的数组,compareFunction是比较函数,可以是可选的。如果指定了比较函数,它将决定排序的顺序。如果未指定比较函数,则按字母顺序对元素进行排序:

const fruits = ['apple', 'banana', 'orange', 'lemon']
fruits.sort()
console.log(fruits) // ['apple', 'banana', 'lemon', 'orange']

可以看到,由于没有指定比较函数,sort方法按字母顺序对元素进行排序。

如果要按数字大小对元素排序,比较函数可以这样写:

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
numbers.sort((a, b) => {
  return a - b
})
console.log(numbers) // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

这里指定了一个比较函数,使用箭头函数的形式。比较函数中返回的是a - b,这是一个简单的比较方式,如果它的结果是正数,则a排在b后面,如果结果是负数,则a排在b前面,如果结果是0,则顺序不变。

二、完整的sort排序过程

1.排序算法

sort方法使用的是一种叫做快速排序的算法。快速排序的过程可以分为三个步骤:分割、排序和合并。

分割:将数组分成两个子数组,分割的位置取决于选择的枢轴值(pivot value)。枢轴值可以是数组中的任意元素,但最好选择中间位置的元素。

排序:对分割得到的两个子数组进行排序。

合并:将排序后的子数组合并成一个有序的数组。

2.比较函数

如果指定了比较函数,它将决定排序的顺序。比较函数有以下规定:

  • 如果比较函数的返回值为负数,表示第一个元素在排序后应该排在第二个元素的前面;
  • 如果返回值为0,表示两个元素相等,顺序不变;
  • 如果返回值为正数,表示第二个元素在排序后应该排在第一个元素的前面。

3.具体实现

当对一个数组进行排序时,sort会按照以下步骤进行操作:

  • 如果数组只包含一个元素或为空,返回该数组;
  • 选择一个枢轴值;
  • 将数组分割成两个子数组,比枢轴值小的元素放在左边,大的放在右边;
  • 对子数组进行排序,使用递归的方式;
  • 合并左右两个子数组,并将枢轴值放在中间。

这样就得到了一个排序后的数组。

三、示例说明

下面是针对数组里包含对象的情况的两个示例:

1.根据对象属性排序

假设有这样一个数组:

const people = [
  { name: 'mike', age: 25 },
  { name: 'jane', age: 29 },
  { name: 'john', age: 20 },
]

现在要按年龄大小对这个数组进行排序,可以使用比较函数:

people.sort((a, b) => {
  return a.age - b.age
})

这个比较函数比较简单,直接比较对象的age属性,按照年龄大小进行排序。

2.根据对象多个属性排序

如果要按照多个属性进行排序,则需要修改比较函数。假设有这样一个数组:

const people = [
  { name: 'mike', age: 25, score: 80 },
  { name: 'jane', age: 29, score: 90 },
  { name: 'john', age: 20, score: 75 },
  { name: 'sarah', age: 20, score: 85 },
]

现在要按照年龄和分数对这个数组进行排序,可以使用比较函数:

people.sort((a, b) => {
  if (a.age === b.age) {
    return b.score - a.score
  }
  return a.age - b.age
})

这个比较函数比较复杂,先比较对象的age属性,如果相等,则比较score属性,按照分数降序排序。如果age属性不相等,则按照年龄升序排序。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入理解js数组的sort排序 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Javascript数组的 forEach 方法详细介绍

    下面我将为您详细讲解“Javascript数组的 forEach 方法详细介绍”的完整攻略。 什么是 JavaScript 数组的 forEach 方法? JavaScript 中的数组是一组含有相同类型的数据的集合。forEach() 是 JavaScript 中内置的数组方法,可以帮助我们遍历数组并对每个元素执行一个特定的操作,例如修改、删除或输出数组元…

    JavaScript 2023年5月27日
    00
  • 显示js对象所有属性和方法的函数

    要显示 JS 对象的所有属性和方法,需要使用以下两种方法之一。 方法一:for…in 循环 使用 for…in 循环可遍历该对象所有可枚举的属性名称,从而显示对象的属性和方法。 function showProperties(obj) { for (var propName in obj) { console.log(propName); } } 该…

    JavaScript 2023年5月27日
    00
  • JavaScript结合Canvas绘画画运动小球

    JavaScript结合Canvas绘画画运动小球的攻略如下: 准备工作 在绘制运动小球之前,我们需要做一些准备工作。 创建一个HTML页面,并在页面中添加一个canvas元素。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &lt…

    JavaScript 2023年6月10日
    00
  • php与javascript正则匹配中文的方法分析

    关于“php与javascript正则匹配中文的方法分析”,我为您提供以下攻略。 1. 什么是正则表达式? 正则表达式是一种用来描述字符串模式的方法。它可以在文本中找到特定的字符、单词或模式,并根据需要对它们进行操作。正则表达式常用于搜索、替换和验证文本数据。 2. 中文匹配的基本语法 在正则表达式中,中文是通过Unicode码来表示的。要匹配中文,我们需要…

    JavaScript 2023年5月19日
    00
  • 一文彻底搞懂Vue的MVVM响应式原理

    一文彻底搞懂Vue的MVVM响应式原理 了解Vue.js Vue.js 是一个渐进式JavaScript框架,它采用 MVVM(Model-View-ViewModel)模式进行构建。其中 ViewModel 是 Vue.js 主要的核心,Vue.js 的响应式也是建立在 ViewModel 上的。 Vue.js 的响应式原理 Vue.js 的响应式原理是基…

    JavaScript 2023年6月10日
    00
  • JavaScript基础教程——入门必看篇

    JavaScript基础教程——入门必看篇 第一部分:JavaScript简介 JavaScript是一种广泛使用的脚本语言,它可以让网页具有交互性和动态性。本篇入门教程主要介绍JavaScript的基础知识,帮助初学者快速入门。 第二部分:变量、运算符和语句 在JavaScript中,变量、运算符和语句是非常基础且重要的概念。变量通过声明来定义,运算符可以…

    JavaScript 2023年5月17日
    00
  • 关于document.cookie的使用javascript

    下面我将为您详细讲解如何使用JavaScript中的document.cookie来操作cookie: 什么是cookie? Cookie是一种与特定网站相关联的小文本数据文件。在用户访问网站时,网站将Cookie存储在用户的计算机上,以便下次访问该站点时使用。它可以记录用户的各种信息,例如他们的用户名、购物车内容等。 使用document.cookie操作…

    JavaScript 2023年6月11日
    00
  • JavaScript高级程序设计 阅读笔记(十五) 浏览器中的JavaScript

    JavaScript高级程序设计 阅读笔记(十五) 浏览器中的JavaScript 什么是浏览器中的JavaScript? 浏览器中的JavaScript,简称浏览器端JavaScript,是指使用JavaScript编写的代码在客户端(即浏览器)中运行的过程。 在浏览器中,JavaScript 主要通过以下方式调用: 直接在HTML页面中嵌入JavaScr…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部